本身动手作一个React脚手架（一）

前言

最近和室友商量着想写一个本身的开源项目，想到了本身在工做中惯用的项目结构，惯用的库，在新开项目的时候老是要修改配置一番，挺麻烦的。因而以为本身作个脚手架玩一玩。

已实现的功能

目前初版实现的功能很是简单。仅仅是输入项目名称，生成固定的项目结构，安装依赖能够运行起来。欢迎你们试玩。 项目名: henri-create-app
项目git地址
npm包地址

实现原理

归纳一下说，就是将一个编写好的完整的项目目录复制到新建项目目录里面，而后就能够安装依赖并运行了。下面为你们讲解一下主要实现步骤，带领你们作一个本身的脚手架。固然仍是更但愿你们能加入个人项目，一块儿完善henri-create-app。

package.json

包中经过bin字段指定 命令名称和 要执行的代码入口。
依赖的包和用处：
glob: 匹配查找指定的文件或目录 path: 处理路径 yargs-parser: 获取命令行输入参数
yeomen-generator: 生成器

获取用户输入的项目名

进入./bin/index.js，经过如下代码获取用户输入的项目名参数

const args = yParser(process.argv.slice(2));
const name = args._[0];
复制代码

node中使用process.argv接收用户输入的参数，这里稍加处理，获取到项目名。即henri-create-app后面输入的字符串。

建立项目的根目录

mkdirp.sync(name);
let cwd = process.cwd();
cwd = path.join(cwd, name);
复制代码

上述代码，建立了一个名为name的目录。而后经过process.cwd()获取当前工做目录，再经过path获取到刚建立的项目目录。

复制模板文件

经过yeoman-generator复制文件到项目目录。这是一个专门的用来建立项目的库。这里只是简单地用来复制文件，其余更多强大功能等待你去探索。

const generator = new Generator({
  name,
  env: { cwd },
  resolved: require.resolve('../lib/generators'),
  args
});
generator.run(() => {
  console.log(chalk.green('建立成功!'));
});
复制代码

建立了一个生成器对象，并执行它。
再来到../lib/generators,看看生成器是如何定义的。

class extends Generator {
  constructor(opts) {
    super(opts);
    this.name = basename(opts.env.cwd);
  }

  writing() {
    glob
      .sync('**/*', {
        cwd: this.templatePath(),
        dot: true
      })
      .forEach(file => {
        const filePath = this.templatePath(file);
        if (statSync(filePath).isFile()) {
          this.fs.copyTpl(
            this.templatePath(filePath),
            this.destinationPath(file.replace(/^_/, '.')),
            { name: this.name }
          );
        }
      });
  }
};
复制代码

这里经过继承yeoman的Generator对象，实现一个本身的生成器。 构造函数中定义了一个项目名变量。 重写了writing方法，这是执行run时会调用到的。
writing中只作了一件事，读取templates文件夹下的全部文件或文件夹，输出到项目目录中。
注意到{ name: this.name }代码，这是fs.copyTpl方法传入的context对象，模板中经过<%= name %>引用到此变量。你们能够本身去查看一下templates里面的源码。

结语

粗略地描述了一下实现过程，你们有什么不明白的地方，欢迎提问。我有什么表述错误或不许确的也欢迎指正哦。后期还计划实现更多有趣功能，感兴趣的小伙伴欢迎加入~