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│└─componentsApp.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│└─componentsApp.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的解释我也还不是很清楚，欢迎大家补充指教！

五、参考文章

npm link 命令的作用浅析
prefix configuration
npm link
基于Webpack搭建React开发环境
探索 create-react-app 源码
npm 发布 packages

转载于:https://www.cnblogs.com/DM428/p/9068133.html