前端构建系统-《node.js实战》

遇到害怕的事情，装作无所畏惧，之后会越来越勇敢~

4.2 用npm运行脚本

—

node有npm，npm能运行脚本。在package.json文件中，scripts 属性可以指定npm 的命令：

{
  ...
  "scripts":{
    "start":"node server.js"
  }
  ...
}

在package.json文件中配置了之后就能使用npm run start 或者npm start 执行命令了。

4.2.1 创建定制的npm脚本

—

npm run 命令等同于npm run-scripts，用npm run script-name

可以运行任何脚本。

比如用Babel和uglify构建客户端脚本的命令：

{
  "name": "node-demo-20190626",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "babel": "./node_modules/.bin/babel browser.js -d build/",
    "uglify": "./node_modules/.bin/uglifyjs build/browser.js -o build/browser.js",
    "build": "npm run babel && npm run uglify"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "uglify-es": "^3.3.9"
  }
}

解释：

1. "babel": "./node_modules/.bin/babel browser.js -d build/",

用./node_modules/.bin/babel调用babel，编译broswer.js生成broswer.js存放在build目录下。

2. "uglify": "./node_modules/.bin/uglifyjs build/browser.js -o build/browser.js",调用uglifyjs

3. "build": "npm run babel && npm run uglify" 组合babel和uglify。

4.2 配置前端构建工具

—

在使用npm脚本时，通常有三种配置前端构建前端工具的方法。

• 指定命令行参数 ：./node_modules/.bin/ uglify --source-map,
• 针对项目创建配置文件，将参数放在这个文件里
• 将配置参数添加到package.json中

如果构建复杂，可以创建一个shell脚本，然后用 npm 脚本调用它。如果用js，不妨试试 Gulp。

4.3 用gulp实现自动化

—

创建一个使用gulp的react 项目：

• npm i -global gulp-cli //全局安装gulp 命令行工具
• mkdir gulp-example //创建目录
• cd gulp-example/ // 进入目录
• npm init -y // 初始化package.json
• npm i --save-dev gulp //安装开发过程的gulp依赖
• touch fulpfile.js //创建fulpfile.js 文件
• npm i --save-dev gulp-sourcemaps gulp-babel babel-preset-es2015
• npm i --save-dev gulp-concat react react-dom babel-preset-react

如果想卸载插件则：npm uninstall --save-dev 把他们从node_modules里删除，同时更新package.json。npm i --save-dev gulp-concat react react-dom babel-preset-reactnpm i --save-dev gulp-concat react react-dom babel-preset-reacttouch gulpfile.js

Gulp任务的创建和运行

—

创建Gulp任务需要在gulpfile.js编写Node代码，调用Gulp的API。下面举个例子，用gulp.src查找jsx文件，用babel处理ES2015和React，然后把文件拼到一起。

const gulp = require('gulp');
// 像加载标准Node模块那样加载Gulp插件
const sourcemap = require('gulp-sourcemaps');
const babel = require('gulp-babel');
const concat = require('gulp-concat');

gulp.task('default',()=>{
    // 首先是用文件聚集找到所有的输入文件
    // 用Gulp自带的工具gulp.src查找所有的react jsx文件
    return gulp.src('app/*.jsx')
    // 为客户端调试采集源码映射指标
    //开始构建源文件，为调试构建源码映射
    .pipe(sourcemap.init())
    .pipe(babel({
        // 使用ES2015和React配置gulp-babel
        presets:['es2015','react']
    }))
    // 把所有源码文件拼到all.js中
    .pipe(concat('all.js'))
    // 单独写入源码映射文件
    .pipe(sourcemap.write('.'))
    // 将所有文件放到dist/目录下
    .pipe(gulp.dest('dist'))
})

以上代码出现了几个用来捕获、处理和写文件的Gulp插件。注意：源码映射需要两步：一个是声明想要源码映射，另一个是写源码映射文件。

在终端输入gulp就可以运行这个这个Gulp任务了。

一个好用的热重载工具：gulp-watch。。。监控文件系统的变化。

安装：

npm i --save-dev gulp-watch

配置代码如下：

const watch = require('gulp-watch');
......
gulp.task('watch',()=>{
  watch('aap/**.jsx',()=> gulp.start('default'))
}）

以上这段代码，定义了一个名为watch的任务，监控app/**.jsx文件的变化，，如果有变化就会执行名为default的任务。

如果是大型项目，需要很多的gulp任务，可以把一个个任务拆分成一个个文件，最后引用到fulpfile.js文件中，组合在一起。。

然鹅，然鹅，gulp相比于webpcak来说，是一个通用的项目自动化工具。尽管可以构建客户端资产，但是不如专门做这件事的工具：webpcak。webpack专注于打包javascript和css模块。。

用Webpack构建web程序

—

打包器与插件：

webpack插件：用来改变构建过程的行为的。

webpack加载器：是函数，负责将输入的源文本转换成特定的文本输出。既可以同步，又可以异步。

如需转换react代码、coffeeScript、sass或其他转译语言，就用加载器。如果需要调整Javascript，或用其他方式处理文件，就用插件。。

完成上面例子的webpack配置例子：

const path = require('path');
const webpack = require('webpack');

module.exports = {
    // 定义一个文件加载程序的主文件
    entry :'./app/index.jsx',
    // 输出文件，如果没有这个文件webpcak会创建
    output : {path: __dirname,filename:'dist/bundle.js'},
    module : {
        // 定义一个加载器
        loaders : [
            {
                // 用test把他关联到一个聚集搜索上
                test: /.jsx?$/,
                // 设定加载器的选项 
                loader : 'babel-loader',
                exclude :'/node_modules/',
                query :{
                    prsets :['es2015','react']
                }
            }
        ]
    }
}

Webpack和CommonJS

在webpack中使用commonJS模块不需要任何配置。比如说有个文件用了require：

const hello = require('./hello');
hello()

而另一个定义了hello函数：

module.exports = function(){
  return 'hello';
}

然后只需要一个webpack配置文件来定义入口和构建目标路径：

const path = require('path')
const webpack = requie('webpack');
module.export = {
  entry:'./app/index.js',
  output : {path:__dirname ,filename:'dist/bundle.js'}
}

打开dist/bundle.js，应该可以看到webpcakBootstrap垫片，然后从源文件结构中过来的每个文件都被封存在了闭包内模拟模块系统中。

function(module, exports, __webpack_require__){
  const hello = __webpack_require__(1);
  hello();
},
function(module, exports){
  module.exports = function(){
    return 'hello';
  }
}

在webpack中使用npm包,例子：

- 安装：npm i --save-dev jquery

- 引用

const jquery = require('jquery');

yes，正如你看到的，Webpack把CommonJS模块给了我们，无需任何额外的配置，就可以使用来自npm的模块。。

?‍?总结：

• npm脚本是实现简单任务自动化和脚本调用的最佳选择
• Gulp可以用js编写更加复杂的任务，并且他是跨平台的
• 如gulpfile太长可以把代码分解到多个文件中
• webpack可以用来生成客户端打包文件
• 如果只需要构建客户端打包文件，webpack比gulp更省事

愿我们有能力不向生活缴械投降---Lin