Question

我正在使用webpack和babel将我的客户端javascript文件打包到我的react应用程序中

我有一个问题，就是我正在使用的节点模块依赖项（request-promise-lite）中的某些代码似乎没有转换为Internet Explorer 11可以识别的格式

我有以下看起来像这样的webpack配置文件

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const OpenBrowserPlugin = require('open-browser-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

const BUILD_DIR = path.resolve(__dirname, 'dist');
const COMPONENT_BUILD_DIR = path.resolve(__dirname, 'dist/component/popularRecommendations');
const SRC_DIR = path.resolve(__dirname, 'src');
const PACKAGES_DIR = path.resolve(__dirname, 'packages');

const config = {
  entry: [
    'webpack-dev-server/client?http://localhost:8080', // WebpackDevServer host and port
    'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
    `${PACKAGES_DIR}/index.jsx` // Your appʼs entry point
  ],
  output: {
    path: COMPONENT_BUILD_DIR,
    filename: 'index.js'
  },
  node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?/,
        include: SRC_DIR,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.jsx?/,
        include: PACKAGES_DIR,
        loader: 'babel-loader'
      },
      {
        test: /\.jsx?/,
        loader: 'eslint-loader',
        exclude: /node_modules/
      },
      {
        test: /\.json?/,
        loader: 'json-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      hash: true,
      filename: 'index.html',
      template: path.resolve(__dirname, 'index.html')
    }),
    new CopyWebpackPlugin([{
      from: 'deploy/build.cake',
      to: BUILD_DIR
    },
    {
      from: 'deploy/build.ps1',
      to: BUILD_DIR
    },
    {
      from: 'deploy/config/',
      to: `${BUILD_DIR}/config/`
    },
    {
      from: 'external_css/cms_base.min.css',
      to: `${COMPONENT_BUILD_DIR}`
    }]),
    new OpenBrowserPlugin({ url: 'http://localhost:8080' }),
    new ManifestPlugin({
      fileName: 'asset-manifest.json'
    }),
    new BundleAnalyzerPlugin()
  ],
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

 module.exports = config;

以及.babelrc中的以下设置

{
    "presets" : ["es2015", "react"],
    "plugins": ["react-hot-loader/babel"]
}

由babel编译代码时

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
class RequestError extends Error {
  toString() {
    return this.message;
  }
}
exports.default = RequestError;
module.exports = exports["default"];
//# sourceMappingURL=RequestError.js.map

看起来像这样

/* 75 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
  value: true
});
class RequestError extends Error {
  toString() {
    return this.message;
  }
}
exports.default = RequestError;
module.exports = exports["default"];
//# sourceMappingURL=RequestError.js.map


/***/ }),

我假设应该将ES16语法（即“ RequestError扩展错误类”）转换为某种较旧的javascript版本（例如“ function（）”语法），以便IE 11可以对其进行编译。

有人知道我在做什么错吗？

Babel无法转换代码

0 个答案: