Question

来自以下源文件：

import React from 'react';

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

当我直接使用babel时，我能够生成以下文件：

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
var React = require('react');

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

我想使用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");

版本：

＆＃34;反应＆＃34;：＆＃34; ^ 15.4.1＆＃34;，
＆＃34; react-dom＆＃34;：＆＃34; ^ 15.4.1＆＃34;
＆＃34; babel-core＆＃34;：＆＃34; ^ 6.20.0＆＃34;，
＆＃34; babel-loader＆＃34;：＆＃34; ^ 6.2.9＆＃34;，
＆＃34; webpack＆＃34;：＆＃34; ^ 1.12.6＆＃34;

Answer 1

确保你一直在做：

import React from 'react';

...或

require('react');

...贯穿整个代码库。模块名称区分大小写，但您的文件系统可能不是（特别是在Mac或Windows上）。当webpack分析您的代码时，不匹配的情况可能导致模块解决错误的事情。不执行：

import React from 'React';

...或

require('React');

另外，请确保您没有弄乱node_modules并更改了任何文件名;如果您只是进行常规npm install操作，那么您应该没事。

Answer 2

externals配置有点奇怪，因为它的行为受output.libraryTarget commonjs的影响。使用该设置，您的外部定义为：

{ react: 'React', ... }

...会将模块翻译为module.exports = require('React')。请注意，这也是出现区分大小写警告的原因（该警告也可能意味着您需要具有不同情况的模块，但在这种情况下情况并非如此）。

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

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

Answer 3

这是多个问题，但是按照预期引入JSX模块的方法是将webpack libraryTarget设置为commonjs2。

Babel to File正在运行。通过Webpack to File的Babel已损坏

3 个答案: