vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue babel.config.js配置

Vue中babel.config.js配置示例详解

作者:孟华328

Babel是一个JS编译器,主要作用是将ECMAScript2015+ 版本的代码,转换为向后兼容的JS语法,以便能够运行在当前和旧版本的浏览器或其它环境中,下面这篇文章主要给大家介绍了关于Vue中babel.config.js配置详解的相关资料,需要的朋友可以参考下

1 概述

Babel 相当于一个中介,一边是用户,另一边是浏览器。这几年,JavaScript 发生了很大的变化,许多新特性在很多浏览器里都不支持。

Babel 的主要作用就是规避这些问题,可以确保 JavaScript 代码兼容所有的浏览器,比如 IE 11。

2 Babel 的工作原理

Babel 使用 AST 把不兼容的代码编译成 ES15 版本,因为大多数浏览器都支持这个版本的 JavaScript 代码。

2.1 如何设置?

在控制台运行如下命令:

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

应用程序的根目录会默认创建一个 babel.config.json 文件。Babel 将遍历 src 目录下的所有 JS 文件。

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
      }
    ]
  ]
}`

babel.config.json 添加到 package.json 里。

"build": "./node_modules/.bin/babel src --out-dir build"

然后,执行如下命令:

npm run build

这时,在 build 文件夹里就生成了转换代码。

2.2 @babel/core @babel/cli @babel/preset-env 到底做了哪些事情

3 插件

Babel 使用插件来执行代码转换,插件其实就是用 JavaScript 所写的程序片段。比如@babel/plugin-change-Arrow-function ,它的代码实现如下:

// From this
const fn = () => 1;

// Converted to this
var fn = function fn() {
  return 1;
};

上面提到的 @babel/preset-env 本身包含了一组插件,可以处理手动设置插件带来的很多问题,大多数情况下能够智能处理代码。

Polyfill

Polyfill 是 JavaScript 代码片段,兼容原本不支持的旧版浏览器。Polyfill 模块包括core-js和一个自定义的重生器运行时,以模拟完整的ES2015 +环境。如果要使用 PolyFill 必须运行如下命令:

// Install via 
npm install --save @babel/polyfill

// Add via
import "core-js/stable";
import "regenerator-runtime/runtime";

4 Babel 配置文件的优先级

从低到高依次为:

依照优先级,babel.config.json 会被 . babelrc 覆盖,依次类推。

5 Babel 有哪些值得注意的选项

以下面的配置为例:

{
    "presets":
    [
        [
            "@babel/env",
            {
                "targets":
                {
                    "edge": "17",
                    "firefox": "60",
                    "chrome": "67",
                    "safari": "11.1"
                },
                "useBuiltIns": "usage",
                "corejs": "3.6.5"
            }

        ]
    ],
}

如果要缩减输出代码,需要增加选项 "minified": true

如果要忽略某些文件,则添加 ignore: ["file or directory path"]

只编译特定的文件或文件夹,则添加

// For Files
"only" : ["./src/some_file.js"],
// For Directory
"only" : ["./src"],

总结

到此这篇关于Vue中babel.config.js配置的文章就介绍到这了,更多相关Vue babel.config.js配置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

阅读全文