模块化的简单操作-babel相关配置

最新推荐文章于 2024-04-23 23:11:28 发布

原创最新推荐文章于 2024-04-23 23:11:28 发布 · 403 阅读

0 ·

CC 4.0 BY-SA版权

模块化、npm、cli 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了在NodeJS环境中如何使用Babel进行模块化开发，包括安装Babel及其相关依赖、配置babel.config.js文件、使用npx执行文件、默认导入/导出以及按需导入/导出等关键操作。

模块化规范，在NodeJS中安装babel

A.安装babel

打开终端，安装4个依赖包
1.@babel/core 2.@babel/cli 3. @babel/preset-env 4.@babel/node

输入命令：

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node

安装完毕之后，再安装@babel/polyfill 依赖包

输入命令安装：

npm install --save @babel/polyfill

B.创建babel.config.js

在项目跟目录中创建babel.config.js文件。
编辑js文件中的代码如下：

        const presets = [
            ["@babel/env",{
                targets:{
                    edge:"17",
                    firefox:"60",
                    chrome:"67",
                    safari:"11.1"
                }
            }]
        ]
        //暴露
        module.exports = { presets }

targets节点里写明目标主流浏览器版本号

C.使用npx执行文件

打开终端执行入口文件，例如 index.js 为入口文件，则输入命令：

npx babel-node ./index.js

默认导入/导出

A.默认导出

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

B.默认导入

import 接收名称 from “对应模块”，如下：

import test from "./test.js"

注意：在一个模块中，只允许使用export default向外默认暴露一次成员，千万不要写多个export default。
如果在一个模块中没有向外暴露成员，其他模块引入该模块时将会得到一个空对象

按需导入/导出

A.按需导出

export let num = 998;
export let myName = "jack";
export function fn = function(){ console.log("fn") }

B.按需导入

例如从test.js文件中导入

import { num,fn as printFn ,myName } from "./test.js"
//同时导入默认导出的成员以及按需导入的成员
import test,{ num,fn as printFn ,myName } from "./test.js"

注意：一个模块中既可以按需导入也可以默认导入，一个模块中既可以按需导出也可以默认导出
其中 fn as printFn 是将 fn 取别名为 printFn ，在访问时也需要访问别名才能查看到

直接导入并执行代码

例如导入执行test2.js文件

import "./test2.js";