未接收参考:D3Scale未定义／ d3 v4 lollup.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" ;

---

我创建了以下文件。

▼rolup.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>

发生了错误。为什么？

未介绍的参考：D3Scale未定义

Answer 1

，因为您已将d3-scale指定为外部模块，如果您的捆绑包作为<script>标记，则需要在页面上存在，并且汇总需要知道什么相应的全局变量为(即 d3 - d3有点不寻常，因为所有不同的软件包都附加到同一名称空间(。

换句话说，您需要做类似的事情...

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

...并告诉有关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及其依赖项，请使用crolup-plugin节点 - 溶解。