欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解webpack babel的配置

 更新時(shí)間：2018年01月09日 10:18:57   作者：饑人谷_林  
本篇文章主要介紹了詳解webpack babel的配置，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

Babel是什么

Babel是一個(gè)編譯JavaScript的平臺(tái)，它的強(qiáng)大之處表現(xiàn)在可以通過(guò)編譯幫你達(dá)到：

  1. 使用下一代的javascript（ES6，ES7,……）代碼，即使當(dāng)前瀏覽器沒(méi)有完成支持；
  2. 使用基于JavvScript進(jìn)行擴(kuò)展語(yǔ)言，比如React的JSX；

npm i babel-core babel-preset-env babel-loader babel-plugin-transform-runtime babel-preset-stage-2 -D

關(guān)于babel的使用

首先 babel-preset-es2015 已經(jīng)廢棄，你可以使用 babel-preset-env 來(lái)代替它，后者比前者更好的更方便，這里不在贅述。

babel-polyfill VS babel-runtime VS babel-plugin-transform-runtime

  1. 首先 babel-polyfill 是對(duì)所有的API進(jìn)行全局設(shè)置。并且會(huì)污染全局變量。
  2. babel-runtime 需要對(duì)你需要的API，如：Object.assign()。會(huì)先require()
  3. babel-plugin-transform-runtime 最推薦。它不需要require()也不會(huì)全局污染，并且，更厲害的是它是按需打包，全自動(dòng)。

開始

/**** webpack.config.js ****/
// 在規(guī)則中增加
{
  test: /\.js$/,
  use: 'babel-loader',
  // 只處理src目錄下面的。
  // 你也可以配置一條規(guī)則處理node_modules下面的。
  // 我記得swiper不知道哪一版本的直接把原來(lái)為編譯的es6的語(yǔ)法塞給我，導(dǎo)致瀏覽器不兼容。
  include:[resolve('../src')]
}
/**** .babelrc ****/
// presets字段設(shè)定轉(zhuǎn)碼規(guī)則
{
 "presets": [
  ["env", {
   "modules": false,
   // 需要支持的環(huán)境，可選入： chrome, edge, 也可以node:6.5 ，node:current......
   "targets": {
    "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
   }
  }],
  "stage-2"
 ],
 // babel-transform-plugin轉(zhuǎn)碼預(yù)設(shè)不起作用的內(nèi)容如：Object.assign()等等
 "plugins": ["transform-runtime"]
}

presets能夠解決哪些語(yǔ)法。 package

babel-plugin-transform-runtime能夠解決哪些語(yǔ)法。 package

其他。 更多 

最后：babel看上去好像要配置很多，其實(shí)經(jīng)過(guò)官方的一頓簡(jiǎn)化之后需要的并沒(méi)有那么繁瑣。

github

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論