2015-06-04 21 views
5

Ho un progetto scritto in JSX e utilizzo il webpack per creare il file main.js.ReactJs + webpack + ie + console.log

Questo è il mio webpack.config.js:

var path = require('path'); 

module.exports = { 
    entry:{ main: [ 
      'consolelog', 
      'es5-shim', 
      'es5-shim/es5-sham', 
      'es6-shim', 
      'es6-shim/es6-sham', 
"./app/client" 
     ]}, 

    output: { 
    filename: '[name].js', 
    chunkFilename: '[id].chunk.js', 
    path: path.join('public', 'js'), 
    publicPath: '/js/' 
    }, 

    module: { 
    loaders: [ 
     { test: /\.js$/, loader: 'jsx-loader?harmony&insertPragma=React.DOM' }, 
     { test: require.resolve('react'), loader: 'expose?React' }, 

    ] 
    } 
}; 

Il mio problema è che non riesco a fare il mio progetto di lavoro in IE (I test con IE9 al momento). Dice sempre "la console non è definita".

Con Firefox e Chrome funziona perfettamente.

Cosa faccio di sbagliato?

Ho provato anche con console-polyfill ma lo stesso risultato.

IE9 dice che non riesce a questa riga di codice javascript:

_deprecationWarning2['default']('CollapsableNav', 'CollapsibleNav', 'https://github.com/react-bootstrap/react-bootstrap/issues/425#issuecomment-97110963'); 

Ma non c'è console.log su di esso.

Cosa faccio di sbagliato?

Grazie in anticipo!

+0

Puoi condividere anche le linee di codice circostanti, per favore? A volte il problema potrebbe essere appena sopra, o appena sotto, la linea verso cui ti stai dirigendo. Cosa succede se si crea un oggetto console finto prima di tutto il codice? 'window.console = window.console || {log: function() {}, error: function() {}, warn: function() {}}; '? – Sampson

+0

Funziona e va oltre. Copierò qui la riga ma sembra che sia React-tools che usa un sacco di console.log L'errore successivo dice: L'oggetto non supporta la proprietà o il metodo '__defineGetter__' – user1870634

+0

Okay apparentemente è il pacchetto localStorage che lo usa e non è trasformato. Come posso aggiungerlo automaticamente con il webpack? Quindi non devo farlo manualmente ogni volta. Grazie per il tuo aiuto – user1870634

risposta

3

Nei browser che non supportano la console, è necessario rimuovere le funzioni della console dal codice. Per il webpack è possibile utilizzare webpack-strip. Un modo per utilizzare è la seguente:

var WebpackStrip = require('webpack-strip') 

Quindi aggiungere { test: /\.js$/, loader: WebpackStrip.loader('console.log', 'console.error') } ai caricatori per mettere a nudo console.log e console.error

{ 
    module: { 
     loaders: [ 
      { test: /\.js$/, loader: 'jsx-loader?harmony&insertPragma=React.DOM' }, 
      { test: require.resolve('react'), loader: 'expose?React' }, 
      { test: /\.js$/, loader: WebpackStrip.loader('console.log', 'console.error') } 
     ] 
    } 
}; 
+0

Grazie. L'ho provato. Ho messo var WebpackStrip = require ('webpack-strip') in webpack.config.js e aggiungere la linea dei caricatori. Ma sfortunatamente non ha funzionato. Ciò che è strano è che posso ancora vedere console.log e console.error nel mio file generato "main.js". Come è possibile? Grazie per il tuo aiuto – user1870634

+0

Hai controllato che il modulo webpack-strip sia stato caricato correttamente? – Mark

+0

Come posso verificarlo? – user1870634

0

Dovete mettere entrambi i caricatori nella stessa linea. Invece di utilizzare loader, utilizzare loaders e passare un array con entrambi i caricatori.