标签：es6 es5 babel loader webpack preset env js

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

标签：es6,es5,babel,loader,webpack,preset,env,js
来源： https://www.cnblogs.com/sunhang32/p/12234596.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。