Babel+Browserify打包代码支持浏览器

这座城
从Babel 6.0开始,不再直接提供浏览器版本,需要配合webpack等构建工具使用。如果你的项目相当简单,并不需要使用构建工具,而你又想在Web项目中使用ES6的语法,Babel+Browserify可以满足你的需求。
第一步:安装 babelify 模块

$ cnpm install -save-dev babelify babel-preset-es2015

第二步:修改package.json

在package.json中添加以下配置:

{
  "browserify": {
    "transform": [["babelify", { "presets": ["es2015"] }]]
  }
}```

#####第三步:在命令行执行转换命令
```$ browserify main.js -o bundle.js```

Browserify编译的时候,会将脚本所依赖的模块一起编译进去。因此,只需要转换web项目的入口文件。上面命令将ES6脚本main.js,转为bundle.js,浏览器直接加载后者就可以了。


-----
######如果你的项目使用的是 `require` 的方式加载模块,单独的Browserify就能满足你。

#####首先,安装Browserify
`$ npm install -g browserify`

#####将CommonJS格式的文件转换为浏览器支持的格式:
`$ browserify main.js -o bundle.js`

浏览器直接加载 `bundle.js` 就可以了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,242评论 7 35
  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 5,330评论 4 31
  • webpack 介绍 webpack 是什么 为什么引入新的打包工具 webpack 核心思想 webpack 安...
    yxsGert阅读 6,515评论 2 71
  • 上一篇介绍了Gulp,公司的React项目用的是webpack打包,抽空将webpack的知识点整理进本篇。 先简...
    张歆琳阅读 5,858评论 2 11
  • 你仍是我的软肋,却不再是我的盔甲 第四话: 第6节: 阳台上顾尘和吴寻坐在椅子上,满脸甜蜜的看着吴寻,眼里容不下其...
    郭㿟告阅读 389评论 2 1