本身動手作一個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裏面的源碼。

結語

粗略地描述了一下實現過程，你們有什麼不明白的地方，歡迎提問。我有什麼表述錯誤或不許確的也歡迎指正哦。後期還計劃實現更多有趣功能，感興趣的小夥伴歡迎加入~