帶有 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