为什么'scaleLinear'从来没有用过？为什么我必须包含为<script d3.v4.js>？

Question

$ npm install d3-scale

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

我创建了以下文件。

▼src/scripts/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' 但是从未使用过

自动创建了以下文件

▼build/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 is not defined

为什么我要收录成<script src="https://unpkg.com/d3"></script>？

・有没有办法避免加载<script src="https://unpkg.com/d3"></script>？

・为什么只读取d3 - scale 还是不能正常工作？

2017/4/26

如何引入node-resolve插件，Rollup才能找到d3-scale源码引入？

▼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
    })
  ]
};

Answer 1

您收到该消息是因为您正在将 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 捆绑到您的应用中（推荐）

如果你想在 Rollup 创建的包中实际包含 d3-scale 及其依赖项，这样你就不需要将 D3 作为单独的 <script> 标签加载，你需要包含node-resolve 插件以便 Rollup 可以找到 d3-scale 源代码来包含它。

如果您不想包含来自 unpkg.com 的 D3，则需要执行此操作。

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

为什么'scaleLinear'从来没有用过？为什么我必须包含为<script d3.v4.js>？

Why 'scaleLinear' never used？ and Why I have to included as a <script d3.v4.js>？

d3.js

rollupjs

1。将 d3-scale 捆绑到您的应用中（推荐）

2。告诉 Rollup d3-scale 是什么