9.webpack的js兼容性处理

使用的loader、插件

• babel-loader Babel是一个JavaScript编译器，能够让我们放心的使用新一代JS语法。
• @babel/preset-env js基本语法转换
• @babel/core js的api进行转换
• @babel/polyfill js全部兼容性处理，不需要配置，直接引入，会有体积过大的问题
• core-js 按需进行兼容性处理

1. 根据自己的需求安装loader和插件

   npm i  babel-loader @babel/preset-env @babel/core @babel/polyfill core-js -D
   

2. 在入口文件src/index.js中添加如下内容

   //如果需要全部兼容性处理，则将下边注释打开
   //import '@babel/polyfill';
   const add = (x, y) => {
      return x + y;
   }
   console.log(add(2, 5));
   const promise = new Promise(resolve => {
      setTimeout(() => {
          console.log('定时器执行完毕');
          resolve();
      }, 1000)
   });
   
   
   console.log(promise);
   
   
   

3. webpack配置文件webpack.config.js文件

   const path = require("path");
   
   
   module.exports = {
   mode: 'development',
   entry: './src/index.js',
   output: {
   filename: 'built.js',
   path: path.resolve(__dirname, 'bulid')
   },
   module: {
   rules: [{
   test: /.js$/,
   exclude: /node_modules/, //排除node_modules中的第三方库
   loader: 'babel-loader',
   options: {
   //预设： 只是babel做怎么样的兼容性处理
   presets: [
   [
   '@babel/preset-env',
   {
   //按需加载和全部加载不能同时进行
   useBuiltIns: 'usage',
   //指定core-js版本
   corejs: {
   version: 3
   },
   //指定兼容性做到那个版本的浏览器
   targets: {
   chrome: '60', //兼容版本大于60的chrome浏览器
   firefox: '60',
   ie: '9',
   safari: '10',
   edge: '17'
   }
   }
   ]
   ]
   }
   }]
   },
   plugins: []
   }
   
   
   

4. 打包

   webpack