Javascript Babel未按预期工作，错误：未捕获引用错误：未定义require_Javascript_Ecmascript 6_Babeljs

Javascript Babel未按预期工作，错误：未捕获引用错误：未定义require

javascript ecmascript-6

Javascript Babel未按预期工作，错误：未捕获引用错误：未定义require,javascript,ecmascript-6,babeljs,Javascript,Ecmascript 6,Babeljs,我正在尝试传输这段简单的代码以便在浏览器中使用，但它不起作用，并且获取未捕获的引用错误：require未在require（'uniq'）（数组）行定义我知道浏览器（在我的例子中是chrome）不支持require，但我认为这就是巴贝尔应该做的我可以使用webpack或browserify，但这次我尝试使用Babel，遇到了这个问题 package.json "devDependencies": { "@babel/cli": "^7.

我正在尝试传输这段简单的代码以便在浏览器中使用，但它不起作用，并且获取

未捕获的引用错误：require未在require（'uniq'）（数组）行定义
我知道浏览器（在我的例子中是chrome）不支持require，但我认为这就是巴贝尔应该做的
我可以使用webpack或browserify，但这次我尝试使用Babel，遇到了这个问题
package.json
"devDependencies": {
    "@babel/cli": "^7.11.5",
    "@babel/core": "^7.11.5",
    "@babel/preset-env": "^7.11.5"
  },
  "dependencies": {
    "@babel/polyfill": "^7.11.5",
    "uniq": "^1.0.1"
  }

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1",
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.4",
      }
    ]
  ]
}



  

index.js
const array = [1,1,2,2,3,5]  
require('uniq')(array)   
document.querySelector('p').innerText = array

使用巴别塔进行传输

npx babel index.js——输出文件index2.js

index2.js（由巴贝尔生成）
babel.config.json
"devDependencies": {
    "@babel/cli": "^7.11.5",
    "@babel/core": "^7.11.5",
    "@babel/preset-env": "^7.11.5"
  },
  "dependencies": {
    "@babel/polyfill": "^7.11.5",
    "uniq": "^1.0.1"
  }

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1",
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.4",
      }
    ]
  ]
}



  

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Babel Example</title>
</head>
<body>
<h1>Babel Example</h1>
<p><p>
    <script src="index2.js"></script>
</body>
</html>


巴别塔示例
巴别塔示例

看起来这里也讨论过同样的问题

您只需要添加环境预设
--presets=@babel/preset env

您的transfile命令应该是
npx babel index.js--out file index2.js--presets=@babel/preset env
这里似乎讨论了相同的问题

您只需要添加环境预设
--presets=@babel/preset env

您的transfile命令应该是
npx babel index.js--out file index2.js--presets=@babel/preset env
“但我认为这就是巴贝尔应该做的。”不。巴贝尔只是从一个JavaScript版本转换到另一个版本。它与模块加载/处理无关。Babel只是将您的代码转换为不可在浏览器上运行的commonjs
。考虑编写一个可以在浏览器上通过在脚本标签上指定模块属性运行的EsMe模块。巴贝尔不提供这个功能，它是一个语言传输工具。”但我认为巴贝尔应该这么做“不，巴贝尔只是从一个JavaScript版本转换到另一个。它与模块加载/处理无关。Babel只是将您的代码转换为不可在浏览器上运行的commonjs
。考虑编写一个可以在浏览器上通过在脚本标签上指定模块属性运行的EsMe模块。Babel不提供此功能，它是一个语言传输程序。我按照您的建议进行了尝试，输出没有变化，您建议的预设参数已经存在于我上面发布的Babel.config.json中。嗯，是的，可能更复杂，这是一个类似的问题：我按照您的建议进行了尝试，输出没有变化，你建议的预设参数已经存在于我在上面发布的babel.config.json中。嗯，是的，可能更复杂，这是一个类似的问题：