JS的构建

js的构建，真是让人烦死了。概念层出不穷，实现方法变化多样，而且所有这些东西，都是因为js出生的时候给他的定位，和现在js的任务完全不一样，每项工具，每个知识点，都是为了给他自身打补丁而生的。当然也可以看做是js是个能自我演进的工具。

js现在也需要进行构建，我理解就是把多个js代码合并成一个大文件，然后浏览器加载，并在客户端解释。

1,Node，npm

wiki上说Node最初发布于2009，在V8 chrome内核上封装了消息机制，异步IO等功能，可以让js在服务端运行。V8最早是在2008年发布。那个时候也是iOS，Android刚刚开始流行的时候。

1
2
3

npm init -y
npm install  <name>  // 安装一个包
npm run <command>    // 运行package.json里面的一段shell命令

Node.js文档

npm CLI

2，ES6和模块化

js的es6就是出了一大堆新语法，由浏览器支持js可以实现的新功能。本来是让工具更好用，但是明显增加了很多学习成本。

模块化，js以文件为模块，形成依赖关系，依次加载。这对于C语言来说，这是非常简单的事情，怎么到了js变得这么复杂，事情本身不复杂，但是需要若干工具配合才能完成这件事情，每个工具有一大套配置方法，使用规则。

{ xxx } from module``` 就是各个浏览器要支持的es6的语法，但是现在要转成es5，避免webapp在某些浏览器中不能运行。


#### 3，browserify

可以按照node的require的语法，把依赖的每个package打包成一个js

```shell
browserify robot.js > bundle.js    // 命令行方式

1 2	var browserify = require('browserify'); //node api方式 var bundle = browserify('./app.js').bundle()

browserify大部分被webpack代替

gulp中使用browserify

4，gulp

任务自动化的工具。通过在项目根目录的 gulpfile.js文件，执行任务

// 代码示例
gulp.task(
  'build-js',
  gulp.parallel('build-vendor-js', () => {
    return Promise.all(
      appBundleConfigs.map(config => {
        return createBundle(config);
      })
    );
  })
);

5，Babel

Babel是js编译器，可以把所有新语法特性的js转换为es5的语法。

1	./node_modules/.bin/babel src --out-dir lib #命令行方式

API方式

1
2
3

const babel = require("@babel/core");

babel.transformSync("code", optionsObject);

配置文件.babelrc

Babel文档