在 create react app 中创建一个 bundle 文件
Creating one bundle file in create react app
我如何设置 Create React App 来制作单个 myApp.js
和 myApp.css
文件,可以将其移动到我需要的任何地方?
背景:
在我的工作中,我们有两个需要更新的旧网站,并且在多页面网站中都有一个 React 应用程序。 React 应用程序使用 Create React App。不是我选择的配置,这只是我必须使用的配置,我无法更改所有内容。
目前,当我们对网站进行小的改动时,我们构建了一个捆绑包,采用 CRA 生成的最终 myApp.js
和 myApp.css
文件,并将它们移动到网站期望它们的文件夹中是。
这样理解起来可能更容易一些。该应用程序在此处构建 .js|.css 捆绑文件:
../appA/someFolder/build/static/main.js
and ../appA/someFolder/build/static/main.css
.
然后将这些文件移至此处:
../appA/hostThisSite/someFolder/js/main.js
and ../appA/hostThisSite/someFolder/css/main.css
对于第二个网站,它执行相同的操作,但将文件移动到整个其他网站结构
../../appB/hostThisSite/someFolder/js/main.js
and ../../appB/hostThisSite/someFolder/css/main.css
目前我们需要更新 React 应用程序。为此,我需要解决新的 Create React App 在 /build/static/
文件夹中创建一堆文件的问题(它们在名称中包含哈希值,而不是 myApp.js
和 myApp.css
。)
我做了研究,我唯一想出的是:
https://www.labnol.org/code/bundle-react-app-single-file-200514
而且老板不想让我用gulp.
这是 create-react-app 中的一个已知问题,https://github.com/facebook/create-react-app/issues/5306 中提出的几个解决方案涉及使用 npm 包,例如 react-app-rewired 或 craco。
这个问题的另一个答案有两种可能的解决方案,一种是弹出,另一种是使用 react-app-rewired
我如何设置 Create React App 来制作单个 myApp.js
和 myApp.css
文件,可以将其移动到我需要的任何地方?
背景: 在我的工作中,我们有两个需要更新的旧网站,并且在多页面网站中都有一个 React 应用程序。 React 应用程序使用 Create React App。不是我选择的配置,这只是我必须使用的配置,我无法更改所有内容。
目前,当我们对网站进行小的改动时,我们构建了一个捆绑包,采用 CRA 生成的最终 myApp.js
和 myApp.css
文件,并将它们移动到网站期望它们的文件夹中是。
这样理解起来可能更容易一些。该应用程序在此处构建 .js|.css 捆绑文件:
../appA/someFolder/build/static/main.js
and../appA/someFolder/build/static/main.css
.
然后将这些文件移至此处:
../appA/hostThisSite/someFolder/js/main.js
and../appA/hostThisSite/someFolder/css/main.css
对于第二个网站,它执行相同的操作,但将文件移动到整个其他网站结构
../../appB/hostThisSite/someFolder/js/main.js
and../../appB/hostThisSite/someFolder/css/main.css
目前我们需要更新 React 应用程序。为此,我需要解决新的 Create React App 在 /build/static/
文件夹中创建一堆文件的问题(它们在名称中包含哈希值,而不是 myApp.js
和 myApp.css
。)
我做了研究,我唯一想出的是: https://www.labnol.org/code/bundle-react-app-single-file-200514 而且老板不想让我用gulp.
这是 create-react-app 中的一个已知问题,https://github.com/facebook/create-react-app/issues/5306 中提出的几个解决方案涉及使用 npm 包,例如 react-app-rewired 或 craco。
这个问题的另一个答案有两种可能的解决方案,一种是弹出,另一种是使用 react-app-rewired