用于快速创建React Component的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