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

Posted 2021-01-19 xuanmanstein

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

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

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

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

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

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

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

 

具体过程：

安装browserify用-g全局安装，保证在cmd下能运行

npm install [email protected] -g

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

只打包1个js脚本

就是直接包含

window.onload = function() {
}

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

script里这样加一个命令：

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

打包到bundle.js

这样html里直接

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

就可以了。