我想知道是否可以使用react-script
重命名src
为app
文件夹之类的其他内容
如何在 create-react-app 中将 `src` 文件夹更改为其他内容
IT技术
reactjs
create-react-app
react-scripts
2021-04-20 09:29:41
6个回答
您可以使用react-app-rewired来覆盖react路径配置。就我而言,我可以更改config-overrides.js文件中的路径
const path = require('path');
module.exports = {
paths: function (paths, env) {
paths.appIndexJs = path.resolve(__dirname, 'mysrc/client.js');
paths.appSrc = path.resolve(__dirname, 'mysrc');
return paths;
},
}
我知道这是一个老问题,但我仍然会发布我的解决方案,因为它可能对某人有所帮助。
我通过执行以下操作使其工作:
- 运行
npm run eject
。这从 create-react-app 公开了一些内部配置内容 - 打开
package.json
和编辑在各自的正则表达式jest.collectCoverageFrom
,并jest.testMatch
以符合您的测试路径 - 改变的路径
appSrc
,appIndexJs
并且testsSetup
将在config/paths.js
文件
不确定这是否能回答您的问题,但我会试一试。我的目录结构如下所示:
/root
--/app
----/build
----/public
------index.html
----/src
------index.js
app.js
package.js
我的 /root/package.json 中有这个:
"scripts": {
"build": "cd app && npm run build",
"start": "node app.js",
"serve": "cd app && npm run start"
},
"dependencies": {
"express": "^4.8.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "^1.0.17"
},
我的 /root/app/package.json 看起来像这样:
"scripts": {
"build": "react-scripts build",
"start": "set PORT=3000 && react-scripts start"
},
"dependencies": {
"react-scripts": "^1.0.17"
}
要运行 Reactjs 的开发版本,在 /root 中我可以只 npm run serve 来提供开发版本。
我正在使用 node 和 express,所以要运行 Reactjs 的生产版本,在 /root 中我可以只 npm run build 创建 /root/app/build 目录。我有一个看起来像这样的路由器:
var options = {root : config.siteRoot + '/app/build'};
mainRte.all('/', function(req, res) {
console.log('In mainRte.all Root');
res.sendFile('index.html', options);
});
因此,当我在节点中运行 /root/app.js 并浏览到“/”时,它会打开 /root/app/public/index.html 然后是 /root/app/index.js。
希望这有帮助。
T0astBread 的回答几乎是完美的,但他在 modules.js 中错过了对“src”的额外引用。
具体来说:
return {
src: paths.appSrc,
};
需要改为
return {
newSrcName: paths.appSrc,
};
这是一个很好的问题,更改此文件夹名称的有效场景是将旧的 React 项目迁移到 CRA。
这是我发现破坏较少的另一种方法:
创建一个符号链接:
ls -s ./app src
然后将其添加到config-overrides.js
, 以允许 webpack 处理符号链接:
module.exports = (config, ...rest) => {
return { ...config, resolve: { ...config.resolve, symlinks: false } };
};
然后安装react-app-rewired
并将其添加到您的 package.json 中:
"start": "react-app-rewired start",
其它你可能感兴趣的问题