Babel+Browserify打包代碼支持瀏覽器

這座城
從Babel 6.0開始,不再直接提供瀏覽器版本,需要配合webpack等構(gòu)建工具使用。如果你的項目相當簡單,并不需要使用構(gòu)建工具,而你又想在Web項目中使用ES6的語法,Babel+Browserify可以滿足你的需求。
第一步:安裝 babelify 模塊

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

第二步:修改package.json

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

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

#####第三步:在命令行執(zhí)行轉(zhuǎn)換命令
```$ browserify main.js -o bundle.js```

Browserify編譯的時候,會將腳本所依賴的模塊一起編譯進去。因此,只需要轉(zhuǎn)換web項目的入口文件。上面命令將ES6腳本main.js,轉(zhuǎn)為bundle.js,瀏覽器直接加載后者就可以了。


-----
######如果你的項目使用的是 `require` 的方式加載模塊,單獨的Browserify就能滿足你。

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

#####將CommonJS格式的文件轉(zhuǎn)換為瀏覽器支持的格式:
`$ browserify main.js -o bundle.js`

瀏覽器直接加載 `bundle.js` 就可以了。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

  • 無意中看到zhangwnag大佬分享的webpack教程感覺受益匪淺,特此分享以備自己日后查看,也希望更多的人看到...
    小小字符閱讀 8,368評論 7 35
  • 寫在開頭 先說說為什么要寫這篇文章, 最初的原因是組里的小朋友們看了webpack文檔后, 表情都是這樣的: (摘...
    Lefter閱讀 5,442評論 4 31
  • webpack 介紹 webpack 是什么 為什么引入新的打包工具 webpack 核心思想 webpack 安...
    yxsGert閱讀 6,665評論 2 71
  • 上一篇介紹了Gulp,公司的React項目用的是webpack打包,抽空將webpack的知識點整理進本篇。 先簡...
    張歆琳閱讀 5,901評論 2 11
  • 你仍是我的軟肋,卻不再是我的盔甲 第四話: 第6節(jié): 陽臺上顧塵和吳尋坐在椅子上,滿臉甜蜜的看著吳尋,眼里容不下其...
    郭?告閱讀 436評論 2 1

友情鏈接更多精彩內(nèi)容