Question

我尝试使用webpack将React整合到Angular 1.x内。

我有一个调用React的简单指令：

 app.directive('snaggsList', function(){
      return{
          restrict: 'E',
          scope:{},
          link:function(scope, el, attrs){
                 ReactDOM.render(React.createElement(InfiniteListSnaggs, null), el[0]);
          }
      }
  });

并且我的React文件运行一些逻辑并生成2000个对象的列表，其中每个项目都是其他组件。

在plunker中，当我按原样使用list-item.js时，一切正常，本地也正常。

但是，当我使用JSX表单时，它不起作用。

请考虑以下模板list-item.jsx：

var SnaggsItem = React.createClass({
    render: function(){
        return <article>
                <div className="title">
                 {this.props.minutesAgo} minutes ago
                </div>   
            </article>
    }
});

module.exports = SnaggsItem;

我的webpack.config.js看起来像：

module.exports = {
    entry: {        
        listItem: [
            './app/scripts/react/list-item.jsx'
        ]
    },
    output: {
        path: './app/scripts/react/build',
        filename: '[name]_c.js',
        library: "listExample",
        libraryTarget: "umd"
    },
    module: {
        loaders: [
            { test: /\.jsx?$/, exclude: /node_modules/, loader: "jsx-loader"}
        ]
    }
};

所以从命令行运行：webpack并获取名为的新生成文件： listItem_c.js我将其添加到index.html

当我运行客户端时，我收到错误：

angular.js：13236 ReferenceError：未定义SnaggsItem。

这是listItem_c.js：

的内容

(function webpackUniversalModuleDefinition(root, factory) {
    if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory();
    else if(typeof define === 'function' && define.amd)
        define([], factory);
    else if(typeof exports === 'object')
        exports["listExample"] = factory();
    else
        root["listExample"] = factory();
})(this, function() {
return /******/ (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__) {

    module.exports = __webpack_require__(1);


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


    var SnaggsItem = React.createClass({displayName: "SnaggsItem",
        render: function(){
            return React.createElement("article", null, 
                    React.createElement("div", {className: "title"}, 

                            React.createElement("span", {className: "title-time"}, 
                                this.props.minutesAgo, " minutes ago"
                            )
                        )
                    ), 

                )
        }
    });

    module.exports = SnaggsItem;

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

BTW如果将var SnaggsItem = React.createClass( ...)复制到其他文件 - 一切正常。

由于某种原因，InfiniteListSnaggs无法找到已编译的组件SnaggsItem。

请帮忙，

我在这里重现了错误： PLUNKR

ReferenceError：尝试通过web pack加载编译的源时，未定义“component”（使用demo）

0 个答案: