1.2 babel 配置
书接上文,接下来项目将引入 babel 支持 ES6+语法兼容。
Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。中文官网
babel 概念
Babel 是一个编译器(输入源码 => 输出编译后的代码)。编译过程分为三个阶段:解析、转换和打印输出。
Babel 本身不具有任何转化功能,它把转化的功能都分解到一个个 plugin 里面。因此当我们不配置任何插件时,经过 babel 的代码和输入是相同的。
插件(Plugins)
插件总共分为两种:语法插件(Syntax Plugins)和转译插件(Transform Plugins)。
转换插件用于转换你的代码。
语法插件只允许 Babel 解析(parse)特定类型的语法(而不是转换)。
转换插件会自动启用语法插件。因此,如果你已经使用了相应的转换插件,则不需要指定语法插件。 具体插件列表,详见官方文档。 Plugins
预设(Presets)
presets 可以看作一组预先设定的插件列表集合,我们可以不必再当独地一个一个地去添加我们需要的插件。
配置文件
babel 提供了 config 的方式,类似于 webpack 的 cli 方式以及 config 方式。官方文档
babel 7.X 之后,引入了babel.config.json
(支持.js, .cjs, .mjs 等文件格式);在 7.X 之前,项目都是基于.babelrc
(支持.json,.js, .cjs, .mjs 等文件格式)来进行配置。
一般babel.config.json
会放置在根目录下,在执行编译时,babel 会首先去寻找babel.config.json
文件,以此来作为整个项目的根配置。
babel.config.json 配置示例
{
"presets": ["@babel/env"],
"plugins": ["transform-vue-jsx"]
}
插件的短名称
如果插件名称的前缀为 babel-plugin-,你还可以使用它的短名称:
{
"plugins": [
"myPlugin",
"babel-plugin-myPlugin" // 两个插件实际是同一个
]
}
适用于带有冠名(scope)的插件:
{
"plugins": [
"@org/babel-plugin-name",
"@org/name" // 两个插件实际是同一个
]
}
预设的短名称
如果 preset 名称的前缀为 babel-preset-,你还可以使用它的短名称:
{
"presets": [
"myPreset",
"babel-preset-myPreset" // equivalent
]
}
适用于带有冠名(scope)的 preset:
{
"presets": [
"@org/babel-preset-name",
"@org/name" // equivalent
]
}
执行顺序
插件执行顺序在 presets 之前
插件会按照声明的插件列表顺序顺序执行(first to last)
preset 会按照声明的列表顺序逆序执行(last to first)
参考 https://www.cnblogs.com/rynxiao/p/13665506.html https://babeljs.io/docs/en/config-files
babel 安装与配置
安装所需包(package)
项目中引入 bable(babel 7.0 以后的插件与预设以@babel 为前缀)。
npm install @babel/core @babel/cli @babel/preset-env --save-dev
@babel/cli
内置的 CLI 命令行工具,可通过命令行编译文件。官方文档 @babel/core
babel 的核心,包含各个核心的 API,供 babel 插件和打包工具使用。官方文档 @babel/preset-env
是一个常用的预设(Presets), 让你能使用最新的 JavaScript 语法, 它会帮你转换成代码的目标运行环境支持的语法, 提升你的开发效率并让打包后的代码体积更小。相关参考
webpack loader 模块安装
npm install babel-loader --save-dev
JSX 语法模块安装
JSX 语法插件使用babel-plugin-syntax-jsx
,没有使用高版本的@babel/plugin-syntax-jsx
,项目运行中后者会出现 Cannot find module babel-plugin-syntax-jsx
异常。
npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx --save-dev
npm install babel-helper-vue-jsx-merge-props --save
功能验证
上述模块安装完毕后,在 test 目录下,创建一个名为babel-es6-test.js
的文件
// Babel输入:ES2015箭头函数
[1,2,3].map((n) =>n + 1);
在命令行窗口输入以下指令,编译整个test
文件夹并输出到lib
(不存在则自动创建)文件夹中
./node_modules/.bin/babel src --out-dir lib // 功能测试
成功运行后,项目 lib 目录下也会创建一个babel-es6-test.js
的文件,跟test
目录下的文件是相同的,代码没有进行转换。
Babel 本身不具有任何转化功能,不配置任何插件时,经过 babel 的代码和输入是相同的。
在根目录下创建babel.config.json
文件,配置如下:
{
"presets": ["@babel/env"],
}
再次运行指令,lib
下输出文件代码已经转换
"use strict";
// Babel输入:ES2015箭头函数
[1,2,3].map( function (n){
return n + 1;
});
项目配置
更新babel.config.json
配置
{
"presets": ["@babel/env"],
"plugins": ["transform-vue-jsx"]
}
webpack.config.js
添加一条关于babel-loader
的规则:
{
module: {
rules: [
{
test: /\.(jsx?|babel|es6)$/,
include: process.cwd(),
exclude: /node_modules/,
loader: "babel-loader",
},
];
}
}
目录examples
新增文件JSX.vue
用来测试 JSX 语法
<script>
export default {
name: "JSX",
data() {
return {};
},
render() {
return (
<div>
<h1>Bebal Init</h1>
<h2>hello, I am JSX!!</h2>
</div>
);
},
};
</script>
更新examples\App.vue
文件,引入JSX.vue
组件
<template>
<div id="app">
<img alt="Vue logo" src="./logo.png" />
<JSX></JSX>
<h1>Welcome to My Vue.js UI By WebPack!</h1>
</div>
</template>
<script>
import JSX from "./JSX.vue";
export default {
name: "App",
components: { JSX },
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
运行 npm run dev,打开浏览器,成功解析结果如下
最新目录结构
最后更新于