造轮子之 npm i -g creatshare-app-init 源码浅析

精彩的来了。都说 ECMAScript6 的指定振奋人心，JavaScript 的魅力越来越大，这里便是一次体验 JavaScript 在 NodeJS 上的新玩法有趣之旅。

在 src/create.js 文件中，主要用到了 NodeJS 自带的 fs 文件模块，来生成新项目的基础架构。文件最后暴露出的 init 方法源码如下。

exports.init = (path, dist, rootDir) => {
  createRootDir(rootDir)
  // 从新目录开始新建项目
  dist = dist + rootDir
  copyDir(path, dist)
}

init 方法获取了 path 参数、dist 参数和 rootDir 参数。在该方法中，我们先将 rootDir 参数传入 createRootDir() 函数中创建项目根目录。

在哪里创建项目根目录呢？就在执行 cs 命令时的当前目录下：

const createRootDir = (rootDir) => {
  fs.access(process.cwd(), function (err) {
    if (err) {
      // 目录不存在时创建目录
      fs.mkdirSync(rootDir)
    }
  })
}

有了项目根目录，就要将模块下 dist/ 文件夹里的所有文件递归拷贝到根目录下。一个参数用来指向 dist/ 文件夹，另一个参数用来指向根目录，便可以开始递归复制。

/**
 * [初始化静态资源]
 * @param  {[type]} src  [初始化资源路径]
 * @param  {[type]} dist [当前终端所在目录]
 * @return {[type]}      [description]
 */
const copyDir = (src, dist) => {
  fs.access(dist, function (err) {
    if (err) {
      // 目录不存在时创建目录
      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()) {
            // 当是目录是，递归复制
            copyDir(_src, _dist)
          }
        })
      })
    })
  }
}

fs 文件模块的具体内容推荐阅读阮一峰的开源电子书——《JavaScript 标准参考教程》中的“NodeJS”章节，来深入浅出 fs 模块的用法。

完美，这时我们就可以发布我们的脚手架包了。

如何发布一个 npm 包到 npm 仓库中，供其他人使用？当我们照着第一步，将 package.json 配置好后，其实模块的准备工作已经做好了。

还没有做的就是在域名为 npmjs.com 的官网上注册一个账号。这样，当我们直接在模块根目录使用 npm publish 命令的时候，输入正确的 npmjs.com 账号、密码，就能成功发布你的开源包了！

纵然读博文是一个有趣的体验，但也可以亲自动手试一试哦。

也就是说，酷炫的生成新项目骨架的来源，只是简单的递归复制该模块下的 dist/ 文件夹到新项目中。但我们需要关注的重点在于，dist/ 文件夹下，到底装了什么？

“初级 Web App 项目初始化工具”一说，也就名归有主了。dist/ 模板，也就是新项目的骨架如下。

.
├── .babelrc             # ES6 代码转义规则配置
├── .eslint.js           # JavaScript 代码规范
├── .gitignore           # Git 不跟踪的特殊文件
├── LICENSE              # 开源协议
├── README.md            # 项目介绍
├── material             # README.md 引用的图片库
├── package.json         # 项目配置文件
├── src                  # 源码开发目录
│   ├── favicon.ico      # 网页标题小图标
│   ├── html             # HTML 页面模板目录
│   ├── image            # 图片资源目录
│   ├── manifest.json    # 网络应用清单
│   ├── script           # 脚本文件资源目录
│   └── style            # 样式文件资源目录
├── webpack.config.js    # Webpack 多文件打包基础配置
├── webpack.dev.js       # Webpack 开发环境配置
├── webpack.prod.js      # Webpack 发布上线配置
└── yarn.lock            # yarn 包管理器的依赖说明

新项目骨架中默认推荐了：

使用 Webpack 来打包多页面；

使用 ESLint 来规范自己项目的 JavaScript 代码；

使用 Babel 来编译使用 ECMAScript 新特性的 JavaScript 代码。

使用 MIT 开源协议；

源代码都放在 src/ 目录下；

src/ 目录要对不同的代码进行合理的分层。

现在的不足，是未来的畅想。

这个模块并不完美，一个健壮的命令还应该能支持足够多的参数，运行足够有意义的子命令。比如我们常用 man 命令来看另一个命令的使用手册，那要让用户能用到 man cs 命令，还需要我们在代码中加入 man 字段等等。。

我又为什么，这么热衷于分享这个轮子？

记得有一个前端群里曾有人问过：

“怎么没有 VueJS 的源码解析？”

时，我说过：

“大牛很忙，关注的是前端前沿，不写这些源码解析博文是个好事。
“当我们想有一个源码解析教程的时候，这是一个打开新世界的契机——未尝不使我们亲自来写，通过分享走向学习效率金字塔的最高层？”

这样的能力并不是人人都能具备，也不必要让人人都具备。我曾在大一傲气的说过“做最好的自己，影响该影响的人”，现在想起来除了有立刻找地洞钻进去的冲动外，反而还是觉得有一定的道理（笑。这时候允许我自称为一次“教主”，我们的理念是：

读文档，读文档，读文档。
写博客，写博客，写博客。

Hello，我是韩亦乐，现任本科软工男一枚。软件工程专业的一路学习中，我有很多感悟，也享受持续分享的过程。如果想了解更多或能及时收到我的最新文章，欢迎订阅我的个人微信号：韩亦乐。我的简书个人主页中，有我的订阅号二维码和 Github 主页地址；我的知乎主页 中也会坚持产出，欢迎关注。
本文内部编号经由我的 Github 相关仓库统一管理；本文可能发布在多个平台但仅在上述仓库中长期维护；本文同时采用【知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议】进行许可。