element 的 new.js 脚本分析

81 阅读1分钟

看到若川推荐 element 的 new.js 新增组件命令可以减少复制粘贴的操作,勇敢的去学习了一下。

先克隆一下川哥的 element-analysis 仓库

1. 基操

先安装依赖或运行

npm run bootstrap

打开 element/build/bin/new.js 就可以看到核心代码了。

image.png

process.argv[2] 第一个参数是组件名

process.argv[3] 第二个参数是组件中文名,没有就用英文名代替。

const path = require('path');
const fs = require('fs');
const fileSave = require('file-save');
const uppercamelcase = require('uppercamelcase');
const componentname = process.argv[2];
const chineseName = process.argv[3] || componentname;
const ComponentName = uppercamelcase(componentname);

后面主要就是对文件的操作,用一张图来表示吧

element new.js脚本分析.png

脚本中使用 file-save 库非常好用, 也是川哥推荐的,简单使用效果。

const path = require('path');
const fileSave = require('file-save');
const componentname = 'le-ye'
const componentsFile = require('../../components.json');
componentsFile[componentname] = `./packages/${componentname}/index.js`;
fileSave(path.join(__dirname, '../../components.json'))
  .write(JSON.stringify(componentsFile, null, '  '), 'utf8')
  .end('\n');

效果非常好,nice 收工。