sử dụng d3.js làm bên ngoài trong gói web

Question

Tôi đang sử dụng this tutorial để thiết lập dự án React.js bằng gói webpack. Webpack.config.js bên dưới gần như là bản sao chính xác (ngoại trừ việc tôi đang sử dụng thư mục app và 'dist'), và tôi cũng thêm d3.js làm external. Vì React được thêm vào là external, nó cho phép tôi làm require('react') trong bất kỳ tệp ứng dụng nào của tôi mà không bao gồm nó trong gói. Tôi muốn làm tương tự với d3.js và đã cài đặt nó như là một node_module, và liệt kê nó trong khu vực bên ngoài của cấu hình webpack của tôi, nhưng khi tôi làm require('d3') tôi nhận được một thông báo lỗi rằng nó không có sẵn.

Làm cách nào tôi có thể sử dụng d3 (hoặc jQuery cho vấn đề đó) làm bên ngoài nếu tôi đã cài đặt nó làm nút_module?

này được thiết lập dự án của tôi

/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

Tôi biết câu hỏi này đã được mở một thời gian, nhưng hy vọng câu trả lời này vẫn còn hữu ích!

Nếu bạn đã cài đặt d3 (hoặc jQuery) làm nút_module, bạn có thể sử dụng gói webPlugPlugin để gán khóa tùy ý vào mô-đun.

Sau đó, khóa sẽ có sẵn để yêu cầu bất cứ nơi nào trong ứng dụng webpack của bạn.

Ví dụ: webpack.config.js

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

Sau đó, trong my-file.js

var d3 = require('d3')

Hy vọng rằng sẽ giúp!