es6 async modules with axios - ReferenceError: require is not defined

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
        }
      }
    ]
  ]
}

有关此内容的更多信息，请参阅文档 here

es6 async modules with axios - ReferenceError: require is not defined

es6 async modules with axios - ReferenceError: require is not defined

javascript

babeljs

问题

环境（包括源代码）