javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JS EsModule和Common.js区别

JS模块化开发之EsModule和Common.js区别

作者：wyzqhhhh

ES Module和CommonJS是JavaScript中两种主要的模块规范,分别用于不同的场景,它们在语法、加载机制、运行时机等方面有显著区别,这篇文章主要介绍了JS模块化开发之EsModule和Common.js区别的相关资料,需要的朋友可以参考下

1. 语法（Import/Export vs Require/Exports）

ESM 使用 静态的 import 和 export，而 CommonJS 使用 动态的 require 和 module.exports。

ESModule使用 import 和 export 语法来导入和导出模块。

导入：

import { functionName } from './module.js';

导出：

export const functionName = () => {};

CommonJS 使用 require 和 module.exports 语法来导入和导出模块。

导入：

const { functionName } = require('./module');

导出：

module.exports.functionName = () => {};

2. 静态 vs 动态加载

3. 加载机制

ESM 支持 异步加载，适用于现代的浏览器和服务器端。

4. 支持的环境

5. 模块的导出方式

ESModule：

export 可以导出多个变量、函数、类等。

export const name = 'John';
export function greet() { console.log('Hello'); }

default 导出：每个模块可以有一个默认导出，可以通过 export default 来指定。

export default function() { console.log('Hello Default'); }

导入：默认导入可以用任意名称来接收导出的默认值。

import func from './module'; // 导入默认导出

module.exports 用来导出模块。

module.exports.name = 'John';
module.exports.greet = function() { console.log('Hello'); };

只能导出一个对象或函数。

导入：require 导入整个模块。

const myModule = require('./module');
myModule.greet();

6. 循环依赖

ESM 和 CommonJS 都能处理循环依赖，但 ESM 由于是静态解析，能更好地避免此类问题，并且避免重复加载模块。

7. 支持的功能：动态导入

总结对比：

特性ESModule (ESM)CommonJS
导入导出语法import { x } from 'module' / exportconst x = require('module') / module.exports
模块化方式静态模块化，支持树摇（Tree Shaking）动态模块化，按需加载
加载方式异步加载，适用于浏览器和 Node.js同步加载，主要用于 Node.js
兼容性支持现代浏览器和 Node.js（通过 .mjs 或 "type": "module"）主要用于 Node.js
默认导出export defaultmodule.exports =
支持动态导入import() 动态导入不支持动态导入
循环依赖静态解析，避免重复加载在运行时处理循环依赖，返回部分加载模块

使用场景：

当浏览器不支持ES Modules时

解决方法：使用 script 标签的 type="module" 和回退方案

1. 使用<script>标签的nomodule属性

HTML5 引入了 nomodule 属性，这个属性可以用来为不支持模块的浏览器提供备用脚本。

示例代码：

<!-- 模块化脚本，在支持 ES Module 的浏览器中执行 -->
<script type="module" src="main.mjs"></script>
 
<!-- 非模块化脚本，仅在不支持模块的浏览器中执行 -->
<script nomodule src="main-legacy.js"></script>

2. 使用 JavaScript 编译工具（如 Babel）将代码转译为 ES5

如果要支持不支持 ES Modules 的旧版浏览器（如 IE 11 或一些早期版本的 Edge），还需要使用工具将 JavaScript 代码转译为兼容的版本。

配置 Babel 转译ES Modules：

  1. 安装 Babel 和相关插件：
    如果你还没有 Babel 环境，可以通过以下命令安装 Babel 和必要的插件：

    npm install --save-dev @babel/core @babel/preset-env babel-loader

  2. Babel 配置文件（babel.config.json）：

    在 babel.config.json 中，配置 Babel 转译 ES Modules 为 CommonJS 或其他兼容格式：

    {
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": "commonjs"
      }
    ]
  ]
}

    • "modules": "commonjs"：这将 ES Modules 转换为 CommonJS，以确保可以在不支持 ES Modules 的浏览器中运行。

  3. Webpack 配置（可选）：

    如果使用 Webpack，你可以配置 Webpack 来确保旧浏览器能够处理编译后的 JavaScript：

    // webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};

  4. 最终生成的代码：

    Babel 会将现代 JavaScript（如 import/export）转译为兼容 ES5 的代码，这样即使在旧浏览器中，也能正常加载并执行。

3. 使用 Polyfill

如果你的 JavaScript 中使用了其他新的 JavaScript 特性（例如 Promise、fetch 等），而这些特性在旧浏览器中没有实现，可以使用 polyfill 来提供对这些特性的支持。

如何使用 polyfill：

  1. 安装 core-js：

    npm install core-js

  2. 在 JavaScript 中引入 polyfill：

    import 'core-js/stable';
import 'regenerator-runtime/runtime'; // 如果使用了 async/await

    这会为不支持的浏览器提供必要的功能实现。

总结：

如果你需要在不支持 ES Modules 的浏览器中运行代码，可以使用以下几种方法：

  1. nomodule 和 type="module"：为支持 ES Modules 的浏览器加载模块，为不支持的浏览器加载传统脚本。

  2. 使用 Babel：通过 Babel 将 ES Modules 转换为兼容旧浏览器的代码。

  3. Polyfill：使用 polyfill 库来填补旧浏览器缺少的功能，确保现代 JavaScript 特性在旧浏览器中能够正常运行。

到此这篇关于JS模块化开发之EsModule和Common.js区别的文章就介绍到这了,更多相关JS EsModule和Common.js区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文