在webpack中使用d3.js作为外部

Question

我正在使用本教程使用webpack设置React.js项目.下面的webpack.config.js几乎是一个精确的副本(除了我使用的是app'dist'文件夹),我还添加了d3.js作为external.因为React被添加为external允许我require('react')在我的任何应用程序文件中执行而不将其包含在捆绑包中.我希望做同样d3.js的事情,并将其安装为node_module,并将其列在我的webpack配置的外部区域,但是当我这样做时,require('d3')我收到一条错误消息,表明它不可用.

d3如果我将它安装为node_module,我如何使用(或jQuery)作为外部？

这是我的项目设置

/app
/dist
/node_modules
package.json
webpack.config.js

module.exports = {
    entry: './app/index.jsx',
    output: {
        path: './dist',
        filename: 'bundle.js', //this is the default name, so you can skip it
        //at this directory our bundle file will be available
        //make sure port 8090 is used when launching webpack-dev-server
        publicPath: 'http://localhost:8090/assets'
    },
    module: {
        loaders: [
            {
                //tell webpack to use jsx-loader for all *.jsx files
                test: /\.jsx$/,
                loader: 'jsx-loader?insertPragma=React.DOM&harmony'
            }
        ]
    },
    externals: {
        //don't bundle the 'react' npm package with our bundle.js
        //but get it from a global 'React' variable

        'react': 'React',
        'd3': 'd3'
    },
    resolve: {
        modulesDirectories: ['app', 'node_modules'],
        extensions: ['', '.js', '.jsx']
    }
}

Answer 1

我知道这个问题已经开放了一段时间,但希望这个答案仍然有用!

如果已将d3(或jQuery)安装为node_module,则可以使用webpack ProvidePlugin将任意键绑定到模块.

然后,您的webpack应用程序中的任何位置都可以使用密钥.

例如webpack.config.js

{
 ...lots of webpack config here...
 ...
 plugins: [
    new webpack.ProvidePlugin({
        d3: 'd3',
        $: 'jquery'
    })
 ]
 ...
}

然后在my-file.js中

var d3 = require('d3')

希望有所帮助!