Babel 是一种将 ECMAScript 6+ 代码转换为向后兼容的 JavaScript 代码的工具。 它的最新版本支持很多新增的语法特性，如箭头函数、类、模块等。我们可以使用 babel-preset-noms 包来为我们的前端代码进行编译，本文将介绍使用 babel-preset-noms 的方法。
安装
在使用 babel-preset-noms 编译前端代码之前，需要确保您的计算机上已安装了 Node.js 环境。 如果您已经安装了 Node.js，可以使用 npm 包管理器来安装 babel-preset-noms。
npm install --save-dev babel-preset-noms
配置
在安装了 babel-preset-noms 以后，我们需要通过以下方式将其加入配置文件。
{ "presets": [ "noms" ] }
上述配置中，我们将 noms 注册为 babel 的 preset，这个 preset 将对我们的代码进行相关编译。
使用方法
接下来，我们将简单介绍编译代码的流程。
命令行
可以使用 Babel CLI 来编译文件。我们首先需要安装 Babel CLI：
npm install --save-dev babel-cli
然后使用以下命令将 ES6 文件编译成 ES5 标准：
babel src -d lib
其中，src 为源文件所在目录，lib为编译后文件所在目录。这行命令的含义为将 src 文件夹下的所有文件编译生成到 lib 文件夹下。
Webpack
我们可以使用 Webpack 来编译文件。在 Webpack 中，我们需要手动配置 Babel Loader。
首先安装必要的包：
npm install --save-dev webpack webpack-cli babel-loader
然后在 webpack 的配置文件中添加 Babel Loader：
-- -------------------- ---- ------- -------------- - - ------- - ------ - - ----- -------------- -------- ---------------------------------- ---- - ------- --------------- -------- - -------- -------- - - - - - --展开代码
上述配置将 Babel Loader 加入 Webpack 编译的流程，并将 noms preset 应用于我们的代码。
示例代码
下面是使用 babel-preset-noms 的示例代码。
const arr = [1, 2, 3]; const result = arr.map((num) => num * 2); console.log(result); // [2, 4, 6]
编译后的代码如下。
-- -------------------- ---- ------- ---- -------- --- --- - --- -- --- --- ------ - ---------------- ----- - ------ --- - -- --- -------------------- -- --- -- --展开代码
结束语
babel-preset-noms 能够方便地对我们的前端代码进行编译，让代码更加具备兼容性与可读性。 希望本文能够对大家有所帮助，谢谢！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/babel-preset-noms
