如何使用webpack捆绑d3 v4

Question

我使用带有webpack的D3 v3,单个包装很简单.现在D3 v4已经变成了模块化的独立包,我无法将它们捆绑到单个包中.

我在下面使用汇总提到了mbostock的文章,但它无法说它无法从index.js加载d3.谁能帮助我如何使用webpack捆绑它们？

编辑1: 我从汇总选项中删除了d3,汇总工作正常.我已经解释了以下步骤

1. D3 v4已安装.
2. 添加了汇总配置并存储到./dist/d3.min.js
3. 将webpack指向./dist/d3.min.js
4. 试图resolve.alias中的WebPack和要求("D3")的一个home.js. 但它没有运气说

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

5. 在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"]
         }

}

Answer 1

与 D3 v4 的汇总方法有很多不兼容之处，而 webpack\xe2\x80\x94yours 完全是一种明智的方法。

\n\n

您似乎错过了缩小步骤？（Rollup.js 创建d3.js，但 webpack.config.js 期望d3.min.js）

\n\n

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

\n\n

这个设置对我有用（使用 webpack v2）：

\n\n

home.js

\n\n

let d3 = require(\'d3\');

\n\n

rollup.config.js

\n\n

import npm from \'rollup-plugin-node-resolve\';\n\nexport default {\n  entry: \'./d3.bundle.js\',\n  format: \'umd\',\n  moduleName: \'d3\',\n  plugins: [npm({jsnext: true})],\n  dest: \'./dist/d3.js\'\n};\n

\n\n

d3.bundle.js

\n\n

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

\n\n

包.json

\n\n

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

\n\n

webpack.config.js

\n\n

module.exports = {\n\n  ...\n\n  resolve: {\n    alias: {\n      \'d3\': path.resolve(__dirname, \'dist/d3.min.js\')\n    }\n  },\n\n  ...\n\n};\n

\n