Question

我在两个git repos中有一些React代码。目标是npm发布一个React组件repo 1并在repo 2中使用它。

在回购1中，我定义了Hello.jsx：

'use strict';
import React from 'react';

export default class Hello extends React.Component {
    render() {
        return (<div>hello world Nivesh</div>);
    }
};

在回购2中，我定义了HelloWorld.jsx：

import React from 'react';
import Hello from 'repo1';

export default class HelloWorld extends React.Component {
    render() {

        console.log(JSON.stringify(Hello));
        return (
        <div>
            <Hello/>
        </div>
        );
    }
}

我正在尝试使用webpack在回购1中捆绑代码，但是当我尝试在回购2中导入Hello时，出现此错误。

VM10112 main-bundle.js：660警告：React.createElement：类型无效-预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到了：对象。您可能忘记了从定义文件中导出组件。检查HelloWorld的渲染方法。在HelloWorld中

控制台日志显示其导入的对象为{}。

但是，如果我只使用babel而不是webpack，我就能使其正常工作。

我的webpack.config.js：

'use strict';

module.exports = {
mode: 'development',

entry: {
    hello: './src/Hello.jsx'
},
// output: {
    // filename: 'bundle.js',
    // libraryTarget: 'umd',
    // libraryExport: ['Hello'],
// },

plugins: [
    new MiniCssExtractPlugin({
        filename: 'cssBundle.css'
    }),
    // new HtmlWebpackPlugin(),
    // new CleanWebpackPlugin(),
],

module: {
    rules: [
        {
            test: /\.(js|jsx)$/,
            use: [
                {
                    loader: 'babel-loader',
                    query: {
                        presets: ['react', 'es2015']
                    }
                },
                // 'eslint-loader'
            ],
            exclude: [/node_modules/, /build/, /dist/]
        },
        {
            test: /\.(sa|sc|c)ss$/,
            use: [
                {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        hmr: process.env.NODE_ENV === 'development',
                        modules: true,
                        localIdentName: '[name]__[local]',
                    },
                },
                'css-loader',
                'sass-loader',
            ],
            exclude: /node_modules/
        }
    ]
},

resolve: {
    extensions: ['.js', '.jsx', '.scss', '.css']
},

devtool: 'source-map',

devServer: {
    compress: true,
    inline: true,
    host: '0.0.0.0',  // to allow connection from outside of localhost
    port: 8081,
},

};

生成的webpack生成了js：

/******/ (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] = {
/******/            i: moduleId,
/******/            l: false,
/******/            exports: {}
/******/        };
/******/
/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/        // Flag the module as loaded
/******/        module.l = 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;
/******/
/******/    // define getter function for harmony exports
/******/    __webpack_require__.d = function(exports, name, getter) {
/******/        if(!__webpack_require__.o(exports, name)) {
/******/            Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/        }
/******/    };
/******/
/******/    // define __esModule on exports
/******/    __webpack_require__.r = function(exports) {
/******/        if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/            Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/        }
/******/        Object.defineProperty(exports, '__esModule', { value: true });
/******/    };
/******/
/******/    // create a fake namespace object
/******/    // mode & 1: value is a module id, require it
/******/    // mode & 2: merge all properties of value into the ns
/******/    // mode & 4: return value when already ns object
/******/    // mode & 8|1: behave like require
/******/    __webpack_require__.t = function(value, mode) {
/******/        if(mode & 1) value = __webpack_require__(value);
/******/        if(mode & 8) return value;
/******/        if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/        var ns = Object.create(null);
/******/        __webpack_require__.r(ns);
/******/        Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/        if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/        return ns;
/******/    };
/******/
/******/    // getDefaultExport function for compatibility with non-harmony modules
/******/    __webpack_require__.n = function(module) {
/******/        var getter = module && module.__esModule ?
/******/            function getDefault() { return module['default']; } :
/******/            function getModuleExports() { return module; };
/******/        __webpack_require__.d(getter, 'a', getter);
/******/        return getter;
/******/    };
/******/
/******/    // Object.prototype.hasOwnProperty.call
/******/    __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";
/******/
/******/
/******/    // Load entry module and return exports
/******/    return __webpack_require__(__webpack_require__.s = "./src/Hello.jsx");
/******/ })
/************************************************************************/
/******/ ({

/***/ "./src/Hello.jsx":
/*!***********************!*\
  !*** ./src/Hello.jsx ***!
  \***********************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


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

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = __webpack_require__(/*! react */ "react");

var _react2 = _interopRequireDefault(_react);

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Hello = function (_React$Component) {
    _inherits(Hello, _React$Component);

    function Hello() {
        _classCallCheck(this, Hello);

        return _possibleConstructorReturn(this, (Hello.__proto__ || Object.getPrototypeOf(Hello)).apply(this, arguments));
    }

    _createClass(Hello, [{
        key: 'render',
        value: function render() {
            return _react2.default.createElement(
                'div',
                null,
                'hello world Nivesh'
            );
        }
    }]);

    return Hello;
}(_react2.default.Component);

;

exports.default = Hello;

/***/ }),

