用于快速创建 React 组件的 package.json 脚本

Question

是否可以在 package.json 中编写一个 脚本，它将创建一个名称作为参数“MyComponent”（例如）传递的新目录，并将创建四个具有相同名称的文件：

1. MyComponent.js
2. MyComponent.css
3. MyComponent.test.js
4. README.md

---

"scripts": {
  "new_comp": "..."
}

简单用法：

$ yarn (npm run) new_comp --MyComponent

-> 创建了四个指定文件的新目录“MyComponent”

*目录应该在我的当前目录下创建（而不是在package.json所在的根目录下）

Answer 1

我怀疑这可能是一个可直接从 package.js 脚本调用的本机 npm 命令。 但当然可以编写一个 javascript 脚本文件并从 yarn 调用它。您只需创建将实际创建您的文件夹及其内容的脚本。

package.json

...
"scripts": {
    ...
    "babelnode": "node node_modules/babel-cli/bin/babel-node",
    "new_comp": "yarn babelnode ./src/scripts/createComponent.js",
    ...
}
...

createComponent.js

import fs from 'fs';

const dir = process.argv[2];
if (!fs.existsSync(dir)){
    fs.mkdirSync(dir);
}
fs.writeFileSync(path.join(dir,`${dir}.js`), '');
fs.writeFileSync(path.join(dir,`${dir}.css`), '');
fs.writeFileSync(path.join(dir,`${dir}.test.js`), '');
fs.writeFileSync(path.join(dir,'README.MD'), '');

命令行

yarn new_comp MyComponent

问题是“有可能吗”，所以这是未经测试的，但应该可以帮助您入门。

注意事项：

我使用 babel-node 能够在 es6 中编写脚本。

babel-node

如果您不使用它，“MyComponent”参数可能不在process.argv 的索引 2 中

参考资料：

nodejs - fs

babel CLI