webpack中使用 Babel 处理 ES6 语法（1）

Babel-loader是用来将ES6语法转换为ES5语法

webpack使用babel需要下载下面两个库

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

module: {
  rules: [
  	//查找js文件			排除node_modules      使用babel-loader
    { 
    	test: /\.js$/, 
    	exclude: /node_modules/, 
    	loader: "babel-loader" 
    }
  ]
}

babel-loader只是打通webpack和babel的桥梁 不会对代码进行解析

还需要借助 @babel-preset-env翻译规则模块

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

下载后还需要进行配置

然后这块代码就变成了：

module: {
  rules: [
  	//查找js文件			排除node_modules      使用babel-loader
    { 
    	test: /\.js$/, 
    	exclude: /node_modules/, 
    	loader: "babel-loader",
    	//解析es6语法用到
    	options:{
          presets: ["@babel/preset-env"]
    	}
    }
  ]
}

在这里也仅仅是转换了一部分语法，里边有些函数仍然无法转换

所以就需要下载 @babel/polyfill，并引入在业务代码文件的顶部

而这里还有问题：就是打包后的文件空间占用会很大

解决方法：在presets的数组中再加入一个useBuiltIns的属性，值设置为“usage”（带引号）

然后这块代码就变成了：

module: {
  rules: [
  	//查找js文件			排除node_modules      使用babel-loader
    { 
    	test: /\.js$/, 
    	exclude: /node_modules/, 
    	loader: "babel-loader",
    	//解析es6语法用到
    	options:{
          presets: [["@babel/preset-env"],{
          //新增了这个属性
            useBuiltIns:"usage"
          }]
    	}
    }
  ]
}

这部分的意思就是打包是只讲有用的解析代码打包到文件是生成中；

在这里再做进一步优化

然后这块代码就变成了：

module: {
  rules: [
  	//查找js文件			排除node_modules      使用babel-loader
    { 
    	test: /\.js$/, 
    	exclude: /node_modules/, 
    	loader: "babel-loader",
    	//解析es6语法用到
    	options:{
          presets: [["@babel/preset-env"],{
          //新增了这个属性
            useBuiltIns:"usage",
           //设置chrome浏览器大于67版本的就不进行解析；因为这里chrome已经支持了ES6的语法
            targets:{
              chrome:">67"
            }
          }]
    	}
    }
  ]
}

普通的需求到这里就可以了

如果你的需求是要开发一个第三方的模块工具，那么不建议使用@babel/polyfill；因为它会污染你的全局变量

这里换成 @babel/plgin-transform-runtime

为了让文章不那么乱，我把它的配置放在了下一篇博客