码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-11-11 15:03:36      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:工程   字段   rip   下载   span   env   直接   expr   web   

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

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

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

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

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

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

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

 

具体过程:

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

npm install browserify@10 -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>

就可以了。

 
 

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

标签:工程   字段   rip   下载   span   env   直接   expr   web   

原文地址:https://www.cnblogs.com/xuanmanstein/p/9941974.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!