Question

  $ npm install d3-scale＆＃xA;＆＃xA; $ npm install --save-dev rollup rollup-plugin-babel babel-preset-es2015-rollup rollup-plugin-node-resolve＆＃xA;

＆＃xA;＆＃xA;

我创建了以下文件。

＆＃xA ;＆＃xA;

▼src / scripts / main.js

＆＃xA;＆＃xA;

  var yScale = d3.scaleLinear（）＆＃xA; .domain（[10,1200]）＆＃xA; .range（[0,500]）;＆＃xA;＆＃xA; console.log（yScale（1200））; // 500＆＃xA;

＆＃xA;＆＃xA;

我创建了以下文件。 < /p>

▼rollup.config.js

从'rollup-plugin-babel'导入babel; && #xA;从“d3-scale”导入{scaleLinear}; ＆＃xA;＆＃xA; export default {＆＃xA; entry：'src / scripts / main.js'，＆＃xA; dest：'build / js / main.min.js'，＆＃xA;格式：'iife'，＆＃xA;插件：[＆＃xA; babel（{＆＃xA; exclude：'node_modules / **'，＆＃xA;}），＆＃xA; ]，＆＃xA;};＆＃xA;

＆＃xA;＆＃xA;

  $ npm run build＆ #xA;

＆＃XA;＆＃XA; ＆＃XA; ＆＃XA; 汇总-c 
＆＃xA; 
＆＃XA; ＆＃XA; ⚠️'scaleLinear'是从外部模块“d3-scale”导入的，但＆＃xA;从未使用
＆＃xA; 
＆＃xA;＆＃xA;  以下文件是自动创建的 
＆＃xA;＆＃xA; ▼build / js / main.min.js 
＆＃xA;＆＃xA;  （function（）{＆＃xA;'use strict';＆＃xA;＆ #xA; var yScale = d3.scaleLinear（）。domain（[10,1200]）＆＃xA; .range（[0,500]）;＆＃xA; console.log（yScale（1200））; // 500＆＃XA;＆＃XA;}（））;＆＃XA;  
＆＃XA;＆＃XA; 
＆＃XA;＆＃XA;  我创建了以下文件。 
＆＃xA;＆＃xA; ▼index.html 
＆＃xA;＆＃xA;  ＆lt; script src =“https://unpkg.com/d3”＆gt;＆lt; / script＆gt;＆＃xA;＆lt; script src =“build / js / main.min.js”＆gt;＆lt; / script＆gt;＆＃xA ;  
＆＃xA;＆＃xA; 浏览器访问
＆＃xA;＆＃xA; ·控制台日志显示500 
＆＃xA; ＆＃xA; ·没有问题。
＆＃xA;＆＃xA; 
＆＃xA;＆＃xA;  但当我删除d3v4.js < /strong>


▼index.html

<scriptsrc =“build / js / main.min.js“＆gt;＆lt; / script＆gt;＆＃xA;  
＆＃xA;＆＃xA; 浏览器访问
＆＃xA;＆＃xA; ＆＃XA; 未捕获的ReferenceError：d3未定义
＆＃xA; 
＆＃xA;＆＃xA; 
＆＃xA;＆＃xA;  为什么我有包含为＆lt; script src =“https://unpkg.com/d3”＆gt;＆lt; / script＆gt; ？ 
＆＃xA;＆＃xA ; ·有没有办法避免加载＆lt; script src =“https://unpkg.com/d3”＆gt;＆lt; / script＆gt; ？
＆＃xA ;＆＃xA; ·即使只读取d3  -  scale，为什么它不能正常工作？
＆＃xA;＆＃xA; 
＆＃xA;＆＃xA;  2017/4/26 
＆＃xA;＆＃xA;  如何包含node-resolve插件，以便Rollup可以找到包含它的d3规模源代码？ 
＆＃xA;＆＃xA; ▼rollup.config.js 
＆＃xA;＆＃xA;  从'rollup-plugin-babel'导入babel; ＆＃xA;从'rollup-plugin-node-resolve'导入解析;＆＃xA;＆＃xA; export default {＆＃xA; entry：'src / scripts / main.js'，＆＃xA; dest：'build / js / main.min.js'，＆＃xA;格式：'iife'，＆＃xA;插件：[＆＃xA; babel（{＆＃xA; exclude：'node_modules / **'，＆＃xA;}），＆＃xA;解决（{＆＃xA; //我想知道在这里写什么＆＃xA;}）＆＃xA; ]＆＃XA;};＆＃XA;  
＆＃XA;

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>标记加载，则需要包含{{ 3}}插件，以便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/**',
    }),
  ],
};

为什么＆scale.cinear＆＃39;从未使用？为什么我必须包含为<script d3.v4.js =“”>？

1 个答案:

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

2。告诉Rollup d3-scale是什么