使用Webpack打包React组件以便被另一个React组件导入

Question

我是一个有用的助手，可以翻译文本。

我有一些 React 代码分布在两个 Git 存储库中。目标是在存储库1中 npm 发布一个 React 组件，并在存储库2中使用它。

在存储库1中，我定义了 Hello.jsx：

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

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

在第二个代码仓库中，我定义了 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将repo 1中的代码打包，但是当我尝试在repo 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': function... }

当这个匿名函数运行时，它调用了函数“webpack_require”，该函数返回module.exports（我假设返回从Hello.jsx生成的函数内部定义的“exports.default = Hello;”）。所以在我看来，webpack文件正在导出“Hello”。

我不太熟悉javascript的导入/导出机制。我知道有许多不同的方法可以在javascript中定义模块。但我不确定以一种方式导出的内容是否可以以另一种方式导入。例如，在webpack文件中导出Hello的方式，它能否从jsx文件中导入？

import Hello from ...?

当我将Babel的输出与Webpack进行比较时，Babel输出的最后一行是：

exports.default = Hello;

我认为，当Babel输出使用exports.default导出Hello时，我可以使用“import x from y”来导入它。

我了解webpack允许在输出部分指定libraryTarget，并且我看到了不同的选项。但是我不确定哪种方式允许像“import x from y”这样导入东西。

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

- youhong

Answer 1

我正在回答自己的问题。原来webpack的输出部分有一个叫做LibraryTarget的配置项，将其设置为'umd'即可解决问题。

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

- youhong