Babel：下一代Javascript语法编译器
<h2 id="定义">定义</h2><p>Babel是一个Javascript的编译器，通过它你可以将一些新版本的ECMAScript语法转换成低版本的语法。以便能够在低版本的浏览器或者其它环境平稳运行。</p>
<p>截至目前笔者写这篇文章的时候，babel的版本是7.10.0</p>
<h2 id="实践">实践</h2>
<h3 id="第一步创建项目">第一步：创建项目</h3>
<p><code>mkdir babel-study && cd babel-study</code></p>
<h3 id="第二步初始化项目并安装相关依赖包">第二步：初始化项目，并安装相关依赖包</h3>
<p><code>npm init -y</code></p>
<p><code>npm i @babel/cli @babel/core @babel/preset-env --save-dev</code></p>
<p><strong>相关依赖包说明：</strong></p>
<p>@babel/cli: hello，你好，我是脚手架工具，我可以通过一些命令将源文件编译成目标代码。</p>
<p>@babel/core: hello，你好，我是一个代码分析选手，我负责将代码分析称ast，方便其他插件进行相关处理。</p>
<p>@babel/preset-env: hello，你好，我是一个语法转义器，我负责的内容是将JS的相关语法进行编译，关于转义新增的API和全局对象这个我不负责的。</p>
<h3 id="第三步配置babelrc">第三步：配置.babelrc</h3>
<p>楼下这几位就是常用的babel配置参数了，这里做简要介绍</p>
<h4 id="presets预设">presets(预设)</h4>
<p>早期的版本其实是引入类似<code>babel-preset-x</code>,这种形式的包，现在官方推荐统一用<code>@babel/preset-env</code>,这个包来做语法转义器这部分的工作。</p>
<h4 id="plugins插件">plugins(插件)</h4>
<p>弥补babel本身上的功能不足，比如转义新增的API和全局对象可能就需要用到一些新的插件来做这部分工作，我们称之为补丁转义器。</p>
<h4 id="ignore忽略">ignore(忽略)</h4>
<p>把不需要babel编译的文件写配置到这个参数里面，是一个数组的形式。</p>
<h4 id="minified压缩">minified（压缩）</h4>
<p>Boolean类型的，将其设置为true后，编译后的文件会被压缩。</p>
<h4 id="comments注释">comments(注释)</h4>
<p>Boolean类型的，将其设置为true后，编译后的文件会有注释（你项目开发中写的注释）。</p>
<h4 id="env环境变量">env(环境变量)</h4>
<p>babel运行的环境变量，如果设置了<code>BABEL_ENV</code>则使用它，如果没有设置，它会去找有没有<code>NODE_ENV</code>，如果还是没有，那就是走默认<code>development</code>。</p>
<p>这里附上一份我调研后的配置文件</p>
<pre><code>{
"presets": [[
"@babel/preset-env", {
// "modules": false,
"corejs": "3",
"useBuiltIns": "usage",
"targets": {
"node": "4"
// "browsers": ["last 2 versions"]
}
}
]],
"plugins": ["@babel/plugin-transform-runtime"],
"env": {
"test": {
"presets": [[
"@babel/preset-env", {
"modules": false,
"targets": {
"node": "current",
// "chrome": "83",
// "edge": "17",
// "firefox": "68",
// "ie": "11",
// "ios": "11.3",
// "safari": "5.1",
// "samsung": "9.2",
"browsers": ["last 2 versions"]
}
}
]],
"minified": true,
"comments": true,
"ignore": ["./src/test.js"]
},
"development": {
"presets": [[
"@babel/preset-env", {
"targets": {
"browsers": ["last 2 versions", "safari 7"]
}
}
]]
},
"production": {
"presets": [[
"@babel/preset-env", {
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}
]],
"plugins": ["@babel/runtime"],
"minified": true,
"comments": true
}
}
}
</code></pre>
<p>这里简要说明下，modules默认为true的，在node的环境下（支持COMMONJS），如果使用ES Module的语法（import、export），然后将其设置为false，你会发现入口文件没有被编译，所有这里把它去掉了。然后targets下面你可以单独设置相关环境的支持版本，browsers的优先级高于其他的。babel7.4.0以后，废弃了polyfill，需要单独安装core-js</p>
<h3 id="第四步编写相关测试代码">第四步：编写相关测试代码</h3>
<p>这里我们测试下ES Module写法，然后一些新的API的转义情况,比如数组的include，箭头函数、模板字符串、Promise等，这里我们不考虑相关的写法是不是冗余，单纯地就是为了测试下编译效果。</p>
<p><code>animal.js</code></p>
<pre><code>class Animal {
constructor(name) {
this.name = name;
}
eat() {
console.log(`${this.name} is eating!`);
}
}
export default Animal;
</code></pre>
<p><code>person.js</code></p>
<pre><code>import Animal from './animal';
class Person extends Animal {
constructor(name, sex) {
super(name);
this.name = name;
this.sex = sex;
this.sexMap = new Map([, ]);
}
sing() {
console.log(`${this.name} is singing!`);
}
getSex() {
if (!.includes(this.sex)) {
return false;
} else {
return this.sexMap.get(this.sex);
}
}
testArr(arr) {
return arr.map(item => item * 2);
}
testPromise() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(2020);
}, 2000);
});
}
}
export default Person;
</code></pre>
<p><code>index.js</code></p>
<pre><code>import Person from './person';
// 我就是试试
let ataola = new Person('ataola', 1);
ataola.eat();
ataola.sing();
const sex = ataola.getSex();
console.log(sex);
let testArr = ataola.testArr();
console.log(testArr);
ataola.testPromise().then(res => {
console.log(res);
});
</code></pre>
<h3 id="第五步babel-cli的使用">第五步：babel-cli的使用</h3>
<h4 id="编译项目文件">编译项目文件</h4>
<pre><code># 单纯执行, 它会在控制台打出编译后的信息
babel index.js
# 完整写法
babel index.js --out-file bundle.js
# 简写形式
babel index.js -o bundle.js
</code></pre>
<h4 id="编译项目文件夹">编译项目文件夹</h4>
<pre><code># 完整写法
babel src -out-dir dist
# 简写形式
babel src -d dist
# 生成sourc map文件
babel src -d dist -s
</code></pre>
<h4 id="babel-node">babel-node</h4>
<p>babel-cli天然自带了一个babel-node的命令，拆分一下也就是babel + node，提供了一个支持ES6的REPL环境，你可以这么玩。</p>
<pre><code># 直接进到这个环境
babel-node
# 直接执行这个文件的代码
babel-node index.js
</code></pre>
<p>最后附上我的测试脚本</p>
<pre><code> ...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build:dir": "babel src -d dist",
"build:dir:prod": "cross-env BABEL_ENV=production babel src -d dist",
"build:dir:dev": "cross-env BABEL_ENV=development babel src -d dist",
"build:dir:test": "cross-env BABEL_ENV=test babel src -d dist",
"build:dir:s": "babel src -d dist -s",
"build:file": "babel ./test/babel_core.test.js -o bundle.js"
},
...
</code></pre>
<p><strong>项目地址：</strong> https://github.com/ataola/JavaScript-Tsukuki/tree/master/code/babel-study</p>
<h2 id="问题思考">问题思考</h2>
<h3 id="在项目中使用babel它的作用是什么或者这么说它的意义何在">在项目中使用Babel，它的作用是什么？或者这么说它的意义何在？</h3>
<p>将高版本的JS语法转换成低版本的JS语法，可兼容不同版本的浏览器或者运行环境，划重点，解决了代码在不同版本的浏览器的兼容性问题。人的脑容量都是有限的，兼容的事情就愉快地交给它吧。</p>
<h3 id="使用babel后把源代码编译成更复杂更难懂一坨坨的东西我为什么要去用它">使用Babel后，把源代码编译成更复杂更难懂一坨坨的东西，我为什么要去用它？</h3>
<p>首先，这绝对不是为了装逼，也不是为了混淆代码。我们先思考下使用高版本的语法它有什么用？有一些其实是低版本的语法糖，使用了这些我们可以减少代码量，然后减轻维护成本。但是ECMAScript它是一个语法标准，不同的JS引擎以及浏览器对它的实现和支持又不大一样，所有我们不能够保证使用高版本的语法它能够完美在各平台运行，这也就是babel的作用体现。</p>
<h3 id="es的语法有那么多版本babel的配置有那么多个版本我该怎么去选择呢">ES的语法有那么多版本，Babel的配置有那么多个版本，我该怎么去选择呢？</h3>
<p>早期地预设有babel-preset-es2015、babel-preset-stage-x之类的啥的，现在官方推荐统一@babel/preset-env,脚手架统一@babel/cli,对，不成文地规定就是@babel打头基本是对的，polyfill除外。</p>
<h3 id="babelxxx和-babel-xxx的为什么会有两种该用哪个">@babel/xxx和 babel-xxx的，为什么会有两种，该用哪个？</h3>
<p>先说结论，用前者@babel/xxx,@xxx就相当于注册了一个命名空间，特指这个是xxx下的某包，它是一个范围，是一种组织的体现形式，例如@ataola/zjt,</p>
<h3 id="babelrc文件我不写行不行能运行吗">.babelrc文件我不写行不行，能运行吗？</h3>
<p>如果只是创建一个.babelrc里面什么都不写，会报错，因为babel会读取里面的格式，加个<code>{}</code>，这个是可以运行的，里面什么都不写。这里思考下babel的默认行为是什么？只是转换了Javascript的语法，而不对新的API进行转换，新的还是要用插件的。</p>
<h3 id="什么是语法转义器什么是补丁转义器">什么是语法转义器，什么是补丁转义器？</h3>
<p>在presets里的形如@babel/preset-env就是语法转义器，在plugins下的插件包就是补丁转义器，它们的分工不同，前者是将相关语法进行编译，后者弥补了前者的一些不足，故称之为补丁。</p>
<h3 id="targets里设置browsers的优先级高还是直接设置浏览器的优先级高">targets里设置browsers的优先级高，还是直接设置浏览器的优先级高？</h3>
<p>设置browsers的优先级高于直接设置浏览器的，会覆盖后者。</p>
<h3 id="为什么将modules设置成false是否还有其他设置方案">为什么将modules设置成false，是否还有其他设置方案？</h3>
<p>说明其默认为true，默认都是支持commonjs规范的。还可以设置成amd、umd之类的。</p>
<h3 id="transform-runtime解决了一个什么问题">transform-runtime解决了一个什么问题？</h3>
<p>解决了es6语法中全局对象或者全局对象方法编译不足的情况。</p>
<h3 id="既然transform-runtime只是解决es6那我要是用es7es8es9甚至更高怎么办呢">既然transform-runtime只是解决es6，那我要是用es7、es8、es9甚至更高怎么办呢？</h3>
<p><s>babel-polyfill</s> , core-js、regenerator-runtime</p>
<h3 id="为什么不推荐全局安装脚手架">为什么不推荐全局安装脚手架？</h3>
<p>版本更新迭代太快了，安装在项目本地易升级。</p>
<h3 id="babel_env或者node_env的设置方式">BABEL_ENV或者NODE_ENV的设置方式</h3>
<pre><code># osx|linux
export NODE_ENV=production
#window
SET NODE_ENV=production
</code></pre>
<h3 id="babel的默认行为是什么">Babel的默认行为是什么？</h3>
<p>转换了形如let、箭头函数之类的语法， 如果要完全的ES6语法支持需要安装plugin-transform-runtime插件，如果需要更高版本的话，那就需要安装polyfill插件。</p>
<h2 id="参考文献">参考文献</h2>
<p>babel官网：https://babeljs.io/</p>
<p>@babel/preset-env文档：https://babeljs.io/docs/en/babel-preset-env/</p>
<p>@babel/plugin-transform-runtime:https://babeljs.io/docs/en/next/babel-plugin-transform-runtime.html</p>
<p>@babel/cli文档：https://babeljs.io/docs/en/babel-cli</p>
<p>babel配置文件：https://babeljs.io/docs/en/config-files#file-relative-configuration</p>
<p>babel环境变量配置：https://babeljs.io/docs/en/options#envname</p>
<p>@xxx npm包的解释 About Scope: https://docs.npmjs.com/about-scopes</p>
<p><img alt="知识共享许可协议" style="border-width: 0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png"><br>本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。</p>
</div>
<div id="MySignature" role="contentinfo">
<img alt="知识共享许可协议" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /><br />本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。<br><br>
来源：https://www.cnblogs.com/cnroadbridge/p/13311360.html
頁:
[1]