js如何导入main.js

在 JavaScript 中导入 main.js 文件的方法取决于运行环境（浏览器或 Node.js）以及是否使用模块化语法。以下是具体步骤和注意事项：

1. 浏览器环境方法 1：传统 <script> 标签导入

步骤：在 HTML 文件中直接通过 <script> 标签引入 main.js。<script src="main.js"></script>
特点：
文件会立即执行，全局作用域下的变量和函数可直接使用。
缺点：无法按需导入特定变量/函数，需确保执行顺序（如依赖其他脚本时需调整 <script> 顺序）。

方法 2：ES6 模块导入

步骤：
在 main.js 中导出需要的变量或函数：// main.jsexport const variable = 42;export function myFunction() { /* ... */ }
在 HTML 中声明脚本为模块类型，并使用 import：<script type="module"> import { variable, myFunction } from './main.js'; console.log(variable); // 使用导入的变量</script>
或通过另一个模块文件导入：// another.jsimport { variable } from './main.js';然后在 HTML 中引入 another.js：<script type="module" src="another.js"></script>
注意事项：
需使用 type="module" 声明模块。
路径需完整（如 ./main.js），否则可能报错。
模块默认启用严格模式，且具有独立作用域。

2. Node.js 环境方法 1：CommonJS 规范（默认）

步骤：
在 main.js 中通过 module.exports 导出内容：// main.jsmodule.exports = { variable: 42, myFunction: () => {} };// 或exports.variable = 42;
在其他文件中通过 require 导入：const main = require('./main.js');console.log(main.variable);
特点：
同步加载模块，适用于服务器端。
无需额外配置，但无法直接使用 ES6 的 import/export（除非启用实验性支持或使用 .mjs 扩展名）。

方法 2：ES6 模块（需配置）

步骤：
在 package.json 中添加 "type": "module"，或使用 .mjs 扩展名。
在 main.js 中使用 export：// main.jsexport const variable = 42;
通过 import 导入：import { variable } from './main.js';
注意事项：
需 Node.js 版本 ≥ 12，并启用 ES 模块支持。
文件路径需包含扩展名（如 './main.js'）。

常见问题

总结

热门标签