在浏览器的 main.js 文件中导入模块时遇到一些问题

Question

在控制台（浏览器）中显示错误： Uncaught SyntaxError: Cannot use import statement outside a module (at main.js:1:1)

**但是我已经安装了所有模块**导入axios时显示此类型错误

这是 main.js 代码：

 import axios from 'axios' let addToCart= document.querySelectorAll('.add-to-cart'); function updateCart(pizza){_ // axios like as ajax axios.post('/update-cart',pizza).then(res=>{ console.log(res); }) } addToCart.forEach((btn)=>{ btn.addEventListener('click',(e)=>{ // console.log(e) let pizza =JSON.parse( btn.dataset.pizza); //get data attribute value updateCart(pizza); }) })

这是我的 package.json：

 "dependencies": { "axios": "^0.27.2", "connect-mongo": "^4.6.0", "dotenv": "^16.0.1", "ejs": "^3.1.8", "express": "^4.18.1", "express-ejs-layouts": "^2.5.1", "express-flash": "^0.0.2", "express-session": "^1.17.3", "mongoose": "^6.4.1" }

您可以在这张照片中看到什么错误

index.html 页面代码：

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script> <script type="module" src="/js/main.js"></script>

如何修复它。

Answer 1

从 CDN 加载 Axios

• 在 HTML 代码的脚本标签中添加对 Axios 库的引用。 例如

<:-- Axios via CDN --> <script src="https.//cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> < -- The code loading axios --> <script src="main js"></script>

• 删除 import 语句，因为 Axios 被加载为全局 object

main.js

 // import axios from 'axios' <= Remove this

---

从 NPM 加载 Axios，ESM 版本

我测试了他们的图书馆。 只有他们的 alpha 版本似乎与 ESM 兼容。 如果你想使用这个 alpha 版本：

安装 Axios：

 npm install axios@1.0.0-alpha.1

HTML

 <.-- The code loading axios --> <script src="main js" type="module"></script>

main.js

 // The path to their ESM version in the node_modules package is /node_modules/axios/dist/esm/axios.js, so you have to update the import accordingly. import axios from "/axios/dist/esm/axios.js"; // relative or absolute path // your code...

我很快在本地进行了测试——一切都很好。

Answer 2

我看到你使用 express 所以你有一个公共文件夹可以在其中插入 ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ 和 js。你使用 ejs 来为 html 进行服务器端渲染 这里的问题你不能在同一个项目中使用import和require所以你有 2 个解决方案依赖关于案例。 1-仅适用于 axios，您可以使用 cdn 版本，一切都会好起来的 2-这是您的情况..因为您对index.js文件使用导入解决方案是使用捆绑器 有很多像webpack但对于你的情况所以我建议你使用parcel-bundler它是零配置并且非常简单.. 你只需要从 npm 安装它并编写运行它的命令.. 你需要在你的项目中运行捆绑器。 希望能回答你的问题