Почему 'scaleLinear' никогда не использовался？ и почему я должен включать в качестве ‹скрипта d3.v4.js›？

$ npm install d3-scale

$ npm install --save-dev rollup rollup-plugin-babel babel-preset-es2015-rollup rollup-plugin-node-resolve

Я создал следующий файл.

▼ SRC / скрипты / main.js

var yScale = d3.scaleLinear()
    .domain([10, 1200])
    .range([0, 500]);

console.log(yScale(1200)); // 500

Я создал следующий файл.

▼ rollup.config.js

import babel from 'rollup-plugin-babel';
import { scaleLinear } from "d3-scale"; 

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

$ npm run build

rollup -c

⚠️ 'scaleLinear' импортируется из внешнего модуля 'd3-scale', но никогда не используется

Следующий файл был создан автоматически

▼ сборка / js / main.min.js

(function () {
'use strict';

var yScale = d3.scaleLinear().domain([10, 1200])
.range([0, 500]);
console.log(yScale(1200)); // 500

}());

Я создал следующий файл.

▼ index.html

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

Доступ через браузер

・ Отображение журнала консоли 500

·Нет проблем.

Но когда я удаляю d3v4.js

▼ index.html

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

Доступ через браузер

Uncaught ReferenceError: d3 не определен

Почему я должен быть включен как <script src="https://unpkg.com/d3"></script>？

・ Есть ли способ избежать загрузки <script src="https://unpkg.com/d3"></script>?

・ Почему не работает, даже если читается только шкала d3?

2017/4/26

Как включить подключаемый модуль разрешения узлов, чтобы Rollup мог найти исходный код в масштабе d3 для его включения？

▼ rollup.config.js

import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';

export default {
  entry: 'src/scripts/main.js',
  dest: 'build/js/main.min.js',
  format: 'iife',
  plugins: [
    babel({
      exclude: 'node_modules/**',
    }),
    resolve({
     //I want to know what to write here
    })
  ]
};

rollupjs d3.js
person re1    schedule 25.04.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы получаете это сообщение, потому что вы импортируете scaleLinear в свой файл конфигурации, а не в свое приложение. Удалите эту строку из файла конфигурации, и вы не получите предупреждения.

Строго говоря, ваш src/scripts/main.js файл должен выглядеть так:

import { scaleLinear } from 'd3-scale';

var yScale = scaleLinear() // <-- note there's no `d3.`
    .domain([10, 1200])
    .range([0, 500]);

console.log(yScale(1200)); // 500

В этом случае вам может потребоваться настроить ваш файл конфигурации, в зависимости от того, что вы хотите сделать:

1. Добавьте d3-scale в свое приложение (рекомендуется)

Если вы действительно хотите включить d3-scale и его зависимости в пакет, который создается Rollup, чтобы вам не нужно было загружать D3 как отдельный тег <script>, вам нужно будет включить node-resolve, чтобы Rollup мог найти d3-scale исходный код для его включения.

Это то, что вам нужно сделать, если вы не хотите включать D3 с unpkg.com.

2. Сообщите Rollup, что такое d3-scale.

В настоящий момент ваше приложение работает, потому что window.d3 назначен D3. Это совершенно нормально и будет работать (вам даже не понадобится объявление import), но если вы хотите использовать более идиоматический подход к модулю ES без объединения d3-scale, вам нужно будет добавить в свою конфигурацию следующее:

import babel from 'rollup-plugin-babel';

export default {
  entry: 'src/scripts/main.js',
  dest: 'build/js/main.min.js',
  format: 'iife',

  // tell Rollup that d3-scale is an external package
  // and that it corresponds to `window.d3`
  external: ['d3-scale'],
  globals: {
    'd3-scale': 'd3'
  },

  plugins: [
    babel({
      exclude: 'node_modules/**',
    }),
  ],
};
person Rich Harris    schedule 25.04.2017
comment
Сначала я попробовал 1. Объединить d3-scale в ваше приложение. Я добавил вопрос. Как включить плагин node-resolve, чтобы Rollup мог найти исходный код d3-scale для его включения？ - person re1; 26.04.2017
comment
Вам вообще не нужно передавать какие-либо параметры - resolve() сам по себе должен работать в случае d3-scale - person Rich Harris; 26.04.2017