webpack4.29.x成神之路(十一) babel编译es6

1

目录

上节: webpack-dev-server下

上节目录如下:

clipboard.png

基本用法

es6语法因为浏览器兼容性问题较多,本不能直接使用,但因为babel这种能降级es6+语法的工具,使得es6+已提前普及。先来写点es6语法。
src/index.js:

const promise = new Promise(function(resolve) {
  console.log('Promise');
  resolve();
});

promise.then(function() {
  console.log('resolved.');
});

然后npm run build, 打开ie浏览器(谷歌实在太先进鸟....):

clipboard.png

明显IE不能完全失败es6语法,所以我们就需要将es6代码降级成es5甚至更低。
修改配置webpack.config.js:

// 省略依赖
module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: '[name].js',
    path: resolve(__dirname, 'bundles')
  },

  // 开启devServer
  devServer: {},

  module: {
    rules: [{
      test: /\.(gif|jpg|jpeg|png|svg)$/,
      use: ['url-loader']
    }, {
      test: /\.less$/,
      use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
    }, {
      test: /\.js$/,

      // node_modules里的代码基本都是经过了编译的,所以忽略
      exclude: /node_modules/,
      loader: 'babel-loader'
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    }),
    new CleanWebpackPlugin()
  ]
};

根目录下新建babel.config.js:

const presets = [
  ["@babel/env"]
];

module.exports = { presets };

然后安装依赖:
npm i @babel/core @babel/preset-env babel-loader -D

重新npm run dev,刷新ie:

clipboard.png

还是不行,这是因为:

  • babel-loader只识别.js文件,
  • @babel/preset-env才是编译语法
  • preset-env只会转换语法,并不会转换API。 对于ES6的内建功能(如 Promise / Set / Map),原型链的扩展(Array / Object等)需要用垫片库(polyfill)来支持。

所以再安装:npm i @babel/polyfill -D

scr/index.js引入:

import "@babel/polyfill";
// 省略

再次npm run dev刷新ie:

clipboard.png

这样就有效果了。

babel还有非常多的配置和插件,比如:
babel.config.js:

const presets = [
  ["@babel/env", {
    // 设置打包后的代码将在哪些浏览器运行?只针它们做转化
    targets: {
      edge: "17",
      firefox: "60",
      chrome: "67",
      safari: "11.1",
    },

    // 目前@babel/polyfill依赖的core-js@2,需要指定此选项并安装
    corejs: 2,

    /*
     * @babel/polyfill会将所有高阶语法转化,配置useBuiltIns只转化项目中用到的语法
     *797k => 291k
     * 当useBuiltIns: "usage"时,入口文件就不需要import "@babel/polyfill"了
     * 当useBuiltIns: "entry"时,需要在入口文件里import "@babel/polyfill"
     * */
    useBuiltIns: "usage"
  }
  ]
];

module.exports = { presets };

本教程就不过多涉及了,最好的学习方式还是撸官网文档

下节:source-map


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

载入中...