如何使用 webpack 捆绑 d3 v4答案

【问题标题】：How to bundle d3 v4 using webpack如何使用 webpack 捆绑 d3 v4
【发布时间】：2017-03-08 07:08:04
【问题描述】：

我使用的是带有 webpack 的 D3 v3，这很简单，只需一个包。现在 D3 v4 已经成为具有单独包的模块化，我无法将它们捆绑到单个包中。

我已经使用汇总在下面提到了 mbostock 的 article，但它没有说它无法从 index.js 加载 d3。谁能帮助我如何使用 webpack 捆绑它们？

编辑 1： 我从汇总选项中删除了 d3 并且汇总工作正常。我已经解释了以下步骤

已安装 D3 v4。
添加汇总配置并存储到 ./dist/d3.min.js
将 webpack 指向 ./dist/d3.min.js
在 webpack 中尝试了 resolve.alias，并在一个 home.js 中尝试了 require("d3")。但它说没有运气

无法解析 home.js 中的模块 d3

在 home.js 中尝试过 webpack.Provideplugin。还是上面的错误。

谁能帮我加载这个 d3 吗？

Rollup.js

import node from "rollup-plugin-node-resolve";

export default {
  entry: "index.js",
  format: "umd",
  moduleName: "d3",
  plugins: [node()],
  dest: "./dist/d3.js"
};

index.js

export * from "d3-selection";
export * from "d3-zoom";
export * from "d3-scale";
export * from "d3-drag";
export * from "d3-force";
export * from "d3-axis";

webpack.config.js

var webpack = require('webpack')
var path = require('path')

module.exports = {

        entry:    [
            //"./dist/d3-combined.js",
            "./client/home.js"
            ,"./client/pages.js"
            ,"./client/graph.js"
            ,"./client/orient_databases.js"
            ,"./node_modules/d3/d3.js",
            ,"./public/jquery-2.2.4.min.js"

        ]
        ,output: { 
            path: path.join(__dirname,'dist')
          // ,path: '/static'
            ,publicPath: 'http://localhost:3000/scripts/'
            ,filename: 'bundle.js'
        }
        ,plugins :[
              new webpack.ProvidePlugin({
                    jquery : "jquery"
                }),  

           new webpack.optimize.UglifyJsPlugin({
              compress: {
                warnings: false
              }
            })
        ]
        ,module: {
            // avoid webpack trying to shim process
            noParse: /es6-promise\.js$/,
            loaders: [
              {
                test: /\.vue$/,
                loader: 'vue'
              },
              {
                test: /\.js$/,
                // excluding some local linked packages.
                // for normal use cases only node_modules is needed.
                exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
                loader: 'babel-loader',
                query : {
                    presets : ['es2015']
                    //,optional : ["runtime"]
                }
              }
            ]
          }

         ,resolve : {
            //root : [path.resolve('./node_modules')],
            alias : [ {"d3": path.join(__dirname,"dist/d3.min.js") } ],
            modulesDirectories : ["node_modules"]
         }

}

【问题讨论】：

你为什么在 Webpack 中使用 rollup？？
我正在使用汇总将特定的 d3 模块（如 d3-selection、d3-scale 等）捆绑为 d3。从技术上讲，如果我们使用完整的 d3 模块，则不需要。
你只希望特定模块进入你的 webpack 包？
现在不需要。但我认为这样做是保持资产规模最佳的最佳实践。想知道这是哪里失败了？更奇怪的是，即使在安装 d3 模块并使用 webpack.Providenewplugin 之后，d3 模块也没有被解析！

标签： d3.js webpack

【解决方案1】：

quite a few 与 D3 v4 的汇总方法和 webpack 不兼容——你的方法完全是明智的。

您似乎缺少缩小步骤？（Rollup.js 创建 d3.js，但 webpack.config.js 需要 d3.min.js）

webpack v2 的新配置也有可能有一些相关的修复。

此设置适用于我（使用 webpack v2）：

home.js

let d3 = require('d3');

rollup.config.js

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

export default {
  entry: './d3.bundle.js',
  format: 'umd',
  moduleName: 'd3',
  plugins: [npm({jsnext: true})],
  dest: './dist/d3.js'
};

d3.bundle.js

export * from "d3-selection";
export * from "d3-zoom";
export * from "d3-scale";
export * from "d3-drag";
export * from "d3-force";
export * from "d3-axis";

package.json

{

  ...

  "scripts": {
    "prepublish": "rollup -c && uglifyjs dist/d3.js -c -m -o dist/d3.min.js"
  },

  ...
}

webpack.config.js

module.exports = {

  ...

  resolve: {
    alias: {
      'd3': path.resolve(__dirname, 'dist/d3.min.js')
    }
  },

  ...

};

【讨论】：