react-native-hiapp工程化完全指南装饰器、路径别名、ESLint与Jest配置清单【免费下载链接】react-native-hiappHiApp written in react-native.项目地址: https://gitcode.com/gh_mirrors/re/react-native-hiapp本文带你用 React Native 工程化视角拆解 react-native-hiapp从 Babel 装饰器、路径别名配置到 ESLint 代码规范与 Jest 自动化测试一份清单掌握这个 HiApp 社交应用的完整工程配置新手也能轻松上手。 快速克隆与一键体验先获取代码仓库git clone https://gitcode.com/gh_mirrors/re/react-native-hiapp进入目录后执行yarn安装依赖即可体验项目内置的 5 条核心命令定义在 package.json 的scripts字段中命令作用yarn android运行到 Android 设备yarn ios运行到 iOS 模拟器yarn start启动 Metro 开发服务器yarn test运行 Jest 单元测试yarn lint运行 ESLint 代码检查这套testlint双命令是移动端工程化的标准姿势一个保质量一个保规范。✨ 装饰器配置让 Redux 连接更优雅打开 babel.config.js核心配置只有一行[babel/plugin-proposal-decorators, { legacy: true }]它开启了遗留模式装饰器legacy: true这正是 React Native 0.61 时代配合babel/core7.x 的标准写法。没有它HiApp 中遍布的connect(state ({...}))写法将无法被 Babel 解析。装饰器的真实使用场景遍布整个状态层——项目里有 10 处组件通过它绑定 Redux例如 App/Views/Home/index.js、App/Views/Post/index.js 和 App/Modals/index.js。注意.eslintrc.js中同步配置了ecmaFeatures: { legacyDecorators: true }见 .eslintrc.js两者必须保持一致否则 ESLint 会报解析错误。这是新手最容易踩的坑。 路径别名配置告别 ../../../ 地狱babel.config.js 中的module-resolver插件是本项目工程化的精华它建立了完整的目录别名映射别名指向目录ComponentsApp/ComponentsConfigApp/ConfigStoreApp/StoreViewsApp/ViewsStylesApp/StylesUtilsApp/UtilsModalsApp/ModalsLocalizeApp/LocalizeNetworkApp/NetworkassetsApp/assets配置中还有一个巧妙细节root: [./App]。它把App目录设为解析根意味着任何模块都可以被平铺导入无需前缀。实际效果可以参见入口文件 App/index.jsimport Config from Config import configStore from Store import styles from Styles import Modals from Modals一行导入清晰直达彻底替代了../../../../App/Config这类深层相对路径。 ESLint 配置Standard 风格 React Native 插件ESLint 的完整规则定义在 .eslintrc.js 中配置思路可以概括为三大插件 风格统一解析器babel-eslint保证装饰器等现代语法能被正确解析风格基准extends: standard继承 Standard 社区规范插件矩阵eslint-plugin-react—— JSX 与组件规范eslint-plugin-react-hooks——rules-of-hooks与exhaustive-deps均设为error级别Hook 依赖错误会直接报错eslint-plugin-react-native—— React Native 专属检查项目放宽了no-inline-styles自定义规则见 .eslintrc.jssemi: [never]—— 全项目不加分号配合 Prettierindent: [error, 2]—— 统一 2 空格缩进no-var: 2—— 禁止var强制const/letno-debugger仅在production环境升级为 error开发阶段不拦截。另外.prettierrc.js 与 ESLint 风格保持一致单引号、不加分号、JSX 括号同行、尾逗号全开格式化与检查互不打架。 Jest 配置两行预设搞定单元测试Jest 的配置极其精简——package.json 中仅一个预设jest: { preset: react-native }react-native预设自动处理了 RN 模块转换、jest-preset 映射等所有琐事。配套的测试文件tests/App-test.js 是官方模板级写法it(renders correctly, () { renderer.create(App /) })通过react-test-renderer渲染整个App /入口组件见 App/index.js只要不抛错就算通过——这是快照式应用能启动冒烟测试的典型形态。执行yarn test即可验证。 工程化配置速查清单关注点配置文件关键点装饰器babel.config.jsplugin-proposal-decoratorslegacy: true路径别名babel.config.jsmodule-resolverroot: [./App]代码检查.eslintrc.jsstandard 风格、无分号、Hooks 严格报错格式化.prettierrc.js单引号、不加分号单元测试package.jsonjest预设react-native打包器metro.config.js关闭inlineRequires保持默认转换✅新手行动建议按 克隆 →yarn→yarn lint→yarn test→yarn start 的顺序验证一遍五个命令全绿说明你的开发环境与工程化配置完全对齐可以放心开始二次开发了。【免费下载链接】react-native-hiappHiApp written in react-native.项目地址: https://gitcode.com/gh_mirrors/re/react-native-hiapp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考