admin 管理员组文章数量: 1184232
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
版权声明：本文标题：import和require在浏览器和node环境下的实现差异 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1768022315a3526978.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论