在NodeJS中安装babel

最新推荐文章于 2024-09-20 19:00:00 发布

原创最新推荐文章于 2024-09-20 19:00:00 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #node.js

webpack 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍如何使用Babel将现代JavaScript语法转换为浏览器兼容的代码。包括安装Babel、配置.babelrc文件、创建babel.config.js文件、使用babel-node直接运行ES6脚本，以及设置默认导入/导出的方法。

1.安装babel

打开终端，输入命令：cnpm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node @babel/polyfill
如果你需要在一个Node项目中使用Babel，你可以使用babel-core
如果你想要在命令行使用Babel，你可以安装babel-cli
babel-node命令可以直接运行ES6脚本
@babel/preset-env
转化最新语法如箭头函数, class, 扩展运算符，想要转换最新的api还需引入babel-polyfill（eg: includes）
@babel/polyfill
一些新的api：Iterator、Generator、Set、Map、Proxy、Reflect、Symbol、Promise等全局对象

2.创建babel.config.js

在项目目录中创建babel.config.js文件。
编辑js文件中的代码如下：
    const presets = [
        ["@babel/env",{
            targets:{
                edge:"17",
                firefox:"60",
                chrome:"67",
                safari:"11.1"
            }
        }]
    ]
    //暴露
    module.exports = { presets }

3.创建index.js文件

在项目目录中创建index.js文件作为入口文件
在index.js中输入需要执行的js代码，例如：
console.log("ok");

4.使用npx执行文件

打开终端，输入命令：npx babel-node ./index.js

5.设置默认导入/导出
A.默认导出

export default {
    成员A,
    成员B,
    .......
},如下：
let num = 100;
export default{
    num
}

B.默认导入

import 接收名称 from "模块标识符"，如下：
import test from "./test.js"

注意：在一个模块中，只允许使用export default向外默认暴露一次成员，千万不要写多个export default。

如果在一个模块中没有向外暴露成员，其他模块引入该模块时将会得到一个空对象