/***/ "react":
/*!**************************************************************************************!*\
  !*** external {"commonjs":"react","commonjs2":"react","amd":"React","root":"React"} ***!
  \**************************************************************************************/
/*! no static exports found */
/***/ (function(module, exports) {

module.exports = undefined;

/***/ })

/******/ });
//# sourceMappingURL=hello.js.map

如果我仅使用babel，则生成的代码如下：

'use strict';

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

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Hello = function (_React$Component) {
    _inherits(Hello, _React$Component);

    function Hello() {
        _classCallCheck(this, Hello);

        return _possibleConstructorReturn(this, (Hello.__proto__ || Object.getPrototypeOf(Hello)).apply(this, arguments));
    }

    _createClass(Hello, [{
        key: 'render',
        value: function render() {
            return _react2.default.createElement(
                'div',
                null,
                'hello world Nivesh'
            );
        }
    }]);

    return Hello;
}(_react2.default.Component);

exports.default = Hello;
;
//# sourceMappingURL=Hello.js.map

我读过其他文章并尝试过

import Hello from ...

vs

import {Hello} from ...

那不是问题。我的问题主要是关于javascript中的导入机制。

Webpack生成文件的较短版本：

(function(modules) {

/******/    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] = {
/******/            i: moduleId,
/******/            l: false,
/******/            exports: {}
/******/        };
/******/
/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/        // Flag the module as loaded
/******/        module.l = true;
/******/
/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }
    return __webpack_require__(__webpack_require__.s = "./src/Hello.jsx");
}) 
({
   'src/Hello.jsx': (function() {

   ...
   exports.default = Hello;
   })
})

我正试图了解webpack输出中发生的情况，因此请通过以下声明更正我。

似乎webpack生成的文件具有匿名函数，并且传递给该匿名函数的参数是一个对象：

{'src / Hello.jsx'：函数...}

，并且当此匿名函数运行时，它将调用函数“ webpack_require ”，该函数返回module.exports（我假设返回的是在Hello生成的函数中定义的“ exports.default = Hello;” .jsx。所以在我看来，webpack文件正在导出“ Hello”。

我不太熟悉javascript的导入/导出机制。我了解在javascript中定义模块的方式有很多。但是我不确定是否可以另一种方式导入某种方式导出的内容。例如，在webpack文件中导出Hello的方式，可以通过以下方式从jsx文件中导入

：

import Hello from ...?

当我将babel的输出与webpack进行比较时，babel输出的最后一行是

exports.default = Hello;

在我看来，当babel输出使用“ exports.default”导出Hello时，可以使用“从y导入x”来导入。

我知道webpack允许在输出部分中指定libraryTarget，并且在那里看到了不同的选项。但是我不确定哪种方法可以导入“从y导入x”之类的东西。

https://webpack.js.org/configuration/output/#outputlibrarytarget

Answer 1

应该是

import Hello from 'repo1/hello.jsx';

因为默认情况下，Webpack仅在要使用jsx扩展名默认导入的情况下才解析js文件的类型，因此也必须指定扩展名文件

就像我在这里

import React, {Component} from "react";

class AddUserModal extends Component {
}

export default AddUserModal;

然后在另一个文件中

import AddUserModal from "./Manage/AddUserModal.jsx";

class AccountTable extends Component {
}

如果您仍有问题，请告诉我

Answer 2

我在回答自己的问题。事实证明，在webpack的输出部分中有一个名为LibraryTarget的配置，并将其设置为“ umd”可以解决此问题。

https://webpack.js.org/configuration/output/#outputlibrarytarget

使用webpack捆绑一个React组件以供另一个React组件导入

2 个答案: