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