webpack入门学习笔记07 —— 关于babel的一些补充

1. 写在前面

在以前的一篇博客中：使用babel打包编译js文件 ，简单介绍了若是在webpack中使用babel对高级JS语法进行转换，以方便浏览器可以识别。

可是babel的相关知识不少，不能面面俱到所有讲解，只能将咱们项目中常常使用的一些插件或者配置介绍一下。个人目的是抛砖引玉，更多知识你们仍是到babel官网学习：babeljs.io/ 。

这篇博客中，根据个人学习，对babel作一些补充。随着本身学习的深刻，我也会时常跟新这篇博客，完善babel相关的知识点。这篇博客的主要内容以下：

• @babel/plugin-transform-runtime、@babel/runtime 插件的介绍

2. @babel/plugin-transform-runtime、@babel/runtime插件

首先说一下这两款插件的使用场景，在以前的博客中提到过：babel默认配置的转化能力有限，只能将部分ES6语法转换成ES6语法，若是想要将更高级的ES6语法或者ES7等语法转成低级语法，须要进行额外的配置。

熟悉ES6语法的程序员确定了解ES6语法中的 Generator 函数 和 Promise 对象 ，而且在项目中也会使用到这些高级语法。好比如下语法：

function * generator() {
    yield 1;
}

console.log(generator().next(() => {
    console.log('generator 执行完毕');
}));
复制代码

那么问题来了，当你打包编译项目以后，在浏览器端运行的时候，会发现控制台报错了：

这是由于babel的默认配置不支持转换这些高级语法，若是须要达到这个目的，就须要安装配置额外的插件，也就是咱们如今提到的**@babel/plugin-transform-runtime、@babel/runtime** 插件。下面说一下如何安装配置：

首先安装 @babel/plugin-transform-runtime ，这是一个开发依赖，打包以后不须要这个包，因此执行下面的命令进行安装：

yarn add @babel/plugin-transform-runtime -D
复制代码

而后安装 @babel/runtime ，须要说明的是，这是运行环境中所须要的依赖包，打包编译以后仍是也是须要它的，因此执行下面的命令进行安装：

yarn add @babel/runtime
复制代码

安装完成以后进行配置，配置的时候在上一篇博客配置babel的基础上进行配置便可，这里给出部分代码，具体的配置能够参考上一篇博客：使用babel打包编译js文件 。

module: {
    rules: [
        {
            test: /\.js$/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: [
                        '@babel/preset-env'     // 预设，将ES6转成ES5
                    ],
                    plugins: [
                        '@babel/plugin-proposal-class-properties',   
                        '@babel/plugin-transform-runtime'	// 配置运行时的转换插件
                    ]
                }
            },
            include: path.resolve(__dirname, 'src')  // 只转换src目录下的代码
        }
    ]
}
复制代码

进行如上配置以后，就能够顺利运行项目中的 Generator 函数 和 Promise 对象 等语法了。

这里提一句：上面配置中的 include ，表示只对 src目录 下的 .js 文件进行匹配。除此以外，还可使用 exclude 进行显示，表示匹配出这些文件夹以外的 .js 文件，支持使用正则表达式，好比：exclude: /node_modules/ 。

3. 写在后面

以上就是本篇博客的所有内容，随和后面学习的升入，博客会被时常更新，错误之处，还但愿各位大神指出。

上一篇: webpack入门学习笔记06 —— 使用babel打包编译js文件

下一篇: webpack入门学习笔记08 —— 使用ESLint检查项目代码