试试将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
img10.png

进行动作确认

npm run start

常见的画面显示了出来

img20.png

请参考该页面(Reference page)

react-app-rewired不仅提供了更改路径的功能,还包含了有关如何修改webpack、jest和devServer的说明。

广告
将在 10 秒后关闭
bannerAds