试试将React的启动文件“index.tsx”的名称更改一下
首先
如果使用create-react-app创建模板,那么入口点会被固定为index.tsx。
突然间我对如何更改这个文件名感到好奇,所以我进行了实验。
运行”npm run eject”命令,将会输出隐藏的配置文件和构建脚本。
在其中有一个名为config\paths.js的文件,其中定义了各种路径。
如果更改appIndexJs,则可能实现目标。
然而,如果直接卸载该项操作,会带来一些麻烦所以我尝试使用react-app-rewired(用于更改设置的工具)来重新编写。
// config after eject: we're in ./config/
module.exports = {
dotenv: resolveApp('.env'),
appPath: resolveApp('.'),
appBuild: resolveApp(buildPath),
appPublic: resolveApp('public'),
appHtml: resolveApp('public/index.html'),
appIndexJs: resolveModule(resolveApp, 'src/index'),
appPackageJson: resolveApp('package.json'),
appSrc: resolveApp('src'),
appTsConfig: resolveApp('tsconfig.json'),
appJsConfig: resolveApp('jsconfig.json'),
yarnLockFile: resolveApp('yarn.lock'),
testsSetup: resolveModule(resolveApp, 'src/setupTests'),
proxySetup: resolveApp('src/setupProxy.js'),
appNodeModules: resolveApp('node_modules'),
appWebpackCache: resolveApp('node_modules/.cache'),
appTsBuildInfoFile: resolveApp('node_modules/.cache/tsconfig.tsbuildinfo'),
swSrc: resolveModule(resolveApp, 'src/service-worker'),
publicUrlOrPath,
};
前提条件
使用create-react-app创建的程序(–template typescript)
操作过程
在 package.json 的 devDependencies 中添加 react-app-rewired。
npm i -D react-app-rewired
为了进行构建设置更改,需要在根文件夹中创建config-overrides.js文件。
覆写 paths.appIndexJs 的配置。
const path = require('path');
module.exports = {
paths: function (paths, env) {
paths.appIndexJs = path.resolve(__dirname, 'src/entry-point.tsx');
return paths;
},
};
③ 修改 package.json
"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
+ "start": "react-app-rewired start",
+ "build": "react-app-rewired build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
把index.tsx重命名为entry-point.tsx。
mv index.tsx entry-point.tsx
进行动作确认
npm run start
常见的画面显示了出来
请参考该页面(Reference page)
react-app-rewired不仅提供了更改路径的功能,还包含了有关如何修改webpack、jest和devServer的说明。