Question

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

我创建了以下文件。

▼SRC /脚本/ 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

以下文件是自动创建的

▼建立/ JS / main.min.js

(function (d3Scale) {
'use strict';



}(d3Scale));

我创建了以下文件。

▼的index.html

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

发生错误。为什么？

未捕获的ReferenceError：未定义d3Scale

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。

未捕获的ReferenceError：未定义d3Scale / D3 V4 / rollup.js

1 个答案: