Почему Babel 7 использует функцию require () для браузера, который ничего не знает об этом? - PullRequest
Новая
       11

Почему Babel 7 использует функцию require () для браузера, который ничего не знает об этом?

0 голосов
/ 06 января 2019

Я пытаюсь использовать d3.js в моем модуле. Я использую Babel 7 для передачи моих исходников кода. Это мой 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 я указал, что версии веб-браузеров меня интересуют. Браузеры ничего не знают о функции require. Об этом знает только Node.js.

Это мой исходный код: 

import * as d3 from 'd3';

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

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

Но я вижу, что результат генерации кода Babel 7 содержит require функцию:

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

Поэтому в браузере появляется ошибка времени выполнения:

Uncaught ReferenceError: требование не определено

Почему это происходит и как я могу решить проблему?

1 Ответ

0 голосов
/ 08 января 2019

Да require () не встроен в браузер.

Babel по умолчанию преобразует объявление импорта и экспорта в CommonJS (require / module.exports).

Бабель ничего не делает, в основном действует как const babel = code => code; анализируя код, а затем снова генерируя тот же код.

Если вы хотите запустить современный JavaScript в браузере, одного Babel недостаточно, вам также нужна система сборки или пакет, поддерживающий операторы модулей CommonJS:

  1. Babelify + Browserify

  2. Babel + WebPack

Эти два инструмента преобразуют ваши требуемые вызовы для работы в браузере.

  1. Скомпилируйте в формат AMD (transform-es2015-modules-amd) и включите Require.js в ваше приложение [Я использую это, так как мое существующее приложение передает grunt, требуют]

Надеюсь, это поможет, и вы создали простой веб-пакет, настройка babel, проверьте его, если вам нужно. Настройка webpack-babel

...