精彩的來了。都說 ECMAScript6 的指定振奮人心，JavaScript 的魅力越來越大，這里便是一次體驗 JavaScript 在 NodeJS 上的新玩法有趣之旅。

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

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

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

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

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

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

/**
 * [初始化靜態(tài)資源]
 * @param  {[type]} src  [初始化資源路徑]
 * @param  {[type]} dist [當前終端所在目錄]
 * @return {[type]}      [description]
 */
const copyDir = (src, dist) => {
  fs.access(dist, function (err) {
    if (err) {
      // 目錄不存在時創(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 }
      // 過濾不生成的文件
      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()) {
            // 當是目錄是，遞歸復(fù)制
            copyDir(_src, _dist)
          }
        })
      })
    })
  }
}

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

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

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

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

縱然讀博文是一個有趣的體驗，但也可以親自動手試一試哦。

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

“初級 Web App 項目初始化工具”一說，也就名歸有主了。dist/ 模板，也就是新項目的骨架如下。

.
├── .babelrc             # ES6 代碼轉(zhuǎn)義規(guī)則配置
├── .eslint.js           # JavaScript 代碼規(guī)范
├── .gitignore           # Git 不跟蹤的特殊文件
├── LICENSE              # 開源協(xié)議
├── README.md            # 項目介紹
├── material             # README.md 引用的圖片庫
├── package.json         # 項目配置文件
├── src                  # 源碼開發(fā)目錄
│?? ├── favicon.ico      # 網(wǎng)頁標題小圖標
│?? ├── html             # HTML 頁面模板目錄
│?? ├── 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 包管理器的依賴說明

新項目骨架中默認推薦了：

使用 Webpack 來打包多頁面；

使用 ESLint 來規(guī)范自己項目的 JavaScript 代碼；

使用 Babel 來編譯使用 ECMAScript 新特性的 JavaScript 代碼。

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

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

src/ 目錄要對不同的代碼進行合理的分層。

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

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

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

記得有一個前端群里曾有人問過：

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

時，我說過：

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

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

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

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