Работает Babel to File. Бабель через Webpack Файл разбит

Question

из следующего исходного файла:

import React from 'react'; 

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

Когда я использую столпотворение непосредственно, я в состоянии произвести следующий файл:

'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");

---

Версии:

• "реагируют": "^ 15.4.1",
• «реагируют -dom ":"^15.4.1 "
• " babel-core ":"^6.20.0 ",
• "столпотворение-погрузчик": "^ 6.2.9",
• "WebPack": "^ 1.12.6"

Answer 1

Это было несколько вопросов, но способ принести в модуле JSX по назначению является путем установки WebPack libraryTarget в commonjs2.

Answer 2

Убедитесь, что вы постоянно делаете:

import React from 'react'; 

. .. или

require('react'); 

... на всей вашей кодовой базе. Имена модулей чувствительны к регистру, но ваша файловая система может не быть (особенно на Mac или Windows). Когда webpack анализирует ваш код, несовпадение случаев может привести к тому, что модули будут устранены неправильно. У не сделать:

import React from 'React'; 

... или

require('React'); 

Кроме того, убедитесь, что вы не запутались с node_modules и изменил любое имя файла корпус там; если вы просто делаете регулярные операции npm install, вы должны быть в порядке.

Answer 3

Конфигурация externals немного странна, так как на вашем поведении влияет output.libraryTarget, являющееся commonjs. С этой установкой ваше внешнее определение:

{ react: 'React', ... } 

...преобразует модуль в module.exports = require('React'). Обратите внимание, что это также вызывает предупреждение с учетом регистра (это предупреждение также может означать, что вам нужен модуль с разными случаями, но в данном случае это не так).

Если вы не установили libraryTarget таким образом, более типичное поведение var было бы выполнено. Чтобы изменить это, изменить внешние для:

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