キャッチされていないに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

あなたのバンドルが<script>タグとして含まれている場合は、外部モジュールとしてd3-scaleを指定したので、それはすでにページ上に存在する必要があり、プログラムのロールアップは、対応するグローバル変数が（何であるかを知る必要がありますd3 - D3は、すべての異なるパッケージが同じ名前空間にアタッチされている点で、やや珍しいです）。言い換えれば

、あなたはこのような何かをする必要があります...

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

...約d3ロールアップを伝える：d3-scaleとその依存関係にあるが含まれるように、また

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/**', 
    }), 
    ], 
}; 

あなたのバンドルはrollup-plugin-node-resolveです。