在浏览器端用es6，babel+browserify打包

写得最清楚的是这个系列：

一个普通的写网页的人如何过渡到ES6 (一)

感觉比babel官网写得还清楚点。

看完这个才有点理解node原来不只是用来起express后端web server，更主要用途是作为开发时，用npm作为js语言的包管理器，然后打包，管理浏览器端<script>字段的js。有了npm+打包工具：写程序时

按包、模块，文件夹，单元测试这样写，然后打包成1个文件，供浏览器下载运行。

而不是在html手写一堆<script></script>，还要考虑先后顺序。一点点点击测试。

加上使用了es6，js也终于越来越工程化了，规避了以前大量的毒瘤和糟粕，提升了效率和正确性。

 

具体过程：

安装babelify browserify

npm i babelify browserify@10 -g

其他babel安装项一律--save-dev

只打包1个js脚本

就是直接包含

window.onload = function() {
}

的那个，只不过，现在可以在这个里面import了（es6）

打包到bundle.js

这样html里的script里

<script type="text/javascript" src="/static/bundle.js"></script>

就可以了。

 

打包方式：

方法1

在package.json的script里加一个命令：

"build_browser_dev": "browserify ./src/page.js -o ./static/bundle.js -t [ babelify --presets[env]]"

方法2

 把打包过程写成脚本。./src/do_bundle.js

 

const fs = require("fs");
const browserify = require('browserify');

//--------读yaml配置文件------------
const yaml = require('js-yaml');
const argv = require('yargs').argv;
console.log('argv', argv);
const config = yaml.safeLoad(fs.readFileSync(argv.config, { encoding: 'utf8', flag: "r" }));
console.log('yaml config', config);

//"browserify ./src/client.js -o ./static/bundle.js -t [ babelify --presets[env]]"
browserify('./src/client.js')
  .transform('babelify',{presets: ["@babel/preset-env"]})
  .bundle()
  .pipe(fs.createWriteStream(`${config['PATH_OUTPUT']}/bundle.js`));

这样，可以接受配置文件，然后在package.json里，简短多了：

  "scripts": {
    "build_browser": "node ./src/do_bundle.js --config=./cfg.yml",
    "test": "echo \"Error: no test specified\" && exit 1"
  },