2015-07-24 20 views
11

Sto utilizzando this tutorial per configurare un progetto React.js con webpack. Il file webpack.config.js di seguito è quasi una copia esatta (eccetto il fatto che sto utilizzando una cartella app e "dist") e sto aggiungendo anche d3.js come external. Poiché React viene aggiunto come external, mi consente di eseguire require('react') in qualsiasi file della mia app senza includerlo nel pacchetto. Vorrei fare lo stesso con d3.js e averlo installato come node_module, e l'ho elencato nell'area esterna della mia configurazione del webpack, ma quando faccio lo require('d3') ricevo un messaggio di errore che non è disponibile.utilizzando d3.js come pacchetto web esterno

Come posso utilizzare d3 (o jQuery per quella materia) come esterno se lo ho installato come nodo_modulo?

Questa è la mia messa a punto del progetto

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

risposta

18

So che questa domanda è stato aperto un po ', ma spero che questa risposta è ancora utile!

Se è stato installato d3 (o jQuery) come nodo_modulo, è possibile utilizzare il pacchetto Web ProvidePlugin per associare una chiave arbitraria a un modulo.

La chiave sarà quindi disponibile per richiedere ovunque nella tua applicazione webpack.

E.g. webpack.config.js

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

Poi, nel my-file.js

var d3 = require('d3')

Speranza che aiuta!

+0

Puoi aiutarmi a trovare la risposta a questa domanda molto simile: https://stackoverflow.com/questions/37912988/how-to-load-c3js-properly-into-webpack? – PedroD