13. webpack4.x babel配置——babel-loader

最新推荐文章于 2024-09-08 18:55:13 发布

胖鹅68

最新推荐文章于 2024-09-08 18:55:13 发布

阅读量1.9k

点赞数 1

分类专栏： webpack、 esline 、代码规范

本文链接：https://blog.csdn.net/hbiao68/article/details/104070143

版权

webpack、 esline 、代码规范专栏收录该内容

32 篇文章

订阅专栏

文章目录

文章参考

什么是babel

Babel 是一个 JavaScript 编译器
Babel 是一个工具链，主要用于在旧的浏览器或环境中将 ECMAScript 2015+ 代码转换为向后兼容版本的 JavaScript 代码：

转换语法
Polyfill 实现目标环境中缺少的功能 (通过 @babel/polyfill)
源代码转换 (codemods)

如何安装babel

cnpm install --save-dev babel-loader @babel/core

如果需要ES6语法转换ES5还需要安装

cnpm install @babel/preset-env --save-dev
cnpm install --save babel-preset-es2015

.babelrc babel的配置文件

{ 
  "presets":["@babel/env",]
}

依赖库作用解释

babel-loader
babel-loader 只是连接webpack 与 babel 的桥梁，本身自己并不将 ES6转ES5
babel-core
babel-core是作为babel的核心存在，babel的核心api都在这个模块里面，当webpack使用babel-loader处理文档时，babel-loader实际上调用了babel-core的api
babel-preset-env
babel有几种规则都可以实现对ES6语法的转码，如babel-preset-es2015、babel-preset-es2016、babel-preset-es2017，不过官方现已建议采用babel-preset-env，为什么会这样呢？

我们首先要了解到，ES6发布在2015年，距离现在3年了，很多浏览器已经支持了很大一部分ES6语法，这些浏览器是能够识别ES6语法的，而babel-preset-es2015是将所有ES6语法全部转译为ES5，这就导致一个问题：打包文档过大。

那么babel-preset-env给我们带来什么好处呢？他能够按照我们自定义规则，让你指定一个环境且仅仅转译在那个环境中缺少的特性，怎么理解呢？假如我们只需要适配安卓7.0的移动端web浏览器，这个时候，我们只需要找到安卓7.0中不支持的语法(一小部分)，将这部分代码转译为ES5即可，就不必将所有的代码一把梭地转译为ES5，具体配置我们下面会详细说明。

babel-plugin-transform-runtime
首先babel基础包(不安装额外东西)并不是支持完整的新规范语言，当我们在项目中用到哪些新的语法，那么就会从transform-runtime来获取到他的转译源码。

Plugin/Preset files are not allowed to export objects,only functions.webpack报错/babel报错的解决办法?

在网上搜了解决办法，意思就是说 babel7 之后做了重大改变，前后不兼容的问题
babel-loader 和 babel-core 之间会有版本适配的问题

解决办法

官方给出的是两个方案

webpack 4.x + babel-loader 8.x + babel 7.x （当babel-loader 的版本是8.x的时候相匹配的 babel为7.x）

npm install -D babel-loader @babel/core @babel/preset-env webpack

webpack 4.x + babel-loader 7.x + babel 6.x （当babel-loader 的版本是7.x的时候相匹配的 babel为6.x）

npm install -D babel-loader@7 babel-core babel-preset-env webpack

快速解决办法 package.json 引用的版本号

"@babel/core": "^7.8.3",
"@babel/preset-env": "^7.8.3",
"babel-loader": "^8.0.6",
"@babel/polyfill": "^7.8.3",
"babel-preset-es2015": "^6.24.1"

.babelrc 配置文件，指明编译的目标语法

{ 
  "presets":["@babel/env",]
}

webpack.config.js 配置 babel-loader

module: {
  rules: [
    {
        test: /\.js$/,
        // 排除 node_modules 和 bower_components 下的文件
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [["@babel/preset-env",{
              // 只引用使用了新特性 polyfill
              useBuiltIns: 'usage'
            }]]
          }
        }
      },
      // { 
      //   test: /\.js$/, 
      //   exclude: /node_modules/, 
      //   loader: "babel-loader" 
      // },
  ]
}

让浏览器支持新标准的函数 polyfill

cnpm install --save @babel/polyfill

注意：在所有代码使用之前

import "@babel/polyfill";

缺点：增大了代码体积

解决办法，只引用使用了新特性函数的函数

添加 useBuiltIns: 'usage'

{
	test: /\.js$/,
	// 排除 node_modules 和 bower_components 下的文件
	exclude: /(node_modules|bower_components)/,
	use: {
	  loader: "babel-loader",
	  options: {
		presets: [["@babel/preset-env",{
		  // 只引用使用了新特性 polyfill
		  useBuiltIns: 'usage'
		}]]
	  }
	}
},