精彩的來(lái)了。都說(shuō) ECMAScript6 的指定振奮人心，JavaScript 的魅力越來(lái)越大，這里便是一次體驗(yàn) JavaScript 在 NodeJS 上的新玩法有趣之旅。

在 src/create.js 文件中，主要用到了 NodeJS 自帶的 fs 文件模塊，來(lái)生成新項(xiàng)目的基礎(chǔ)架構(gòu)。文件最后暴露出的 init 方法源碼如下。

exports.init = (path, dist, rootDir) => {
  createRootDir(rootDir)
  // 從新目錄開始新建項(xiàng)目
  dist = dist + rootDir
  copyDir(path, dist)
}

init 方法獲取了 path 參數(shù)、dist 參數(shù)和 rootDir 參數(shù)。在該方法中，我們先將 rootDir 參數(shù)傳入 createRootDir() 函數(shù)中創(chuàng)建項(xiàng)目根目錄。

在哪里創(chuàng)建項(xiàng)目根目錄呢？就在執(zhí)行 cs 命令時(shí)的當(dāng)前目錄下：

const createRootDir = (rootDir) => {
  fs.access(process.cwd(), function (err) {
    if (err) {
      // 目錄不存在時(shí)創(chuàng)建目錄
      fs.mkdirSync(rootDir)
    }
  })
}

有了項(xiàng)目根目錄，就要將模塊下 dist/ 文件夾里的所有文件遞歸拷貝到根目錄下。一個(gè)參數(shù)用來(lái)指向 dist/ 文件夾，另一個(gè)參數(shù)用來(lái)指向根目錄，便可以開始遞歸復(fù)制。

/**
 * [初始化靜態(tài)資源]
 * @param  {[type]} src  [初始化資源路徑]
 * @param  {[type]} dist [當(dāng)前終端所在目錄]
 * @return {[type]}      [description]
 */
const copyDir = (src, dist) => {
  fs.access(dist, function (err) {
    if (err) {
      // 目錄不存在時(shí)創(chuàng)建目錄
      fs.mkdirSync(dist)
    }
    _copy(null, src, dist)
  })

  function _copy (err, src, dist) {
    if (err) { throw err }
    fs.readdir(src, function (err, files) {
      if (err) { throw err }
      // 過(guò)濾不生成的文件
      miscFiles.forEach(function (v) {
        if (!files.includes(v)) return
        files = files.filter(function (k) {
          return k !== v
        })
      })
      // 遍歷目錄中的文件
      files.forEach(function (path) {
        var _src = src + "/" + path
        var _dist = dist + "/" + path
        fs.stat(_src, function (err, st) {
          if (err) { throw err }
          // 判斷是文件還是目錄
          if (st.isFile()) {
            fs.writeFileSync(_dist, fs.readFileSync(_src))
          } else if (st.isDirectory()) {
            // 當(dāng)是目錄是，遞歸復(fù)制
            copyDir(_src, _dist)
          }
        })
      })
    })
  }
}

fs 文件模塊的具體內(nèi)容推薦閱讀阮一峰的開源電子書——《JavaScript 標(biāo)準(zhǔn)參考教程》中的“NodeJS”章節(jié)，來(lái)深入淺出 fs 模塊的用法。

完美，這時(shí)我們就可以發(fā)布我們的腳手架包了。

如何發(fā)布一個(gè) npm 包到 npm 倉(cāng)庫(kù)中，供其他人使用？當(dāng)我們照著第一步，將 package.json 配置好后，其實(shí)模塊的準(zhǔn)備工作已經(jīng)做好了。

還沒有做的就是在域名為 npmjs.com 的官網(wǎng)上注冊(cè)一個(gè)賬號(hào)。這樣，當(dāng)我們直接在模塊根目錄使用 npm publish 命令的時(shí)候，輸入正確的 npmjs.com 賬號(hào)、密碼，就能成功發(fā)布你的開源包了！

縱然讀博文是一個(gè)有趣的體驗(yàn)，但也可以親自動(dòng)手試一試哦。

也就是說(shuō)，酷炫的生成新項(xiàng)目骨架的來(lái)源，只是簡(jiǎn)單的遞歸復(fù)制該模塊下的 dist/ 文件夾到新項(xiàng)目中。但我們需要關(guān)注的重點(diǎn)在于，dist/ 文件夾下，到底裝了什么？

“初級(jí) Web App 項(xiàng)目初始化工具”一說(shuō)，也就名歸有主了。dist/ 模板，也就是新項(xiàng)目的骨架如下。

