javascript - 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 进行测试)。 它总是说“控制台未定义”。

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。日志 和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') }
        ]
    }
};