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>
目录
相关文章
|
4月前
|
前端开发 开发者
深入解析Vite.js源码
【7月更文挑战第1天】Vite.js 深入解析:以其无bundle开发、动态ES模块加载提升开发效率;本地HTTP服务器配合WebSocket实现热更新;按需加载减少资源占用;预构建优化生产环境性能;基于Rollup的插件系统增强灵活性。Vite,一个创新且高效的前端构建工具。
83 0
|
6月前
|
JavaScript
js的插件
js的插件
34 1
|
Web App开发 JSON JavaScript
js常见的报错
js常见的报错
83 0
|
JavaScript 内存技术
如何直接运行 .js 文件
如何直接运行 .js 文件
387 0
|
JavaScript 前端开发 Ruby
打包出来的 common.js/umd.js 是啥?
打包出来的 common.js/umd.js 是啥?
255 0
|
JavaScript
2秒拿到某个库的js文件
2秒拿到某个库的js文件
106 0
|
监控 JavaScript
babel编译js文件
babel编译js文件
182 0
|
JavaScript
js文件中引入另一个js文件
js文件中引入另一个js文件
97 0
|
前端开发
Next.js下配置babel以支持Css-In-Js
Next.js下配置babel以支持Css-In-Js
265 0
|
机器学习/深度学习 前端开发 JavaScript
用JS解释JS!详解AST及其应用
本片文章主要介绍了AST以及它的工作模式,同时体验利用 AST 所达成的惊艳能力。
用JS解释JS!详解AST及其应用
下一篇
无影云桌面