Блог

Я пытаюсь выполнить процесс сборки webpack 5 для создания библиотеки компонентов react, у меня только что была пара вещей, которые, похоже, не могут работать.

#1) в webpack построить команду отлично работает, и при использовании инлайн-источник-карта вариант, я могу видеть URL-адресов, чтобы поместить его в файл build воспроизводится, но когда я когда-либо я пытаюсь опубликовать и проверить эту библиотеку на НПМ я всегда получаю запутанный ошибки без оригинальной строки кода, так что я даже не могу сказать где ошибки; что еще я упускаю, чтобы активировать источник-карты? Я использую инструменты разработки 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 перестал связывать полифиллы для узла, но не должен ли этот код запускаться
, если я помещу его в каталог src приложения CRA? Это код в комплекте, разве он не должен работать в браузере/ в другом приложении 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"),
          },
        ],
      },
    };
 

Package.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";