场景

搭建环境是开发工作的第一步，但是根据项目不同，虽然可能有些大同小异的改变，但是在项目之间，项目本身的模块之间有很多共性的东西，把这些东西提取出来不但是工(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();
  }
}

转载请注明出处