Skip to main content

React Native工程初始化原理

工程初始化优化点是什么​

官方文档告诉我们初始化工程是执行npx react-native@latest init AwesomeProject 很多人执行的时候要么失败，要么就是超时，这句命令执行后到底做了什么？能不能靠私有化加速？下面是探究过程。

找到ReactNative@latest到底是什么​

  • 首先执行命令which npx 找到npx的目录：/usr/local/bin/npx
  • 进入npx的目录cd /usr/local/bin 使用sublime或者其他编辑器打开目录
  • 全文搜索react-native, 查到了下面这段注释（关键点）, 路径是/usr/local/bin/react-native
/usr/local/bin/react-native
  /**
 * Used arguments:
 *   -v --version - to print current version of react-native-cli and react-native dependency
 *   if you are in a RN app folder
 * init - to create a new project and npm install it
 *   --verbose - to print logs while init
 *   --version <alternative react-native package> - override default (https://registry.npmjs.org/react-native@latest),
 *      package to install, examples:
 *     - "0.22.0-rc1" - A new app will be created using a specific version of React Native from npm repo
 *     - "https://registry.npmjs.org/react-native/-/react-native-0.20.0.tgz" - a .tgz archive from any npm repo
 *     - "/Users/home/react-native/react-native-0.22.0.tgz" - for package prepared with `npm pack`, useful for e2e tests
 */

从第七行看到版本选择的时候是读取了一个默认地址https://registry.npmjs.org/react-native@latest,修改一下放到浏览器看下内容https://registry.npmjs.org/react-native,这个地址文件比较大，把加载的前几行复制出来研究下

{"_id":"react-native","_rev":"2054-66d58319887a3d6e60b91ba8cc209029","name":"react-native","description":"A framework for building native apps using React","dist-tags":{"0.67-stable":"0.67.5","0.66-stable":"0.66.5","0.65-stable":"0.65.3","0.64-stable":"0.64.4","0.63-stable":"0.63.5","0.68-stable":"0.68.7","0.69-stable":"0.69.12","0.70-stable":"0.70.15","next":"0.74.0-rc.9","0.71-stable":"0.71.19","0.73-stable":"0.73.8","latest":"0.74.2","0.72-stable":"0.72.15","nightly":"0.75.0-nightly-20240618-5df5ed1a8"},"versions":{"0.0.0":{"name":"react-native","version":"0.0.0","_id":"[email protected]","maintainers":[{"name":"spicyj","email":"[email protected]"}],"dist":{"shasum":"3d4e5294708f9af80a8e46d3a1f7ac9f5f810ab3","tarball":"https://registry.npmjs.org/react-native/-/react-native-0.0.0.tgz","integrity":"sha512-YbZ1iQUTWQp0LM/V1K1WjKNBAYUMXSLjf3n8Opv9dWGiZ1WR6rIqiSO+tstawGWbt6/XA6Ta8YetIA05gQoIHA==","signatures":[{"sig":"MEUCIQDYL0wtEsxg6XE3hJi1eOLlw0wL5zwp+iDF8+juNpSgKgIgYFaHmh44AcL7ohXuiB6OenzVBRLvSaJXb2B5lYNEVUI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"3d4e5294708f9af80a8e46d3a1f7ac9f5f810ab3","scripts":{},"_npmUser":{"name":"spicyj","email":"[email protected]"},"deprecated":"Issues and pull requests filed against this version are not supported. See the React Native release support policy to learn more: https://github.com/reactwg/react-native-releases#releases-support-policy","_npmVersion":"2.2.0","directories":{},"_nodeVersion":"0.10.35"},"0.0.5":{"name":"react-native","version":"0.0.5","_id":"[email protected]","maintainers":[{"name":"spicyj","email":"[email protected]"},{"name":"frantic","email":"[email protected]"},{"name":"vjeux","email":"[email protected]"}],"homepage":"https://github.com/facebook/react-native","bugs":{"url":"https://github.com/facebook/react-native/issues"},"bin":{"react-native-start":"packager/packager.sh"}

从内容上大致猜测一下，这就是rn初始化的时候读取的文件，从这里面获取rn的版本.

我们直接搜索latest,找到关键点："latest":"0.74.2"

  • 初始化命令里的react-native@latest是不是就是0.74.2版本呢？

执行命令npx react-native --version 获得rn版本是0.74.2, 说明react-native@latest确实是0.74.2版本。

我们把工程创建出来之后，从package.json文件中也能验证

  "dependencies": {
    "react": "18.2.0",
    "react-native": "0.74.2"
  },
ReactNative@latest实际就是0.74.2

npx react-native@latest init AwesomeProject首先是确认react-native@latest版本，这个命令会去https://registry.npmjs.org/react-native这个地址获取最新版本，然后执行init命令

react-native@latest init 创建工程原理​

打开文件/usr/local/bin/react-native，搜索init找到一个方法是init,里面调用了方法createProject

function createProject(name, options) {
	...
  var packageJson = {
    name: projectName,
    version: '0.0.1',
    private: true,
    scripts: {
      start: 'node node_modules/react-native/local-cli/cli.js start'
    }
  };
  fs.writeFileSync(path.join(root, 'package.json'), JSON.stringify(packageJson));
  process.chdir(root);

  run(root, projectName, options);
}


未完待续，欢迎讨论

https://zh-hans.react.dev/learn

https://docusaurus.io/zh-CN/docs/markdown-features/code-blocks