Webpack笔记（三）——一款破产版脚手架的开发

前些天一直在学习入门Webpack，后来尝试了自己搭建一下一个简单的React开发环境，后来就在想可不可以自己写一个简单的脚手架，以免每次搭建一个简单的开发环境都需要自己一个个的配置，这样很麻烦，使用create-react-app的话，配置一大堆可能不会用到的功能，比较冗余，所以自己写一个超级简化的脚手架，只处理ES6代码、JSX语法和css模块，这样就满足了基本的使用。

后来在开发的过程中又遇到了新的麻烦，比如使用Node的child_process.spawn方法调用npm命令时，会出现错误，因为在Windows环境下，实际上要调用npm.cmd，而非npm，在这里出现了问题，还有一些其他问题，后来正好看到了@Jsonz大神写的两篇文章：探索 create-react-app 源码和create-react-app 源码解析之react-scripts，于是也照着学习了一下create-react-app脚手架的源码，基本解决了一些问题，最终写出来了一个简（can）单（fei）的React脚手架，当然还有许许多多的不足，但是这个学习的过程值得我记录下来。

这篇文章记录了以下知识：

如何使用Node开发一个简单的脚手架。
如何发布你的npm模块并定制命令。

一、开发React脚手架

create-react-app是一个很成功的、功能完善的脚手架，考虑到了许多方面，比如使用npm或者yarn，比如npm和Node版本、日志的记录和打印等等诸多方面，开发环境搭建的也十分完善，除了基本的React开发之外，还考虑了图片、postcss、sass、graphQL等等模块的处理。由于能力有限，本文开发的脚手架只涵盖了基本模块的处理，不包含图片、sass……等等。

脚手架的作用主要是建立一个React开发的标准目录、并且配置好webpack打包工具，使得开发过程中可以直接在标准的目录上修改，然后通过配置好的命令启动本地服务器或者打包app。所以脚手架中应该包括一个模板文件夹，里面放入应该拷贝到用户工程文件夹的所有文件或目录。在使用脚手架时，先把模板文件夹中的内容拷贝到用户工程文件夹下，然后修改package.json配置文件，最后安装所有模块。这就是我开发的脚手架所完成的基本工作。

脚手架工程目录结构如下：

ROOT

│  .gitignore

│  .npmignore

│  LICENSE

│  package-lock.json

│  package.json

│  README.md

│

├─dist

├─package

│      create-react.js

│

└─templates

    │  .babelrc

    │  .gitignore

    │  README.md

    │  webpack.base.conf.js

    │  webpack.dev.conf.js

    │  webpack.prod.conf.js

    │

    ├─dist

    └─src

        │  index.css

        │  index.html

        │  index.js

        │

        └─components

                App.js

根据我的前一篇文章，搭建React开发环境，最小化的标准目录结构应该如下：

ROOT

│  .babelrc

│  .gitignore

│  README.md

│  webpack.base.conf.js

│  webpack.dev.conf.js

│  webpack.prod.conf.js

│

├─dist

└─src

    │  index.css

    │  index.html

    │  index.js

    │

    └─components

            App.js

所以在脚手架根目录下的templates文件夹中应该包含以上文件，文件内的内容可以自由定制。

同样根据上一篇文章，需要安装的模块主要有：

'webpack',

'webpack-cli',

'html-webpack-plugin',

'clean-webpack-plugin',

'webpack-dev-server',

'css-loader',

'webpack-merge',

'style-loader',

'babel-preset-env',

'babel-loader',

'babel-polyfill',

'babel-preset-react'

和

'react',

'react-dom'

第一部分只需要安装在开发环境（npm i -D ...），第二部分生产环境也要安装（npm i --save ...）。

那么接下来可以通过Node实现脚手架的开发了。

首先介绍一些有用的并且会用到的模块：

cross-spawn：解决跨平台使用npm命令的问题的模块。
chalk：实现控制台彩色文字输出的模块。
fs-extra：实现了一些fs模块不包含的文件操（比如递归复制、删除等等）的模块。
commander：实现命令行传入参数预处理的模块。
validate-npm-package-name：对于用户输入的工程名的可用性进行验证的模块。

首先，在代码中引入这些基本的模块：

const spawn = require('cross-spawn');

const chalk = require('chalk');

const os = require('os');

const fs = require('fs-extra');

const path = require('path');

const commander = require('commander');

const validateProjectName = require('validate-npm-package-name');

const packageJson = require('../package.json');

然后定义我们的模板复制函数：

function copyTemplates() {

    try {

        if(!fs.existsSync(path.resolve(__dirname, '../templates'))) {

            console.log(chalk.red('Cannot find the template files !'));

            process.exit(1);

        }

        fs.copySync(path.resolve(__dirname, '../templates'), process.cwd());

        console.log(chalk.green('Template files copied successfully!'));

        return true;

    }

    catch(e) {

        console.log(chalk.red(`Error occured: ${e}`))

    }

}

fs模块首先检测模板文件是否存在（防止被用户删除），如果存在则通过fs的同步拷贝方法（copySync）拷贝到脚手架的当前工作目录（即process.cwd()），如果不存在则弹出错误信息，随后使用退出码1退出进程。

随后定义package.json的处理函数;

function generatePackageJson() {

    let packageJson = {

        name: projectName,

        version: '1.0.0',

        description: '',

        scripts: {

            start: 'webpack-dev-server --open --config webpack.dev.conf.js',

            build: 'webpack --config webpack.prod.conf.js'

        },

        author: '',

        license: ''

    };

    try {

        fs.writeFileSync(path.resolve(process.cwd(), 'package.json'), JSON.stringify(packageJson));

        console.log(chalk.green('Package.json generated successfully!'));

    }

    catch(e) {

        console.log(chalk.red(e))

    }

}

