element用脚本自动化构建新组件的实现示例

目录

• 背景
• element-ui的自动化构建是怎么做的

• makefile
• new.js
• file-save

• fs.createWriteStream

@# 默认的#注释会在日志中输出，@#则不会
@# .PHONY的作用: 在下方的脚本命令中忽略检查是否与dist、test目录冲突，也就是说无论如何都会去执行命令
.PHONY: dist test
@# 执行make命令时，默认执行help脚本
default: help
@# 执行`make build-theme`就是执行`npm run build:theme`脚本，
@# : 冒号前面为执行的命令，冒号后面第二行第一个应该为一个tab，tab之后跟脚本命令
@# 也就是说下面的为 'tab+npm npm build: theme'
# build all theme
@# 上面的build theme注释可以查看下方的截图，会在日志中输出
build-theme: 
 npm run build:theme
install:
 npm install
dev:
 npm run dev
@# $()为使用函数
@# $@ 为当前命令本身比如 'make new'，$@ 就是 new
@# MAKECMDGOALS 特殊变量，该变量记录了命令行参数指定的目标列表，也就是说使用这个变量，我们可以得到命令行的参数
@# 比如我们在创建新组件时，使用脚本`make new wailen` MAKECMDGOALS 就等于 wailen
@# filter-out 反过滤函数，过滤掉 $(MAKECMDGOALS) 中所有含有 $@ 的内容
@# 结合new.js的内容，下方脚本的意思也就是创建新组建，传入组件名称，组件名称不得为new，如果组件名称取为new，可以查看下方截图
new:
 node build/bin/new.js $(filter-out $@,$(MAKECMDGOALS))
@# 省略了一些脚本，感兴趣的可以自行查看源码
help:
 @echo "   \033[35mmake\033[0m \033[1m命令使用说明\033[0m"
 @echo "   \033[35mmake install\033[0m\t\033[0m\t\033[0m\t\033[0m\t---  安装依赖"
 @echo "   \033[35mmake new <component-name> [中文名]\033[0m\t---  创建新组件 package. 例如 'make new button 按钮'"
 @echo "   \033[35mmake dev\033[0m\t\033[0m\t\033[0m\t\033[0m\t---  开发模式"
 @echo "   \033[35mmake dist\033[0m\t\033[0m\t\033[0m\t\033[0m\t---  编译项目，生成目标文件"
 @echo "   \033[35mmake deploy\033[0m\t\033[0m\t\033[0m\t\033[0m\t---  部署 demo"
 @echo "   \033[35mmake pub\033[0m\t\033[0m\t\033[0m\t\033[0m\t---  发布到 npm 上"
 @echo "   \033[35mmake new-lang <lang>\033[0m\t\033[0m\t\033[0m\t---  为网站添加新语言. 例如 'make new-lang fr'"

const fileSave = require('file-save');
const content = "const fs = require('fs');"
const callback = () => { console.log('脚本执行') }
fileSave('文件路径')
   .write('文件内容比如上面的content', 'utf8', callback) // 内容写入成功会触发回调
   .write('继续添加content','utf8')
   .end('\n') // 文件操作结束，以空白行结束

// 创建 package
// 组件生成的目录
const PackagePath = path.resolve(__dirname, '../../packages', componentname);
Files.forEach(file => {
  fileSave(path.join(PackagePath, file.filename))
    .write(file.content, 'utf8')
    .end('\n');
});

const fileSave = require('file-save');
const fs = require('fs');
const content = `const fileSave = require('file-save'); `
const oldCode = fs.readFileSync('./demo.js')
fileSave('demo.js')
  .write(oldCode+content, 'utf8')
  .end('\n')

const fs = require('fs')
//创建可写流 fs.WriteStream 类的对象，继承自 <stream.Writable>
const writer = fs.createWriteStream('createStream.js', { // 查找该文件，没有则创建
    //默认值为w， 通过调用writer.write方法写入数据的时候，会直接覆盖文件所有的内容，
    // 即会把文件之前的内容全部再删除，写入新的数据
    flags: 'w'
})
//写入数据到流
writer.write('这个文件的新内容')

const savefs = {}
savefs._create_dir = function (fp, opts) {
  mkdirp.sync(fp, opts);
}
savefs.wstream = function (file) {
  var ws = fs.createWriteStream(file);
  this.writer = ws;
  return this;
}
savefs.write = function(chunk, encoding, cb) {
  ...
}
savefs.end = function(chunk, encoding, cb) {
  ...
}
savefs.finish = function(cb) {
  ...
}
savefs.error = function(cb) {
  ...
}
export { savefs }

fs.writeFile('文件路径'，'要写入的内容'，['编码']，'回调函数');