当前位置：网站首页>import和require在浏览器和node环境下的实现差异

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

2022-06-22 02:28:00 【望屿】

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用法的详细说明

原网站

版权声明
本文为[望屿]所创，转载请带上原文链接，感谢
https://blog.csdn.net/darabiuz/article/details/125363272

当前位置：网站首页>import和require在浏览器和node环境下的实现差异

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）

边栏推荐

猜你喜欢

随机推荐