跳到主要内容

webpack babel 的基本使用

处理 ES6 语法​

我们先用 ES6 写一些代码

const name = 'Alan';
const list = [1, 8, 4, 6];

const resultList = list.filter(item => item > 5);

new Promise(() => {
  console.log('666');
});

console.log(resultList);

npm run build打包看一下 chrome 效果

image-20200520142019038

奈何这个世界上还有 IE 这种东西 😣，IE 上看一下效果

image-20200520142207197

可以看一下报错的地方：

eval(
  "const name = 'Alan';\r\nconst list = [1, 8, 4, 6];\r\n\r\nconst resultList = list.filter(item => item > 5);\r\n\r\nnew Promise(() => {\r\n  console.log('666');\r\n})\r\n\r\nconsole.log(resultList);\r\n\n\n//# sourceURL=webpack:///./src/index.js?"
);

看来 IE 是识别不了 ES6 语法的，那我们这里就要借助 babel 处理了。

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

@babel/preset-env把 ES6 转化为 ES5

@babel/corebabel 核心内容

配置 webpack

{
  test: /\.js$/,
  exclude: /node_modules/, // 不对node_modules下的js文件处理
  loader: 'babel-loader',
  options: {
    presets: ['@babel/preset-env']
  }
},

再打包看一看

image-20200520143428061

打包后的 index.js 文件

var name = 'Alan';
var list = [1, 8, 4, 6];
var resultList = list.filter(function (item) {
  return item > 5;
});
new Promise(function () {
  console.log('666');
});
console.log(resultList);

虽然处理了一些 ES6 语法（箭头函数，const），但是像 filter 和 Promise 还是没有处理的。

这里就要使用@babel-polyfill，它会模拟一个 ES5 环境

npm install --save @babel/polyfill

安装后在文件开头引入就可以了

import '@babel/polyfill';

const name = 'Alan';
const list = [1, 8, 4, 6];

const resultList = list.filter(item => item > 5);

new Promise(() => {
  console.log('666');
});

console.log(resultList);

再次打包运行

image-20200520144125415

虽然效果完成了，但是对比一下没使用@babel/polyfill 和使用了@babel/polyfill打包后的大小 😮

image-20200520144511050

就引入了一个@babel-polyfill，体积就增加了这么多？

其实是因为@babel-polyfill模拟了所有的 ES5 环境，而我们这里只使用了 Promise 和 filter，所以我们可以通过配置useBuiltIns让它只模拟我们使用到的。

配置了useBuiltIns后，它是会自动帮我们引入@babel/polyfill所以这里我们无需再引入。

{
  test: /\.js$/,
  exclude: /node_modules/, // 不对node_modules下的js文件处理
  loader: 'babel-loader',
  options: {
    presets: [['@babel/preset-env', {
      useBuiltIns: 'usage'
    }]]
  }
},
main.js   68.6 KiB    main  [emitted]  main

再看一下打包后的文件小了很多有没有？

babel 的配置是可以单独放在.babelrc文件中的，直接将 options 中的内容放到.babelrc 目录下即可

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage"
      }
    ]
  ]
}

使用@babel/preset-react 打包 React 文件​

npm install --save-dev @babel/preset-react
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage"
      }
    ],
    "@babel/preset-react"
  ]
}

这里有一点需要注意一下，presets 顺序是从后往前的，和 css-loader 一样，也就是 js 文件是先被@babel/preset-react处理的再被@babel/preset-env处理的。

总结使用的 babel​

@babel/preset-react处理 react 的 jsx 语法

@babel-polyfill处理低版本浏览器无法处理的语法，类似 Promise、Array.from、Object.assign

@babel/preset-env把 ES6 转化为 ES5

@babel/corebabel 核心内容

useBuiltIns:usage按需引入

信息

更多配置参考babel 官网