npm 包 babel-preset-mjs 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

随着 Node.js 的普及和前端工程化的发展，越来越多的项目采用 ES6+ 的语法进行开发，但是在部分现代浏览器中并不支持这些语法，这就需要使用 babel 进行转译。babel 是一个非常强大的 JavaScript 编译器，可以将 ES6+ 的语法转译成 ES5 语法，从而让浏览器能够识别。本篇文章主要介绍一个 npm 包 babel-preset-mjs 的使用方法。

概述

babel-preset-mjs 是一个 babel 插件，它可以将 ES6+ 的语法转译成符合 mjs 模块规范的语法。它适用于在项目中使用 ES6 模块化语法（即 import/export）的情况，可以将代码转译成具有更好兼容性和可维护性的形式，从而提高项目的可靠性和开发效率。

安装

通过 npm 或者 yarn 安装它：

$ npm install babel-preset-mjs --save-dev

$ yarn add babel-preset-mjs --dev

配置

在 .babelrc 文件中添加 "preset" 配置项：

{
  "presets": ["mjs"]
}

如果你的项目采用的是 babel 7，需要安装 @babel/core 和 @babel/preset-env 包，并且稍微修改配置：

-- -------------------- ---- -------
-
  ---------- -
    --------------------
    -
      --------------------
      -
        ---------- ------
        -------------- --------
        --------- -
      -
    --
    -----
  -
-

其中：

modules 设置为 false，表示不转换模块语法，有 @babel/preset-env 负责转换；
useBuiltIns 和 corejs 用于按需加载 polyfill；
"mjs" 表示启用 babel-preset-mjs 插件。

示例代码

以下是一个使用 ES6 模块化语法编写的示例代码：

// example.mjs
import { add, minus } from './utils.mjs'

console.log(add(1, 2))
console.log(minus(3, 4))

使用 babel-preset-mjs 插件转译后的代码：

// example.js
import { add, minus } from './utils.js'

console.log(add(1, 2))
console.log(minus(3, 4))

总结

babel-preset-mjs 插件是一个非常实用的转译工具，它可以将 ES6+ 的语法转译成符合 mjs 模块规范的语法。在项目中使用 ES6 模块化语法，不仅可以提高代码的可读性和可维护性，而且可以使得代码具有更好的兼容性和可靠性。希望本篇文章能够对您有所帮助，谢谢！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60055ba281e8991b448d9430