巴别塔简短简要指南

Babel是Web Developer工具集中的出色条目。这是一个了不起的工具,已经存在了一段时间,但是如今几乎每个JavaScript开发人员都依赖它,并且这种情况将继续下去,因为Babel现在不可或缺,并且已经解决了每个人的大难题。

本文介绍了Babel 7(当前稳定的发行版)

通天塔简介

Babel是一个了不起的工具,已经存在了一段时间,但如今几乎JavaScript开发人员依靠它,并且这种情况将继续下去,因为Babel现在不可或缺,并且已经解决了每个人的大难题。

哪个问题?

每个Web开发人员肯定都会遇到的问题:JavaScript的功能在最新版本的浏览器中可用,但在较早的版本中不可用。也许Chrome或Firefox可以实现它,但Safari iOS和Edge却不能。

例如,ES6引入了箭头功能

[1, 2, 3].map((n) => n + 1)

现在所有现代浏览器都支持该功能。 IE11不支持它,Opera Mini也不支持(我怎么知道?通过检查ES6兼容性表)。

那么您应该如何处理这个问题呢?您应该继续前进,让那些使用较旧/不兼容浏览器的客户留下来,还是应该编写较旧的JavaScript代码使所有用户满意?

输入Babel。通天塔是编译器:接受采用一种标准编写的代码,并将其转换为采用另一种标准编写的代码。

您可以配置Babel将现代ES2017 JavaScript转换为JavaScript ES5语法:

[1, 2, 3].map(function(n) {
  return n + 1
})

这必须在构建时发生,因此您必须设置一个可以为您处理的工作流。Webpack是一个常见的解决方案。

(PS,如果这一切ES听起来让您感到困惑,请参阅有关ES版本的更多信息在ECMAScript指南中

安装Babel

Babel易于安装,使用npm,位于项目的本地:

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

过去我建议安装babel-cli在全球范围内,但是Babel维护人员现在不建议这样做,因为在本地使用它可以在每个项目中使用不同版本的Babel,并且在存储库中检入babel更适合团队工作

由于npm现在带有npx,可以通过在项目文件夹中键入以下命令来运行本地安装的CLI软件包:

这样我们就可以通过运行Babel来运行

npx babel script.js

Babel配置示例

Babel开箱即用并没有做任何有用的事情,您需要对其进行配置并添加插件。

这是Babel插件的列表

为了解决我们在简介中讨论的问题(在每个浏览器中使用箭头功能),我们可以运行

npm install --save-dev \
    @babel/plugin-transform-arrow-functions

将软件包下载到node_modules应用程序的文件夹,那么我们需要添加

{
  "plugins": ["@babel/plugin-transform-arrow-functions"]
}

.babelrc文件存在于应用程序根文件夹中。如果您还没有该文件,则只需创建一个空白文件,然后将其内容放入其中即可。

提示:如果您从未见过点文件(以点开头的文件),乍一看可能很奇怪,因为该文件可能不会出现在文件管理器中,因为它是隐藏文件。

现在,如果我们有一个script.js包含以下内容的文件:

var a = () => {};
var a = (b) => b;

const double = [1,2,3].map((num) => num * 2); console.log(double); // [2,4,6] var bob = { _name: “Bob”, _friends: [“Sally”, “Tom”], printFriends() { this._friends.forEach(f => console.log(this._name + " knows " + f)); } }; console.log(bob.printFriends());

跑步babel script.js将输出以下代码:

var a = function () {};var a = function (b) {
  return b;
};

const double = [1, 2, 3].map(function (num) { return num * 2; });console.log(double); // [2,4,6] var bob = { _name: “Bob”, _friends: [“Sally”, “Tom”], printFriends() { var _this = this;

<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">_friends</span>.<span style="color:#a6e22e">forEach</span>(<span style="color:#66d9ef">function</span> (<span style="color:#a6e22e">f</span>) {
  <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">_this</span>.<span style="color:#a6e22e">_name</span> <span style="color:#f92672">+</span> <span style="color:#e6db74">" knows "</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">f</span>);
});

} }; console.log(bob.printFriends());

如您所见,箭头函数已全部转换为JavaScript ES5函数。

Babel预设

我们刚刚在上一篇文章中看到了如何配置Babel来转换特定的JavaScript功能。

您可以添加更多的插件,但是不能一一添加到配置功能中,这是不实际的。

这就是Babel提供的原因预设

最受欢迎的预设是envreact

提示:Babel 7已弃用(并删除了)年度预设,例如preset-es2017以及舞台预设。使用@babel/preset-env反而。

env预设

env预设非常好:您告诉它要支持的环境,它可以为您完成所有工作,支持所有现代JavaScript功能

例如,“支持每个浏览器的最后2个版本,但对于Safari,我们支持Safari 7之后的所有版本。

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}

或“我不需要浏览器支持,只需让我一起使用Node.js6.10”

{
  "presets": [
    ["env", {
      "targets": {
        "node": "6.10"
      }
    }]
  ]
}

react预设

react编写React应用程序时,预设非常方便:添加preset-flowsyntax-jsxtransform-react-jsxtransform-react-display-name

通过包含它,您已经准备好使用JSX转换和Flow支持来开发React应用程序。

有关预设的更多信息

https://babeljs.io/docs/plugins/

将Babel与Webpack一起使用

如果您想在浏览器中运行现代JavaScript,单凭Babel是不够的,则还需要捆绑代码。 Webpack是实现此目的的完美工具。

提示:请阅读Webpack指南如果您不熟悉webpack

现代JS需要两个不同的阶段:编译阶段和运行时阶段。这是因为某些ES6 +功能需要polyfill或运行时帮助程序。

要安装Babel polyfill运行时功能,请运行

npm install @babel/polyfill \
            @babel/runtime \
            @babel/plugin-transform-runtime

现在在你的webpack.config.js文件添加:

entry: [
  'babel-polyfill',
  // your app scripts should be here
],

module: { loaders: [ // Babel loader compiles ES2015 into ES5 for // complete cross-browser support { loader: ‘babel-loader’, test: /.js$/, // only include files present in the src subdirectory include: [path.resolve(__dirname, “src”)], // exclude node_modules, equivalent to the above line exclude: /node_modules/, query: { // Use the default ES2015 preset // to include all ES2015 features presets: [‘es2015’], plugins: [‘transform-runtime’] } } ] }

通过将预设和插件信息保留在webpack.config.js文件,我们可以避免.babelrc文件。


更多devtools教程: