如何使用webpack

Question

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

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

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

1. D3 v4已安装。
2. 添加了汇总配置并存储到./dist/d3.min.js
3. 将webpack指向./dist/d3.min.js
4. 在webpack中尝试了 resolve.alias ，并在一个home.js中要求（＆＃34; d3＆＃34;）但没有运气说

  

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

1. 在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

有quite a few与D3 v4的汇总方法不兼容，而webpack-yours完全是一种明智的做法。

看起来你错过了缩小步骤？ （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')
    }
  },

  ...

};