Webpack Babel文件正在运行。Babel通过网页包发送到文件已损坏

从以下源文件：

import React from 'react';

export default React.createClass({
  render() {
    return (
      <div>Foo</div>
    );
  }
});

我想使用webpack生成此文件，以下是我的配置：

module.exports = {
  entry: './lib/progress-label.js',
  output: {
    path: __dirname + '/example',
    filename: 'bundle.js',
    libraryTarget: 'commonjs'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel'
      },
    ]
  },
  externals: {
    'react': 'React',
    'react-dom': 'ReactDOM'
  },
};

当我使用webpack时，它会生成以下文件：

(function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};

/******/    // The require function
/******/    function __webpack_require__(moduleId) {

/******/        // Check if module is in cache
/******/        if(installedModules[moduleId])
/******/            return installedModules[moduleId].exports;

/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            exports: {},
/******/            id: moduleId,
/******/            loaded: false
/******/        };

/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/        // Flag the module as loaded
/******/        module.loaded = true;

/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }


/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;

/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;

/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";

/******/    // Load entry module and return exports
/******/    return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {

    'use strict';

    Object.defineProperty(exports, "__esModule", {
      value: true
    });

    var _react = __webpack_require__(1);

    var _react2 = _interopRequireDefault(_react);

    function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

    exports.default = _react2.default.createClass({
      displayName: 'progress-label',
      render: function render() {
        return _react2.default.createElement(
          'div',
          null,
          'Foo'
        );
      }
    }); // export default {
    //   foo: true,
    // };

/***/ },
/* 1 */
/***/ function(module, exports) {

    module.exports = require("React");

/***/ }
/******/ ])));

我不介意webpack逻辑，但作为第一个示例，它不能作为JSX组件的一部分工作。它会导致以下错误和警告：

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `component`.

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `component`.

./~/react/react.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

...

我只是想通过webpack创建相同的文件

---

我认为问题在于这个

exports.default=React.createClass（{…

变成这个

module.exports=require（“React”）；

---

版本：

• “反应”：“^15.4.1”
• “反应dom”：“^15.4.1”
• “巴别塔核心”：“^6.20.0”
• “巴别塔加载器”：“^6.2.9”
• “网页包”：“^1.12.6”

---

确保你一直在做：

import React from 'react';

…或

…在整个代码库中。模块名称区分大小写，但您的文件系统可能不区分大小写（尤其是在Mac或Windows上）。当webpack分析您的代码时，不匹配的情况可能会导致模块解析错误。请执行而不是执行以下操作：

import React from 'React';

…或

---

另外，请确保您没有弄乱

节点模块，也没有更改任何文件名大小写；如果您只是在执行常规的
npm安装
操作，您在那里应该不会有问题。
externals
配置有点奇怪，因为它的行为受到
输出.libraryTarget
的影响monjs
。通过该设置，您的外部定义：

{ react: 'React', ... }

…将模块转换为
module.exports=require（'React'）
。请注意，这也是出现区分大小写警告的原因（该警告也可能表示您需要具有不同大小写的模块，但本例中并非如此）

如果您没有以这种方式设置
libraryTarget
，则会发生
var
更典型的行为。若要覆盖此设置，请将外部设置更改为：

{
  'react':     'var React',
  'react-dom': 'var ReactDOM'
}

这是多个问题，但按照预期引入JSX模块的方法是将webpack
libraryTarget
设置为
commonjs2
Hmm。您看到上面的任何编辑了吗？构建它没有任何问题，唯一的问题是与其他代码库的集成。整个源代码都在第一条语句中。MaY因为其他代码库的导入/要求不好。我会对您的
节点\ u模块进行全局搜索，以查找潜在问题。这一切看起来可疑的原因是
模块.exports=require（“React”）；
存在于您的网页文件中。如果
外部文件
工作正常，它应该包含
module.exports=React
，而不包含
要求
。我试图解决的问题实际上是>我相信问题在于此
exports.default=React.createClass({…
变成这个
module.exports=require（“React”）
我不知道你的意思是什么，
React.createClass
在模块
0
中，模块
1
是
React
要解决的问题。请更改此问题的标题。目前来看，此标题不适合任何StackExchange网站，除非您的问题直接涉及错误来自表情符号的使用。此错误发生在使用webpack编译时，或在
ReactDOM.render之后的浏览器中。是否有任何原因导致您使用externals（是否从html中的其他位置加载React）？FWIW我喜欢旧标题Interest finding，但不幸的是，它仍然导致react被导出，而不是组件
module.exports=react；
require('React');

{ react: 'React', ... }

{
  'react':     'var React',
  'react-dom': 'var ReactDOM'
}