Babel 安装方法

发布时间：2023-04-12 08:54:52 所属栏目：教程来源：

导读：局部安装 Babel
局部安装的默认路径为 ./node_modules/.bin/babel。

进入项目：

cd xxx
初始化，生成 package.json 文件（遇到需要填写的问题直接回车）：

npm init
安装所需的包（Babel 7）：

npm i

局部安装 Babel
局部安装的默认路径为 ./node_modules/.bin/babel。

进入项目：

cd xxx
初始化，生成 package.json 文件（遇到需要填写的问题直接回车）：

npm init
安装所需的包（Babel 7）：

npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill
可以用以下命令查询所安装的版本号：

./node_modules/.bin/babel -V
模块释义
@babel/core：Babel 的核心库，包含 Babel 的核心功能

@babel/cli：命令行工具，使用它从终端运行 Babel

@babel/env preset：一组预设的插件组，只对我们所使用的并且目标浏览器中缺失的功能进行代码转换和加载 polyfill

@babel/polyfill：用来模拟所有新的 JavaScript 功能

配置及使用
在项目的根目录下创建一个命名为 babel.config.js 的配置文件，其内容为

const presets = [
[
"@babel/env",
{
targets: {
edge: "17", firefox: "60", chrome: "67", safari: "11.1",
},
useBuiltIns: "usage",
},
],
];

module.exports = { presets };
以上是直接指定支持的浏览器版本号，支持多种配置方式，可自行调整。

将 js 目录下的所有代码编译到 dist 目录：

./node_modules/.bin/babel js --out-dir dist
由于我们配置了 useBuiltIns: usage，所以执行编译时会出现警告，根据提示再安装配置一下 core-js：

安装 core-js 2：

npm install --save core-js@2
修改 babel.config.js 配置文件：

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

module.exports = { presets };
这时再执行编译命令，警告就会消除。

也可以用 watch 选项开启自动编译（需要一直开启），js 文件一旦发生变动就会同步更新到 dist 目录：

./node_modules/.bin/babel js --out-dir dist --watch
./node_modules/.bin/babel 命令也可以用 npx babel 来代替（npm@5.2.0 所自带的 npm 包运行器，它会自动寻找 babel 的局部安装路径）。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!