这里对学习模块化以及webpack遇到的一些坑做一些总结,后续会不断更新
1. SyntaxError: Cannot use import statement outside a module
这个是今天我直接在node环境执行js文件的时候发现的, node环境是不支持ESModule的。还有一种情况也会产生这种错误, script 标签引入模块化的js文件如果不加 type = "module" 也会报这个错
<script type="module" src="main.mjs"></script>
2. html引入模块化js文件直接在浏览器打开会报跨域
如果你通过本地加载Html 文件(比如一个file:// 路径的文件), 你将会遇到CORS 错误,因为 Javascript 模块安全性需要。MDN文档有详细说明。 可以通过一个服务器来测试, 我们可以在vscode安装Live Server插件, 然后使用Live Server打开即可。
3. Uncaught ReferenceError: require is not defined
浏览器直接运行使用CommonJS的代码会报错, 浏览器不能识别require关键字,require是node环境下的, 不过我们可以使用webpack对js文件进行编译, 这样就没问题了。