[类似this article中所述,我正在编写一个React组件库(“ my-react-components”)。这些组件将在多个客户端应用程序中使用,其中一个名为“ my-app”。
我首先在my-react-components/src/index.js
中声明了一个组件:
import React from 'react';
const MyComponent = () => (
<h1>Hello from My Component</h1>
);
export default MyComponent;
按照文章中的建议,我首先通过Babel构建NPM软件包(在我的package.json中,我添加了一个脚本:"transpile": "babel src/index.js -o dist/main.js"
。在my-react-components/dist/main.js
中生成的代码如下:
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var MyComponent = function MyComponent() {
return /*#__PURE__*/_react["default"].createElement("h1", null, "Hello from My Component");
};
var _default = MyComponent;
exports["default"] = _default;
然后:
my-react-components
中添加了my-app/package.json
依赖项>my-app/LoginContainer.js
。我对通过Webpack进行转译感兴趣,因为我需要捆绑的不只是JS。我需要捆绑CSS。import React, { Component } from 'react'; import MyComponent from 'my-react-components'; class LoginContainer extends Component { render() { return (<MyComponent />); } }
整个过程都有效:该组件已在我的客户端应用程序中正确呈现。我的问题是如果我想通过Webpack而不是Babel进行移植,我将无法执行相同的操作
所以我这次通过Webpack进行了类似的移植。问题在于,这样做时,客户端应用程序中的导入失败。
JS控制台显示此错误消息:
并且整个视图(LoginContainer.js
)无法渲染。
生成的dist/main.js
看起来像这样。与Babel版本不同,它包括我们依赖的代码库(例如React)。 MyComponent
的已编译代码在底部可见:
/******/ (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/index.js"); /******/ }) /************************************************************************/ /******/ ({ /***/ "./node_modules/object-assign/index.js": /*!*********************************************!*\ !*** ./node_modules/object-assign/index.js ***! \*********************************************/ /*! no static exports found */ /***/ (function(module, exports, __webpack_require__) { "use strict"; eval("LIB CODE HERE"); /***/ }), /***/ "./node_modules/prop-types/checkPropTypes.js": /*!***************************************************!*\ !*** ./node_modules/prop-types/checkPropTypes.js ***! \***************************************************/ /*! no static exports found */ /***/ (function(module, exports, __webpack_require__) { "use strict"; eval("LIB CODE HERE"); /***/ }), /***/ "./node_modules/prop-types/lib/ReactPropTypesSecret.js": /*!*************************************************************!*\ !*** ./node_modules/prop-types/lib/ReactPropTypesSecret.js ***! \*************************************************************/ /*! no static exports found */ /***/ (function(module, exports, __webpack_require__) { "use strict"; eval("LIB CODE HERE"); /***/ }), /***/ "./node_modules/react/cjs/react.development.js": /*!*****************************************************!*\ !*** ./node_modules/react/cjs/react.development.js ***! \*****************************************************/ /*! no static exports found */ /***/ (function(module, exports, __webpack_require__) { "use strict"; eval("LIB CODE HERE"); /***/ }), /***/ "./node_modules/react/index.js": /*!*************************************!*\ !*** ./node_modules/react/index.js ***! \*************************************/ /*! no static exports found */ /***/ (function(module, exports, __webpack_require__) { "use strict"; eval("LIB CODE HERE"); /***/ }), /***/ "./src/index.js": /*!**********************!*\ !*** ./src/index.js ***! \**********************/ /*! no static exports found */ /***/ (function(module, exports, __webpack_require__) { "use strict"; eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports[\"default\"] = void 0;\n\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"./node_modules/react/index.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\n\nvar MyComponent = function MyComponent() {\n return /*#__PURE__*/_react[\"default\"].createElement(\"h1\", null, \"Hello from My Component\");\n};\n\nvar _default = MyComponent;\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack:///./src/index.js?"); /***/ }) /******/ });
如何通过Webpack而不是Babel转换组件,以便可以将CSS代码与JS组件捆绑在一起?
类似本文所述,我正在编写一个React组件库(“ my-react-components”)。这些组件将在多个客户端应用程序中使用,其中一个名为“ my -...
Webpack不会翻译您的代码;它捆绑。您要搜索的是Webpack-Libraries。
我已经给出了类似的答案here。