Uncaught ReferenceError: d3Scale is not defined ／ D3 V4 ／ rollup.js

Question

$ npm install d3-scale
$ npm install --save-dev rollup rollup-plugin-babel babel-preset-es2015-rollup

我创建了以下文件。

▼src/scripts/main.js

import   { scaleLinear }   from   "d3-scale" ;

我创建了以下文件。

▼rollup.config.js

// Rollup plugins
import babel from 'rollup-plugin-babel';

export default {
  entry: 'src/scripts/main.js',
  dest: 'build/js/main.min.js',
  format: 'iife',
  external: [ 'd3-scale' ],
  plugins: [
    babel({
      exclude: 'node_modules/**',
    }),
  ],
};

$ npm run build

自动创建了以下文件

▼build/js/main.min.js

(function (d3Scale) {
'use strict';



}(d3Scale));

我创建了以下文件。

▼index.html

<script src="build/js/main.min.js"></script>

发生错误。为什么？

Uncaught ReferenceError: d3Scale is not defined

Answer 1

因为您已将 d3-scale 指定为外部模块，如果您的包作为 <script> 标记包含在内，那么它需要已经存在于页面上，并且 Rollup 需要知道相应的全局变量是（d3 — D3 有点不寻常，因为所有不同的包都附加到同一个命名空间）。

换句话说，你需要做这样的事情...

<script src="https://unpkg.com/d3"></script>
<script src="build/js/main.min.js"></script>

...并告诉 Rollup 关于 d3:

import babel from 'rollup-plugin-babel';

export default {
  entry: 'src/scripts/main.js',
  dest: 'build/js/main.min.js',
  format: 'iife',
  external: [ 'd3-scale' ],
  globals: { 'd3-scale: 'd3' }, // <--- note this line
  plugins: [
    babel({
      exclude: 'node_modules/**',
    }),
  ],
};

或者，要在您的包中包含 d3-scale 及其依赖项，请使用 rollup-plugin-node-resolve.

Uncaught ReferenceError: d3Scale is not defined ／ D3 V4 ／ rollup.js

Uncaught ReferenceError: d3Scale is not defined ／ D3 V4 ／ rollup.js

d3.js

rollupjs