javascript - Webpack 5 React 组件库 UMD 与 SourceMaps 捆绑

Question

我正在尝试创建一个 webpack 5 构建过程来创建一个反应组件库，我刚刚有几件事似乎无法正常工作。

#1) webpack 构建命令运行良好，当使用 inline-source-map 选项时，我可以看到嵌入在输出构建文件中的数据 URL，但是当我尝试在 NPM 上发布和测试这个库时，我总是被混淆没有原始代码行的错误，所以我什至不知道错误在哪里；我还缺少什么来激活源映射？我正在使用 Chrome 开发工具，它甚至没有告诉我该代码有可用的源映射...

#2)我遇到的另一个问题是在使用 webpack 将其构建到 dist 文件夹之后；我启动了另一个 CRA 测试应用程序并尝试从构建的库中提取组件，但我得到的只是这些错误。

./src/dist/index.js
  Line 1:1:    Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 1:112:  'define' is not defined                                                no-undef
  Line 1:123:  'define' is not defined                                                no-undef
  Line 1:190:  Unexpected use of 'self'                                               no-restricted-globals
  Line 1:466:  Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 1:631:  Expected an assignment or function call and instead saw an expression  no-unused-expressions

我知道 webpack 5 停止为 Node 捆绑 polyfill，但是如果我将它放在 CRA 应用程序的 src 目录中，这段代码不应该运行吗？这是捆绑代码不应该在浏览器/另一个 React 应用程序中工作吗？我针对 UMD，所以我认为它可以在这种环境下工作

这是所有必要的信息

Webpack.config.js

    const path = require("path");
    const { CleanWebpackPlugin } = require("clean-webpack-plugin");
    const nodeExternals = require("webpack-node-externals");
    module.exports = {
      entry: "./src/index.js",
      devtool: "inline-source-map",
      externals: [nodeExternals()],
      output: {
        filename: "index.js",
        path: path.resolve(__dirname, "dist"),
        library: {
          name: "test",
          type: "umd",
        },
      },
      plugins: [new CleanWebpackPlugin()],
      module: {
        rules: [
          {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader",
              options: {
                presets: ["@babel/preset-env", "@babel/preset-react"],
              },
            },
          },

          {
            test: /\.scss$/,
            use: ["style-loader", "css-loader", "sass-loader"],
            include: path.resolve(__dirname, "./src"),
          },
        ],
      },
    };

包.json

    {
      "name": "test-lib",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "start": "start-storybook",
        "build": "webpack --mode production"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "dependencies": {
        "prop-types": "^15.7.2",
        "react": "^17.0.2",
        "react-dom": "^17.0.2"
      },
      "devDependencies": {
        "@babel/core": "^7.15.8",
        "@babel/preset-env": "^7.15.8",
        "@babel/preset-react": "^7.14.5",
        "@storybook/addon-knobs": "^6.3.1",
        "@storybook/react": "^6.3.10",
        "babel-loader": "^8.2.2",
        "clean-webpack-plugin": "^4.0.0",
        "node-sass": "^6.0.1",
        "path": "^0.12.7",
        "sass-loader": "^12.1.0",
        "webpack": "^5.58.0",
        "webpack-cli": "^4.9.0",
        "webpack-node-externals": "^3.0.0"
      }
    }

Button.js（示例组件）

import React from 'react'
import PropTypes from 'prop-types';
const Button = ({message = 'Hello world'}) => (
   <button>{message}</button>
)

Button.propTypes = {
    message: PropTypes.string.isRequired
}
export default Button

构建入口点 (index.js)

export { default as Button } from "./components/Button";

标签： javascriptnode.jsreactjswebpackumd