Использование d3.js в качестве внешнего в webpack

Я использую этот учебник, чтобы настроить проект React.js с помощью webpack. Ниже приведена точная копия webpack.config.js(за исключением того, что я использую папку app и 'dist'), и я также добавляю d3.js как external. Поскольку React добавлен как external, он позволяет мне делать require('react') в любом из моих файлов приложений, не включая его в комплект. Я хочу сделать то же самое с d3.js и установил его как node_module и перечислил его во внешней области моей конфигурации webpack, но когда я делаю require('d3'), я получаю сообщение об ошибке, которое оно недоступно.

Как я могу использовать d3 (или jQuery, если на то пошло) как внешний, если я установил его как node_module?

это моя настройка проекта

/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']
    }
}

Ответы

Ответ 1

Я знаю, что этот вопрос был открыт некоторое время, но, надеюсь, этот ответ по-прежнему полезен!

Если вы установили d3 (или jQuery) в качестве node_module, вы можете использовать webpack ProvidePlugin для привязки произвольной клавиши к модулю.

Ключ будет доступен для использования в любом месте вашего веб-приложения.

например. webpack.config.js

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

Затем в my-file.js

var d3 = require('d3')

Надеюсь, что это поможет!