Babel zu Datei funktioniert. Babel über Webpack zu ist

Question

defekte Datei

Aus der folgenden Quelldatei:

import React from 'react'; 

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

Wenn ich babel direkt verwenden, kann ich die folgende Datei erzeugen:

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

ich webpack verwenden möchten erzeugen diese Datei, hier ist meine config:

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' 
    }, 
}; 

Wenn ich webpack verwenden, kommt es in der folgenden Datei:

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

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

ich nichts dagegen, die webpack Logik, aber es wird als Drop-in JSX Komponente als das erste Beispiel nicht funktionieren. Dies führt zu folgenden Fehlern und Warnungen:

Ich möchte einfach die gleiche Datei über Webpack erstellen.

---

Ich glaube, das Problem liegt bei dieser exports.default = React.createClass({ ... in diesem module.exports = require("React");

---

Versionen drehen:

• "reagieren": "^ 15.4.1"
• „reagieren -dom ":"^15.4.1 "
• " babel-core ":"^6,20.0 ",
• "babel-loader": "^ 6.2.9"
• "webpack": "^ 1.12.6"

Answer 1

Es war mehrere Probleme, aber die Art und Weise in einem JSX Modul zu bringen, wie bestimmt wird durch die webpack libraryTarget zu commonjs2 Einstellung.

Answer 2

Vergewissern Sie sich, konsequent tun:

import React from 'react'; 

. ..oder

require('react'); 

... in Ihrer Codebasis. Modulnamen unterscheiden zwischen Groß- und Kleinschreibung, aber Ihr Dateisystem ist möglicherweise nicht (insbesondere unter Mac oder Windows). Wenn das Webpack Ihren Code analysiert, können nicht übereinstimmende Fälle dazu führen, dass Module in die falsche Richtung aufgelöst werden. Haben nicht tun:

import React from 'React'; 

... oder

require('React'); 

Also, stellen Sie sicher, dass Sie nicht mit node_modules und verändert Gehäuse einen beliebigen Dateinamen dort verwirrte haben; Wenn Sie nur reguläre npm install Operationen ausführen, sollten Sie dort in Ordnung sein.

Answer 3

Die externals Config ist ein wenig seltsam, dass sein Verhalten von Ihrem output.libraryTarget sein commonjs betroffen ist. Mit dieser Einstellung ist Ihre externe Definition von:

{ react: 'React', ... } 

...übersetzt das Modul in module.exports = require('React'). Beachten Sie, dass dies auch der Grund ist, warum die Groß-/Kleinschreibung beachtet wird (diese Warnung könnte auch bedeuten, dass Sie das Modul mit verschiedenen Fällen angefordert haben, aber das ist in diesem Fall nicht der Fall).

Wenn Sie libraryTarget nicht auf diese Weise festgelegt hätten, wäre das typische Verhalten von var aufgetreten. Um dies außer Kraft setzen, Ihre Äußerlichkeiten ändern:

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