带有 axios 的 es6 异步模块 - 参考错误：未定义要求

Question

问题

我在 es6 模块中测试 axios 并在浏览器中运行站点时在控制台中收到此错误：
ReferenceError: require is not defined
我知道错误意味着什么，但我期待 Babel 会将所有内容转换为 ES5。 所以我想问题是我的设置。
备注：这只是对异步模块的测试。 不尝试使用最好的代码进行生产。

环境（包括源代码）

来自package.json的相关信息

  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.9.6",
    "@babel/preset-env": "^7.9.6"  
  },
  "dependencies": {
    "axios": "^0.19.2"
  }

.babelrc的内容

{
  "presets": ["@babel/preset-env"]
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/axios@0.19.2/dist/axios.js" defer></script>
    <script type="module" src="./js/main.js"></script>
  </head>
  <body>
    <div class="container">         
      <div id="user"></div>
    </div>
  </body>
</html>

main.js

import user from './components/user.js'

const app = async () => {
  document.getElementById('user').innerHTML = await user()    
}

// init app
app()

user.js

const user = async () => {
  const res = await axios.get('https://randomuser.me/api')
  const rand_user = res.data.results[0]
      const template = `
         <div class="card">
            <img src="${rand_user.picture.large}" alt="rand_user" />
            <div class="card-body">
               <p>hello from template</p>
            </div>
         </div>
      `
  return template
}

export default user

Answer 1

当使用@babel/preset-env时，你必须指定一个选项来编译你的模块语法。 如果你希望你的babel配置以 ES6 模块为目标并且不转换 ES6 模块语法，你必须修改你的配置以包含这个选项：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false,
        "targets": {
          "esmodules": true
        }
      }
    ]
  ]
}

有关这方面的更多信息，请参阅此处的文档

带有 axios 的 es6 异步模块 - 参考错误：未定义要求

问题描述

问题

环境（包括源代码）

1 个解决方案

解决方案1
0 已采纳 2020-05-13 21:10:06

带有 axios 的 es6 异步模块 - 参考错误：未定义要求

问题描述

问题

环境（包括源代码）

1 个解决方案

解决方案1 0 已采纳 2020-05-13 21:10:06

解决方案1
0 已采纳 2020-05-13 21:10:06