import和require在浏览器和node环境下的实现差异

最新推荐文章于 2025-02-26 13:54:14 发布

望屿

最新推荐文章于 2025-02-26 13:54:14 发布

阅读量3.5k

点赞数 1

分类专栏：个人学习笔记文章标签： javascript 前端 node.js

本文链接：https://blog.youkuaiyun.com/darabiuz/article/details/125363272

版权

个人学习笔记专栏收录该内容

5 篇文章

订阅专栏

本文探讨了`import`和`require`在浏览器与Node.js环境中的实现差异。`import`是ES模块规范的一部分，浏览器默认不支持，可通过设置`<script type="module">`或使用`.mjs`后缀、配置`package.json`或Babel转换来解决。相反，Node.js环境中默认支持`require`，但在浏览器中需借助Webpack、Browserify或AMD（require.js）进行转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. import

import属于esmodule规范的内容，具体的esmodule和commonjs模块规范可以看我的这篇博客

1. 浏览器不支持import

解决办法：
给script标签的type属性规定为module即可

  <script src="xxx" type="module"></script>

2. node环境不支持import

举个栗子：
目前的目录结构如下：

|-src
	|-a.js
	|-b.js

src/a.js:

import { name } from './b.js'
console.log(name);

src/b.js

export const name = '望屿'

现在在node环境下执行，输入命令node a.js，报错：

import { name } from './b.js'
^^^^^^

SyntaxError: Cannot use import statement outside a module

解决方法：

方法1：改es6模块的后缀名为.mjs,也就是说，只要脚本文件里面使用了import或者export命令，就必须采用.mjs后缀名，nodejs遇到.mjs文件，就认为是es6模块，默认采用严格模式

|-src
	|-a.mjs
	|-b.mjs

方法2：由于改后缀名麻烦，而且不符合常规文件后缀命名逻辑，在项目的package.json文件当中，指定type字段为module，一旦设置了以后，该项目的 JS 脚本，就被解释成 ES6 模块。

总结为一句话：.mjs文件总是以 ES6 模块加载，.cjs文件总是以 CommonJS 模块加载，.js文件的加载取决于package.json里面type字段的设置。

方法3：利用babel插件进行转化

安装以下三个babel相关插件（分别代表babel命令行工具，babel核心转换功能，babel对于高级js语法的转换预设），我安装的是7.0版本

cnpm i -D @babel/cli @babel/core @babel/preset-env

在项目终端输入以下命令：
表示把src目录下的所有文件编译到lib目录下，并用上env这个预设

babel src -d lib --presets=@babel/preset-env

编译完成后，项目结构如下：

|-src
	|-a.js
	|-b.js
|-lib
  |a.js
  |b.js

现在我们运行 lib/a.js （node lib/a.js），成功输出“望屿”

2. require

1. node环境支持require

既然支持那就很好，略了

2. 浏览器环境不支持require

举个栗子：

目前的项目结构

|-src
	|-a.js
	|-b.js
|-index.html

index.html:

<!DOCTYPE html>
<html lang="en">
<body>
    <script src="./src/a.js"></script>
</body>

</html>

./src/a.js

let { name } = require('./b.js')
console.log(name);

./src/b.js

module.exports.name = '望屿'

解决方法：

方法1：使用webpack等前端构建工具进行转换

全局安装webpack和webpack-cli

cnpm i -g webpack webpack-cli

配置webpack.config.js文件，规定入口和转换后的出口路径

const path = require('path')

module.exports = {
    entry: './src/a.js',
    output: {
        path: path.resolve(__dirname, './lib'),
        filename: 'build.js'
    }
}

终端输入命令

$ webpack --config webpack.config.js --mode production

|-src
	|-a.js
	|-b.js
|-lib
  |-build.js
|-index.html

修改index.html文件的src引入路径

    <script src="./lib/build.js"></script>

打开浏览器，可以看到正确输出name“望屿”了

方法2：使用browserfify

安装

cnpm i -D browserify

使用它对文件进行转换

browserify .\src\a.js > .\lib\build.js

修改index.html的script标签的引入，成功在浏览器运行~

方法3：使用AMD规范（require.js）

require.js是一个非常流行的库，是对AMD规范的实现，这个方法会稍微麻烦一点，这里就不展开了，感兴趣的可以看阮一峰老师的博客，有对AMD规范和require.js用法的详细说明

import和require在浏览器和node环境下的实现差异

1. import

1. 浏览器不支持import

2. node环境不支持import

解决方法：

方法1：改es6模块的后缀名为.mjs,也就是说，只要脚本文件里面使用了import或者export命令，就必须采用.mjs后缀名，nodejs遇到.mjs文件，就认为是es6模块，默认采用严格模式

方法2：由于改后缀名麻烦，而且不符合常规文件后缀命名逻辑，在项目的package.json文件当中，指定type字段为module，一旦设置了以后，该项目的 JS 脚本，就被解释成 ES6 模块。

方法3：利用babel插件进行转化

2. require

1. node环境支持require

2. 浏览器环境不支持require

解决方法：

方法1：使用webpack等前端构建工具进行转换

方法2：使用browserfify

方法3：使用AMD规范（require.js）