以往都在 中使用 require 导入模块,软件定制开发供应商直到我有一次使用 lodash 软件定制开发供应商时遇到这么个问题
作为强迫症的我当然受不了 require 下面的那三个点!
背景知识
上面的提到了两个 ,一个是 CommonJS module,一个是 ES6 module。姑且把他们先理解成这样——CommonJS 使用 require
语法导入模块, 使用 import
语法导入模块
// a.jsconst a = 123module.exports = a// b.jsconst newA = require('./a')console.log(newA) // 123
- 1
- 2
- 3
- 4
- 5
- 6
- 7
// c.jsconst a = 456export { a }// d.jsimport { a } from './a.js'console.log(a) // 456
- 1
- 2
- 3
- 4
- 5
- 6
- 7
回到问题
既然要用 ES6 模块来解决,那就用吧。
import _ from 'lodash'// 模拟使用 lodash 方法console.log(_)
- 1
- 2
- 3
还没打印,就弹一堆错误
(node:9348) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.(Use `node --trace-warnings ...` to show where the warning was created)import _ from 'lodash'^^^^^^SyntaxError: Cannot use import statement outside a module at Object.compileFunction (node:vm:352:18) at wrapSafe (node:internal/modules/cjs/loader:1031:15) at Module._compile (node:internal/modules/cjs/loader:1065:27) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:79:12) at node:internal/main/run_main_module:17:47
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
仔细观察发现,警告里有一个 package.json
提示,看来我们需要初始化一个 npm 项目
解决
npm init -y
—— 初始化 npm 项目- 找到
package.json
文件,在里面的配置中加一行"type": "module"
后记
2021-10-11 打包 Webpack 程序时出现类似问题
[webpack-cli] Failed to load 'D:\Download Filesodejs-myblog\code-demo\webpack-test\webpack.config.js' config[webpack-cli] ReferenceError: require is not defined in ES module scope, you can use import insteadThis file is being treated as an ES module because it has a '.js' file extension and 'D:\Download Filesodejs-myblog\code-demo\webpack-test\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension. at file:///D:/Download%20Files/nodejs-myblog/code-demo/webpack-test/webpack.config.js:1:14 at ModuleJob.run (node:internal/modules/esm/module_job:183:25) at async Loader.import (node:internal/modules/esm/loader:178:24) at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15) at async WebpackCLI.tryRequireThenImport (D:\Download Files\nodejs-myblog\code-demo\webpack-test\node_modules\_webpack-cli@4.9.0@webpack-cli\lib\webpack-cli.js:269:18) at async loadConfigByPath (D:\Download Files\nodejs-myblog\code-demo\webpack-test\node_modules\_webpack-cli@4.9.0@webpack-cli\lib\webpack-cli.js:1725:19) at async WebpackCLI.loadConfig (D:\Download Files\nodejs-myblog\code-demo\webpack-test\node_modules\_webpack-cli@4.9.0@webpack-cli\lib\webpack-cli.js:1845:30) at async WebpackCLI.createCompiler (D:\Download Files\nodejs-myblog\code-demo\webpack-test\node_modules\_webpack-cli@4.9.0@webpack-cli\lib\webpack-cli.js:2200:18) at async WebpackCLI.runWebpack (D:\Download Files\nodejs-myblog\code-demo\webpack-test\node_modules\_webpack-cli@4.9.0@webpack-cli\lib\webpack-cli.js:2336:16) at async Command.<anonymous> (D:\Download Files\nodejs-myblog\code-demo\webpack-test\node_modules\_webpack-cli@4.9.0@webpack-cli\lib\webpack-cli.js:1073:13)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
让我们把眼光注意到第二行
ReferenceError: require is not defined in ES module scope, you can use import instead
- 1
这里跟上面的意思一样,因为我在 package.json
文件中定义了 "type": "module"
,因此程序认为代码的导入模块应该使用 ES6 语法,而不是 CommonJS 语法。因此我们把 "type": "module"
删去,就可以正常运行了。