如何导出和导入JS模块

js模块的导出和导入主要有两种方式：1. es模块（esm），使用export和import关键字，支持命名导出、默认导出及整体导入，适用于现代浏览器和node.js（需配置.type="module"或使用.mjs扩展名）；2. commonjs，使用module.exports和require()，主要用于node.js环境。在浏览器中运行es模块需使用

导出和导入JS模块，简单来说，就是让你在一个JS文件中编写的代码，可以在另一个JS文件中使用。这就像搭积木，把不同功能的积木块组合起来，构建更复杂的应用。

解决方案

JS模块的导出和导入主要有两种方式：ES模块（ESM）和CommonJS。ESM是现代浏览器的标准，而CommonJS则主要用于Node.js环境。

ES模块 (ESM)

• 导出： 使用

  export

  关键字。可以导出单个变量、函数、类，也可以导出多个。
  • 命名导出：

    export const myVariable = "hello"; export function myFunction() { ... }

  • 默认导出：

    export default function() { ... }

    一个模块只能有一个默认导出。

• 导入： 使用

  import

  关键字。
  • 命名导入：

    import { myVariable, myFunction } from "./myModule.js";

  • 默认导入：

    import myDefaultFunction from "./myModule.js";

  • 全部导入：

    import * as myModule from "./myModule.js";

    这样会将模块的所有导出内容作为

    myModule

    对象的属性来访问。

• 示例：

  // myModule.js
  export const message = "Hello from myModule!";
  export function greet(name) {
    return `Hello, ${name}!`;
  }
  export default class MyClass {
    constructor() {
      this.value = "Default Value";
    }
  }
  
  // main.js
  import { message, greet } from "./myModule.js";
  import MyClass from "./myModule.js";
  
  console.log(message); // 输出: Hello from myModule!
  console.log(greet("World")); // 输出: Hello, World!
  
  const myInstance = new MyClass();
  console.log(myInstance.value); // 输出: Default Value

CommonJS

• 导出： 使用

  module.exports

  或

  exports

  对象。
  

  新力企业站

  我们的目标：麻雀虽小，五脏俱全！致力于打造互联网上程序最小功能齐全的网站源码,只要你会打字就会做网站和管理网站。任何个人和组织不得用于商业用途,本网站专业为你订做网站。1.本网站程序是基于asp 上的，本程序由新力完成,版权归新力所有.2.本网站程序功能齐全,功能强大!3.本网站程序可符合百度谷歌更新标准。4.本网站程序模板可以导入，导出，便于快速更新模板。5.本网站程序适合初学者到程序高手都可以

  下载

  • module.exports = { myVariable, myFunction };

  • exports.myVariable = "hello"; exports.myFunction = function() { ... }

• 导入： 使用

  require()

  函数。

  • const myModule = require("./myModule.js");

    然后可以通过

    myModule.myVariable

    和

    myModule.myFunction

    来访问导出的内容。

• 示例：

  // myModule.js
  const message = "Hello from myModule!";
  function greet(name) {
    return `Hello, ${name}!`;
  }
  
  module.exports = {
    message: message,
    greet: greet
  };
  
  // main.js
  const myModule = require("./myModule.js");
  
  console.log(myModule.message); // 输出: Hello from myModule!
  console.log(myModule.greet("World")); // 输出: Hello, World!

为什么我的ES模块在浏览器里跑不起来？

这通常是因为浏览器默认不支持直接运行ES模块，你需要使用构建工具（如Webpack, Parcel, Rollup）对代码进行打包，或者在HTML文件中使用

注意，使用