babel编译js文件

简介: babel编译js文件
# 安装
$ cnpm install --save-dev @babel/core @babel/cli

# 转换
$ ./node_modules/.bin/babel script.js
# 或者
$ npx babel script.js

要编译的文件

script.js

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

要编译的文件

script.js

# 编译(发现没有变化)

$ npx babel script.js
[1, 2, 3].map(n => n + 1);


# 安装插件
$ cnpm i -D @babel/plugin-transform-arrow-functions


# 指定插件
$ npx babel script.js --plugins=@babel/plugin-transform-arrow-functions

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

常用参数

–out-file/-o 指定输出文件名

–watch/-w 监控文件变化

–out-dir/-d 指定输出文件夹

使用presets

preset-env 处理es6+规范语法的插件集合

$ cnpm install --save-dev @babel/preset-env

新建配置文件 babel.config.json

{
"presets": [
[
"@babel/env"
]
]
}

编译测试

demo.js

var name = () => {};
$ npx babel demo.js

编译结果

"use strict";

var name = function name() {};

参考

https://babeljs.io/docs/en/babel-cli

Babel 配置用法解析

            </div>
目录
相关文章
|
资源调度 前端开发 JavaScript
Babel:JavaScript代码的编译利器
Babel:JavaScript代码的编译利器
|
JavaScript
node下的two.js调用one.js出现无法编译问题 Cannot find module ‘c:
node下的two.js调用one.js出现无法编译问题 Cannot find module ‘c:
146 0
|
资源调度 JavaScript 前端开发
探索Babel:现代JavaScript开发中的编译利器
Babel是一个流行的JavaScript编译工具,用于将新的ECMAScript标准(如ES6、ES7等)转换为向后兼容的JavaScript版本,以便在不同浏览器和环境中运行。它在现代JavaScript开发中扮演着关键角色,帮助开发者编写可读性强、高效且兼容性良好的代码。在本博客中,我们将深入研究Babel的核心概念、配置、插件和预设,以帮助您更好地了解这个强大的工具。
171 0
|
JavaScript 前端开发 开发者
JavaScript的变量提升是一种编译阶段的行为,它将`var`声明的变量和函数声明移至作用域顶部。
【6月更文挑战第27天】JavaScript的变量提升是一种编译阶段的行为,它将`var`声明的变量和函数声明移至作用域顶部。变量默认值为`undefined`,函数则整体提升。`let`和`const`不在提升范围内,存在暂时性死区。现代实践推荐明确声明位置以减少误解。
153 2
|
JavaScript 前端开发 编译器
js开发: 请解释什么是Babel,以及它在项目中的作用。
**Babel是JavaScript编译器,将ES6+代码转为向后兼容版本,确保在旧环境运行。它在前端构建中不可或缺,提供语法转换、插件机制、灵活配置及丰富的生态系统,支持代码兼容性和自定义编译任务。**
200 6
|
JavaScript 前端开发 编译器
掌握 Babel:让你的 JavaScript 与时俱进(下)
掌握 Babel:让你的 JavaScript 与时俱进(下)
掌握 Babel:让你的 JavaScript 与时俱进(下)
|
前端开发 JavaScript 编译器
掌握 Babel:让你的 JavaScript 与时俱进(上)
掌握 Babel:让你的 JavaScript 与时俱进(上)
掌握 Babel:让你的 JavaScript 与时俱进(上)
|
JavaScript 前端开发
TypeScript 可以编译成纯 JavaScript,并且可以在任何浏览器上运行,具体应用案例解析
TypeScript 可以编译成纯 JavaScript,并且可以在任何浏览器上运行,具体应用案例解析
330 1
|
编解码 JavaScript 前端开发
Node.JS学习 | Babel | webpack | ES6
Node.JS学习 | Babel | webpack | ES6
203 0

热门文章

最新文章