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.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

2 个答案: