场景
搭建环境是开发工作的第一步，但是根据项目不同，虽然可能有些大同小异的改变，但是在项目之间，项目本身的模块之间有很多共性的东西，把这些东西提取出来不但是工(tou)程(lan)化的需求，也是一个总体把握工程的反思。
cli
cli - command-line interface 也就是命令行命令，如果没接触过cmd或者linux的terminal的话，理解成用文本命令来控制的计算机的即可。
准备
- nodejs 版本随意，es6看你心情
- 假设任务如下
某实际项目初始化的时候需要两个参数：名称、ID
输入后其他参数根据该参数进行生成，我们的任务是创建一个脚本，接受这两个参数，再加一个生成的路径，执行cli后可以生成一个web项目。
目标
- 设计工作目录
- 引入需要的文件
- 创建脚手架
实现
- 设计一个工作目录的文件夹结构
[project-name]
- html
- icons
- js
- css
manifest.json
- 安装fs-extra
cmd执行: npm install --save fs-extra //安装一个fs的扩展包，方便开发
- 创建一个脚本文件起名
Generator.js
module.exports = class Generator{
constructor(){
this.name = "default"; //项目名称
this.path = ""; //创建的路径
this.id = 0; //项目需要参数（ID为例）
this.files = [
'',
'html',
'icons',
'js',
'css'
]; //创建的文件夹
}
setName(name){
this.name = name;
};
getName(name){
return this.name;
};
... //其他get和set方法略
}
- 添加创建文件夹的功能
addfolder(){
let __self = this;
__self.files.forEach(function(value, index, array) {
fs.ensureDirSync(__self.filepath + "/" + value);
//翻翻上面，`this.files`中作者偷了个懒
});
}
- 引入不需要设置的静态资源文件
constructor(){
...
this.js = [
'aaa.js',
'jquery-3.2.1.min.js',
'bbb.js'
]
...
addfiles(){
...
__self.js.forEach(function(value,index,array){
fs.copySync(global.enter + '/resource/'+value, filepath + "/js/"+value);
});
...
}
}
- 引入自定义文件（json为例）
我的做法是先创建一个default.json然后读到程序中，根据传入的参数进行替换，生成所需的json
constructor(){
this.defaultJSON = require(global.enter + '/resource/defaultmanifest.json');
//global.enter是因为我使用了electron所以用了一个global变量，自己写的时候按需修改即可
}
...
setJson(){
let __self = this;
__self.defaultJSON.appId = __self.id;
}
...
最后
cmd执行: node Generator.js
你会得到：
image.png
好处
- 以后不用再配置了，两秒新建一个工程，比如
reset.css什么的引用，大家自由发挥 - 再也不怕配的乱七八糟，项目里一卡车的冗余文件了
鸽...
- 如何命令行接受参数
- 如何在electron中使用
附赠代码，不保证能运行
//Generator.js
const fs = require('fs-extra');
module.exports = class Project{
constructor(){
this.defaultJSON = require(global.enter + '/resource/defaultmanifest.json');
this.name = "default";
this.path = "";
this.id = 0;
this.files = [
'',
'html',
'icons',
'js',
'css'
];
this.js = [
'ccc.js',
'jquery-3.2.1.min.js',
'aaa.js'
]
};
setName(name){
this.name = name;
};
getName(name){
return this.name;
};
setPath(path){
this.path = path;
};
getPath(){
return this.path;
};
setID(id){
this.id = id;
}
setJson(){
let __self = this;
__self.defaultJSON.appId = __self.id;
__self.defaultJSON.appName = "" + __self.name;
};
newProject(name,path,id){
this.init(name,path,id);
let __self = this;
let filepath = __self.path + "/" + __self.name ;
__self.files.forEach(function(value, index, array) {
fs.ensureDirSync(filepath + "/" + value);
});
fs.writeJsonSync( filepath +'/manifest.json', __self.defaultJSON);
__self.js.forEach(function(value,index,array){
fs.copySync(global.enter + '/resource/'+value, filepath + "/js/"+value);
});
};
init(name,path,id){
this.setName(name);
this.setPath(path);
this.setID(id);
this.setJson();
}
}