可以看出先是定义了一个JavaScript Object，然后修改属性之后通过fs模块将其JSON字符串写入到了package.json文件中，实现了package.json的生成。

最后安装所有的依赖，分为devDependencies和dependencies：

function installAll() {

    console.log(chalk.green('Start installing ...'));

    let devDependencies = ['webpack', 'webpack-cli', 'html-webpack-plugin', 'clean-webpack-plugin', 'webpack-dev-server', 'css-loader', 'webpack-merge', 'style-loader', 'babel-preset-env', 'babel-loader', 'babel-polyfill', 'babel-preset-react'];

    let dependencies = ['react', 'react-dom'];

    const child = spawn('cnpm', ['install', '-D'].concat(devDependencies), {

        stdio: 'inherit'

    });

    child.on('close', function(code) {

        if(code !== 0) {

            console.log(chalk.red('Error occured while installing dependencies!'));

            process.exit(1);

        }

        else {

            const child = spawn('cnpm', ['install', '--save'].concat(dependencies), {

                stdio: 'inherit'

            })

            child.on('close', function(code) {

                if(code !== 0) {

                    console.log(chalk.red('Error occured while installing dependencies!'));

                    process.exit(1);

                }

                else {

                    console.log(chalk.green('Installation completed successfully!'));

                    console.log();

                    console.log(chalk.green('Start the local server with : '))

                    console.log();

                    console.log(chalk.cyan('    npm run start'))

                    console.log();

                    console.log(chalk.green('or build your app via :'));

                    console.log();

                    console.log(chalk.cyan('    npm run build'));

                }

            })

        }

    });

}

函数中，通过cross-spawn执行了cnpm的安装命令，值得注意的是其配置项：

{

    stdio: 'inherit'

}

代表将子进程的输出管道连接到父进程上，及父进程可以自动接受子进程的输出结果,详情见options.stdio。

通过commander模块实现命令行参数的预处理;

const program = commander

.version(packageJson.version)

.usage(' [options]')

.arguments('<project-name>')

.action(name => {

    projectName = name;

})

.allowUnknownOption()

.parse(process.argv);

其中，version方法定义了create-react-application -V的输出结果，usage定义了命令行里的用法，arguments定义了程序所接受的默认参数，然后在action函数回调中处理了这个默认参数，allowUnknownOption表示接受多余参数，parse表示把多余未解析的参数解析到process.argv中去。

最后是调用三个方法实现React开发环境的搭建：

if(projectName == undefined) {

    console.log(chalk.red('Please pass the project name while using create-react!'));

    console.log(chalk.green('for example:'))

    console.log();

    console.log('   create-react-application ' + chalk.yellow('<react-app>'));

}

else {

    const validateResult = validateProjectName(projectName);

    if(validateResult.validForNewPackages) {

        copyTemplates();

        generatePackageJson();

        installAll();

        //console.log(chalk.green(`Congratulations! React app has been created successfully in ${process.cwd()}`));

    }

    else {

        console.log(chalk.red('The project name given is invalid!'));

        process.exit(1);

    }

}

如果接受的工程名为空，那么弹出警告。如果不为空，就验证工程名的可用性，如果不可用，就弹出警告并且退出进程，否则调用之前定义的三个主要函数，完成环境的搭建。

截止到此，使用该程序的方式仍然是node xxx.js --parameters的方式，我们需要自定义一个命令，并且最好将程序上传到npm，便于使用。

二、定义你的命令并且发布npm包

实现自定义命令并发布npm模块只需要以下几步：

修改入口文件，头部添加以下两句：
```
#!/usr/bin/env node

  'use strict'
```
　　

第二行也一定不能少！

修改package.json，添加bin属性：

// package.json

  {

      "bin": {

          "create-react-application": "package/create-react.js"

      }

  }

执行以下命令：
```
npm link
```
　　
注册npm账户（如已经注册则可以忽略）。
执行以下命令：
```
npm adduser
```
　　

并输入账户密码。
执行以下命令：
```
npm publish
```
　　

接下来就可以收到发布成功的邮件啦！

如果要更新你的npm模块，执行以下步骤：

使用一下命令更新你的版本号：
```
npm version x.x.x
```
　　
再使用以下命令发布;
```
npm publish
```

执行完以上步骤之后，就可以在npm下载你的模块啦！

三、FQA

（1）关于`#!/usr/bin/env node`

这是Unix系操作系统中的一种写法，名字叫做Shebang或者Hashbang等等。在Wikipedia的解释中，把这一行代码写在脚本中，使得操作系统把脚本当做可执行文件执行时，会找到对应的程序执行（比如此文中的node），而这段代码本身会被解释器所忽略。

（2）关于`npm link`

在npm官方文档的解释中，npm link的执行，是一个两步的过程。当你在你的包中使用npm link时，会将全局文件夹：{prefix}/lib/node_modules/<package>链接到执行npm link的文件夹，同样也会将执行npm link命令的包中的所有可执行文件链接到全局文件夹{prefix}/bin/{name}中。

此外，npm link project-name会将全局安装的project-name模块链接到执行npm link命令的当前文件夹的node_modules中。

根据npm官方文档，prefix的值可为：

/usr/local （大部分系统中）
%AppData%\npm （Windows中）

具体参考：prefix configuration和npm link

四、简单尝试

本文所开发的脚手架已经上传到了npm，可以通过以下步骤查看实际效果：

安装create-react-application

npm i -D create-react-application

或者

npm i -g create-react-application

使用create-react-application

create-react-application <project-name>

源码已经上传到了GitHub，欢迎大家一起哈啤（#手动滑稽）。

此外文中还有许多不足，比如关于npm link的解释我也还不是很清楚，欢迎大家补充指教！

五、参考文章