.
├── .babelrc             # ES6 代碼轉(zhuǎn)義規(guī)則配置
├── .eslint.js           # JavaScript 代碼規(guī)范
├── .gitignore           # Git 不跟蹤的特殊文件
├── LICENSE              # 開源協(xié)議
├── README.md            # 項(xiàng)目介紹
├── material             # README.md 引用的圖片庫(kù)
├── package.json         # 項(xiàng)目配置文件
├── src                  # 源碼開發(fā)目錄
│?? ├── favicon.ico      # 網(wǎng)頁(yè)標(biāo)題小圖標(biāo)
│?? ├── html             # HTML 頁(yè)面模板目錄
│?? ├── image            # 圖片資源目錄
│?? ├── manifest.json    # 網(wǎng)絡(luò)應(yīng)用清單
│?? ├── script           # 腳本文件資源目錄
│?? └── style            # 樣式文件資源目錄
├── webpack.config.js    # Webpack 多文件打包基礎(chǔ)配置
├── webpack.dev.js       # Webpack 開發(fā)環(huán)境配置
├── webpack.prod.js      # Webpack 發(fā)布上線配置
└── yarn.lock            # yarn 包管理器的依賴說(shuō)明

新項(xiàng)目骨架中默認(rèn)推薦了：

使用 Webpack 來(lái)打包多頁(yè)面；

使用 ESLint 來(lái)規(guī)范自己項(xiàng)目的 JavaScript 代碼；

使用 Babel 來(lái)編譯使用 ECMAScript 新特性的 JavaScript 代碼。

使用 MIT 開源協(xié)議；

源代碼都放在 src/ 目錄下；

src/ 目錄要對(duì)不同的代碼進(jìn)行合理的分層。

現(xiàn)在的不足，是未來(lái)的暢想。

這個(gè)模塊并不完美，一個(gè)健壯的命令還應(yīng)該能支持足夠多的參數(shù)，運(yùn)行足夠有意義的子命令。比如我們常用 man 命令來(lái)看另一個(gè)命令的使用手冊(cè)，那要讓用戶能用到 man cs 命令，還需要我們?cè)诖a中加入 man 字段等等。。

我又為什么，這么熱衷于分享這個(gè)輪子？

記得有一個(gè)前端群里曾有人問(wèn)過(guò)：

“怎么沒有 VueJS 的源碼解析？”

時(shí)，我說(shuō)過(guò)：

“大牛很忙，關(guān)注的是前端前沿，不寫這些源碼解析博文是個(gè)好事。
“當(dāng)我們想有一個(gè)源碼解析教程的時(shí)候，這是一個(gè)打開新世界的契機(jī)——未嘗不使我們親自來(lái)寫，通過(guò)分享走向?qū)W習(xí)效率金字塔的最高層？”

這樣的能力并不是人人都能具備，也不必要讓人人都具備。我曾在大一傲氣的說(shuō)過(guò)“做最好的自己，影響該影響的人”，現(xiàn)在想起來(lái)除了有立刻找地洞鉆進(jìn)去的沖動(dòng)外，反而還是覺得有一定的道理（笑。這時(shí)候允許我自稱為一次“教主”，我們的理念是：

讀文檔，讀文檔，讀文檔。
寫博客，寫博客，寫博客。

Hello，我是韓亦樂(lè)，現(xiàn)任本科軟工男一枚。軟件工程專業(yè)的一路學(xué)習(xí)中，我有很多感悟，也享受持續(xù)分享的過(guò)程。如果想了解更多或能及時(shí)收到我的最新文章，歡迎訂閱我的個(gè)人微信號(hào)：韓亦樂(lè)。我的簡(jiǎn)書個(gè)人主頁(yè)中，有我的訂閱號(hào)二維碼和 Github 主頁(yè)地址；我的知乎主頁(yè) 中也會(huì)堅(jiān)持產(chǎn)出，歡迎關(guān)注。
本文內(nèi)部編號(hào)經(jīng)由我的 Github 相關(guān)倉(cāng)庫(kù)統(tǒng)一管理；本文可能發(fā)布在多個(gè)平臺(tái)但僅在上述倉(cāng)庫(kù)中長(zhǎng)期維護(hù)；本文同時(shí)采用【知識(shí)共享署名-非商業(yè)性使用-禁止演繹 4.0 國(guó)際許可協(xié)議】進(jìn)行許可。