在瀏覽器端用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"
  },