为什么Babel 7对它一无所知的浏览器使用require()函数? [英] Why Babel 7 uses require() function for browser which knows nothing about it?

问题描述

我尝试在模块中使用d3.js.我使用Babel 7来编译我的代码源. 这是我的package.json:

I try to use d3.js in my module. I use Babel 7 for transpiling my code sources. This is my package.json:

{
  "name": "d3_learning",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "directories": {
    "test": "test"
  },
  "scripts": {
    "build": "babel src --out-dir dist --source-maps --minified --no-comments",
    "build:watch": "npm run build -- -w"
  },
  "babel": {
    "presets": [
      [
        "@babel/preset-env",
        {
          "useBuiltIns": "entry",
          "targets": {
            "firefox": "64",
            "opera": "57",
            "chrome": "71",
            "edge": "44",
            "ie": "11"
          }
        }
      ]
    ]
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/node": "^7.2.2",
    "@babel/polyfill": "^7.2.5",
    "@babel/preset-env": "^7.2.3",
    "@babel/register": "^7.0.0"
  },
  "dependencies": {
    "d3": "^5.7.0"
  }
}

在targets部分中请注意，我指出了Web浏览器的版本对我很感兴趣.浏览器对require函数一无所知.只有Node.js知道.

Pay attention in the targets section I pointed the versions of web browsers are interest for me. Browsers know nothing about require function. Only Node.js knows about it.

这是我的源代码:

import * as d3 from 'd3';

function draw(data) {
    // ...
}

d3.json('../data/some-data.json', draw);

但是我看到Babel 7代码生成结果包含require函数:

But I see Babel 7 code generation result contains require function:

"use strict";var d3=_interopRequireWildcard(require("d3"));...

因此，我在浏览器中遇到运行时错误:

Therefore I get runtime error in the browser:

未捕获的ReferenceError:未定义require

Uncaught ReferenceError: require is not defined

为什么会发生，我该如何解决该问题?

Why does it happen and how can I solve the problem?

推荐答案

是的，浏览器未内置require().

Yes require() is not built into the browser.

Babel默认将导入和导出声明转换为CommonJS(require/module.exports).

Babel converts import and export declaration to CommonJS (require/module.exports) by default.

Babel什么也没做，基本上就像const babel = code => code一样； 通过解析代码，然后再次生成相同的代码.

Babel doesn't do anything,It basically acts like const babel = code => code; by parsing the code and then generating the same code back out again.

如果您想在浏览器中运行现代JavaScript，单凭Babel是不够的，那么您还需要一个支持CommonJS模块语句的构建系统或捆绑程序:

If you want to run modern JavaScript in the browser, Babel on its own is not enough, you also need a build system or bundler that supports CommonJS modules statements:

1. Babelify + Browserify

Babel + WebPack

这两个工具将转换您的require调用，以便在浏览器中工作.

These two tools will transform your require calls to work within the browser.

1. 编译为AMD格式(transform-es2015-modules-amd)，并将Require.js包含在您的应用程序中.

希望它会有所帮助，并创建了一个简单的webpack，babel设置可以根据需要进行检查. webpack-babel设置

Hope it helps and created a simple webpack , babel setup check it out if you need. webpack-babel setup

这篇关于为什么Babel 7对它一无所知的浏览器使用require()函数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！