打电话给Webpack时不能从资源共享库/资源中获取反应计划中的资源

Question

好的，我正在使用试用版3.1.1。我创建了一个新的react项目文件夹，并运行安装程序将Bryntum的内容拉到项目中。我还将Bryntum共享资源复制到主项目文件夹(而不是单个项目的文件夹)(文件夹：_shared_b)。我还将“简单”示例项目源文件复制到我的新项目中。我还在示例文件夹下的共享资源上运行了构建(我的主项目结构中的副本也构建了)(文件夹：_shared_a)。我将构建文件夹从主试用文件夹复制到项目顶层(文件夹：_build)。所以，我有这样一个结构：

+ Projects
-- _build
-- _shared_a
-- _shared_b
-- react_scheduler

在我的package.json中，在依赖项中，我有以下引用这些文件夹的内容：

"dependencies": {
  "@testing-library/jest-dom": "^4.2.4",
  "@testing-library/react": "^9.5.0",
  "@testing-library/user-event": "^7.2.1",
  "bryntum-react-shared": "file:../../_shared_a/build",
  "bryntum-resources": "file:../../_shared_b",
  "bryntum-scheduler": "file:../../_build",
  "react": "^16.13.1",
  "react-dom": "^16.13.1",
  "react-scripts": "3.4.1"
}

这是我的webpack.config.js：

module.exports = {
    output: {
        filename: "scheduler.js",
        path: __dirname + "/dist"
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        cacheDirectory: true,
                        babelrc: false,
                        presets: [
                            "@babel/env",
                            "@babel/react"
                        ],
                        plugins: [
                            "@babel/plugin-proposal-class-properties"
                        ]
                    }
                }
            },
            {
                test: /\.html$/,
                use: {
                    loader: "html-loader"
                }
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                use: [
                    {
                        loader: 'file-loader',
                    }
                ]
            },
            {
                test: /\.(ttf|woff|woff2|eot)$/i,
                use: [
                    {
                        loader: 'file-loader',
                    }
                ]
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // Creates `style` nodes from JS strings
                        'style-loader',
                    // Translates CSS into CommonJS
                        'css-loader',
                    // Compiles Sass to CSS
                        'sass-loader'
                ]
            }
        ]
    }
};

对于比较，默认情况下，“简单”示例中的路径引用如下所示：

"bryntum-react-shared": "file:../../_shared/build",
"bryntum-resources": "file:../../../_shared",
"bryntum-scheduler": "file:../../../../build",

源项目有以下路径：

\scheduler-3.1.1-trial\examples\react\javascript\simple

原始_shared_a有以下路径：

\scheduler-3.1.1-trial\examples\react_shared

原始的_shared_b有这样的路径：

\scheduler-3.1.1-trial\examples_shared

而最初的_build有这样的路径：

\scheduler-3.1.1-trial\build

然而，当我运行webpack (使用npx模式生产)来构建和打包整个程序时，我会得到以下错误：

ERROR in ./src/components/Header.js
Module not found: Error: Can't resolve 'bryntum-react-shared' in 'C:\Projects\react-scheduler\src\components'
 @ ./src/components/Header.js 23:0-78 51:47-52 54:39-52 60:39-52 67:39-52 76:39-55
 @ ./src/containers/Main.js
 @ ./src/App.js
 @ ./src/index.js

ERROR in ./src/containers/Main.js
Module not found: Error: Can't resolve 'bryntum-react-shared' in 'C:\Projects\react-scheduler\src\containers'
 @ ./src/containers/Main.js 26:0-56 122:43-59
 @ ./src/App.js
 @ ./src/index.js

ERROR in ./src/App.js
Module not found: Error: Can't resolve 'bryntum-react-shared/resources/shared.scss' in 'C:\Projects\react-scheduler\src'
 @ ./src/App.js 8:0-52
 @ ./src/index.js

所以，我错过了什么？

Answer 1

最简单的方法是使用创建生成响应应用程序。在布氏反应整合指南中有一个视频指南显示了整个过程。

要在浏览器中显示的空计划程序的最小文件是：

App.js：

import React from 'react';
import './App.css';
import { BryntumScheduler } from 'bryntum-react-shared';

function App() {
  return (
    <BryntumScheduler />
  );
}

export default App;

和App.css：

@import "~bryntum-scheduler/scheduler.stockholm.css"

如果您不能或不想使用CRA脚本，则可以在npm run eject目录中运行bryntum-demo。可用的webpack.config.js可以在弹出创建的config目录中找到。

然后，您可以将所需的内容添加到其中，也可以将其与webpack.config.js合并。

注意:我已经用CRA创建了许多React应用程序，到目前为止，我还没有找到应该弹出或使用自定义Webpack配置的原因。也许你也可以和CRA一起去。