本文章来源于:https://blog.csdn.net/weixin_41046961/article/details/87908962
前言
之前一直想要系统的学习一下Babel的使用规则,看过阮一峰老师的《Babel基础入门》,无奈此教程是2016年出的,而Babel 7都已经出来啦,于是,在搜集了各种资料后,关于如何快速上手Babel,我大概精简了以下步骤,如有错误,希望大家能指出来,谢谢!
使用指南
1.使用手册——Babel官网(最好看着官网提示的步骤一点一点来)
2.配置环境——创建项目文件babel-demo,进入项目后 git bash,然后输入 npm init -y,然后项目文件就会出现配置文件:package.json
3.下载相应的包
npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill
或者简写:
npm install -D @babel/core @babel/cli @babel/preset-env
npm install @babel/polyfill
(--save-dev(简写-D)表示该版本只适用于开发环境中,命令会自动帮你写在package.json的devDependencies中
--save(或者不写)则表示该版本适用于生产环境中,命令会自动帮你写在package.json的dependencies中 )
注释:先解释一下使用Babel前要下载的包的意义和用法
如下。
1). @babel/cli是一个允许你从终端使用 babel 的工具。即用于命令行转码
基本用法如下。
# 转码结果输出到标准输出
$ babel example.js
# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js
# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel src -d lib
# -s 参数生成source map文件
$ babel src -d lib -s
2). Babel 的核心功能在 @babel/core模块,如果某些代码需要调用Babel的API进行转码,则就需要此模块。
用法如下
var babel = require('@babel/core');
// 字符串转码
babel.transform('code();', options);
// => { code, map, ast }
// 文件转码(异步)
babel.transformFile('filename.js', options, function(err, result) {
result; // => { code, map, ast }
});
// 文件转码(同步)
babel.transformFileSync('filename.js', options);
// => { code, map, ast }
// Babel AST转码
babel.transformFromAst(ast, code, options);
// => { code, map, ast }
例子如下。
在src目录文件新建一个core.js文件,输入如下
var es6Code = 'let x = n => n + 1';
var envCode = require('@babel/core')
.transform(es6Code, {
presets: ["@babel/env"]
})
.code;
console.log(envCode);
之后在bash中输入
$ npx babel src -d dist
//npx如果不懂请自行上网搜寻
编译成功,你会在目录里看到dist,里面有已经编译好的core.js文件,如下
"use strict";
var es6Code = 'let x = n => n + 1';
var envCode = require('@babel/core').transform(es6Code, {
presets: ["@babel/env"]
}).code;
console.log(envCode);
如果想看envCode的结果,也可以在bash中输入
$ node src/core.js
3). @babel/polyfill 模块包括core-js和自定义regenerator runtime 来模拟完整的 ES2015+ 环境。
Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。
举例来说,ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行,必须使用babel-polyfill,为当前环境提供一个垫片。
4). @babel/preset-env 根据你需要支持的环境(配合targets中的浏览器信息)自动决定适合你的 Babel 插件
4.使用以下内容在项目的根目录中创建名为 babel.config.js 的配置文件:(配置文件很重要)
module.exports = function(api){
api.cache(true)
const presets = [
["@babel/env", {
targets: {
ie:"10",
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1"
},
useBuiltIns: "usage"
}]
];
const plugins = [];
return {
presets,
plugins
}
}
//target表示你想要支持的浏览器的最低型号
// useBuiltIns: "usage" ——由于polyfill包很臃肿,Babel 的此设置将检查你的所有代码,以查找目标环境中缺少的功能,并仅包含所需的 polyfill。
5.开始使用!! 创建src文件夹,再在里面创建index.js文件,并输入
(x => x * 2)(1)
并在bash里继续输出入
$ npx babel src -d dist
//npx如果不懂请自行上网搜寻
如果觉得每次都要输入 npx babel src -d dist 太长,也可以 改写package.json文件,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build:auto":"npx babel src -d dist"
},
之后只需要在bash中输入
$ npm run build:auto
结果如下,顺利编译成功了
"use strict";
(function (x) {
return x * 2;
})(1);
6.配置的其他方法
以上方法是用了babel.config.js来配置Babel
即
babel.config.js
babel.config.js在项目的根目录中创建一个使用以下内容调用的文件。
module.exports = function (api) {
api.cache(true);
const presets = [ ... ];
const plugins = [ ... ];
return {
presets,
plugins
};
}
查看babel.config.js文档以查看更多配置选项。
官网还有几种方法来配置
I. .babelrc
{
"presets": [...],
"plugins": [...]
}
.babelrc在项目中创建一个使用以下内容调用的文件。
II. package.json
或者,您可以选择使用密钥.babelrc从内部指定配置,如下所示:package.json babel
{
"name": "my-package",
"version": "1.0.0",
"babel": {
"presets": [ ... ],
"plugins": [ ... ],
}
}
III. .babelrc.js
配置.babelrc与之相同,但您可以使用JavaScript编写它。
const presets = [ ... ];
const plugins = [ ... ];
module.exports = { presets, plugins };
你可以访问任何Node.js API,例如基于流程环境的动态配置 :
const presets = [ ... ];
const plugins = [ ... ];
if (process.env["ENV"] === "prod") {
plugins.push(...);
}
module.exports = { presets, plugins };
IV. 使用CLI(@babel/cli)
这里如果你明确知道自己需要的插件,如箭头函数,那么可以在bash先下载
npm install --save-dev @babel/plugin-transform-arrow-functions
然后接着输入
babel --plugins @babel/plugin-transform-arrow-functions src -d dist
即可
V. 使用API(@babel/core)
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-transform-arrow-functions"]
});
好的,大概就是这样啦,如果有任何问题可以在评论区指出,谢谢大家!
————————————————
版权声明:本文为CSDN博主「理智lili」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_41046961/article/details/87908962