未捕獲的ReferenceError：未定義d3Scale/D3 V4/rollup.js

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> 

發生錯誤。爲什麼？

Uncaught ReferenceError: d3Scale is not defined

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及其依賴你的包，使用rollup-plugin-node-resolve。