ReactJs + webpack + ie + console.log

Question

我有一个用 JSX 编写的项目，我使用 webpack 构建 main.js 文件。

这是我的 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' },

    ]
  }
};

我的问题是我无法让我的项目在 IE 下运行（我目前使用 IE9 进行测试）。它总是说 "console is undefined".

Firefox 和 Chrome 完美运行。

我做错了什么？

我也尝试使用 console-polyfill 但结果相同。

IE9 表示它在 javascript 代码的这一行失败：

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

但是上面没有console.log

我做错了什么？

提前致谢！

Answer 1

在不支持控制台的浏览器中，您需要从代码中删除控制台功能。对于 webpack，你可以使用 webpack-strip。一种使用方法如下：

var WebpackStrip = require('webpack-strip')

然后将 { test: /\.js$/, loader: WebpackStrip.loader('console.log', 'console.error') } 添加到加载程序以剥离 console.log 和 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') }
        ]
    }
};

Answer 2

您必须将两个加载器放在同一行。不要使用 loader，而是使用 loaders 并传递一个包含两个加载器的数组。

ReactJs + webpack + ie + console.log

ReactJs + webpack + ie + console.log

javascript

internet-explorer

reactjs

webpack