webpack實現es6轉es5


Webpack實現es6轉換為es5

安裝插件

npm install --save-dev babel-loader @babel/core @babel/preset-env

配置

webpack.config.js中的module的rules中,添加一條新的loader

{
   test: /\.js/, //babel轉化es6到es5
   exclude: /node_modules/,
   use: {
     loader: "babel-loader",
     options: {
       presets: [
         [
           "@babel/preset-env",
           {
             useBuiltIns: "usage",
             corejs: 2
           }
         ]
       ]
     } 
   }
 }
  • 目前就已經可以了

  • 缺點,會他會對於window的變量造成一些污染,那么我們就可以使用第二種方式

第二種方式

安裝

npm install --save-dev babel-loader @babel/core @babel/plugin-transform-runtime @babel/runtime

使用

webpack.config.js中的module的rules中添加一條如下規則

{
  test: /\.js/, //babel轉化es6到es5
  exclude: /node_modules/,
  use: {
    loader: "babel-loader",
    options: {
      // presets: [
      //   [
      //     "@babel/preset-env",
      //     {
      //       useBuiltIns: "usage",
      //       corejs: 2
      //     }
      //   ]
      // ],
      plugins: ["@babel/plugin-transform-runtime"]
    }
  }
}

這種方式也有對應的缺點,對於原型鏈上的方法不會進行轉義,所以如果你要寫一些公開庫,推薦使用這種,如果自己平常開發,很少會碰到原型鏈,那么就是用@babel/preset-env


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM