Taro-Starter

基于 Typescript、 React 构建 Taro 应用脚手架。用于快速开始一个 Taro 项目开发。 Taro 版本为 3.6.21。

在线预览。

Features

• Babel 支持
• Typescript 支持
• React 支持
• Sass 支持

Environment

Node 建议使用 Node 18+ 或更高版本。开发工具建议使用 VS Code。

Usage

# clone the project
git clone [email protected]:funnyzak/taro-starter.git -b master ./taro-react-app

# enter the project directory and install dependency
cd ./taro-react-app && pnpm

# develop h5
pnpm dev:h5

# develop weapp
pnpm dev:weapp

# build h5
pnpm build:h5

# eslint
pnpm eslint:check

# eslint:fix
pnpm eslint:fix

# prettier check
pnpm prettier:check

# prettier fix
pnpm prettier:fix

# eslint and prettier check
pnpm lint:check

# eslint and prettier fix
pnpm lint:fix

# clean node_modules
pnpm clean

更多脚步命令请查看 package.json 文件。

Build

打包默认的输出目录为：dist/[platform]

# 打包H5 输出到: dist/ht
yarn build:h5

# 打包微信小程序, 输出到：dist/weapp
yarn build:weapp

Structure

├── babel.config.js        // babel 配置
├── config                 // 开发和构建打包webpack配置
│   ├── dev.js             // 开发配置
│   ├── index.js           // 默认配置
│   └── prod.js            // 生产构建配置
├── global.d.ts            // typescript 全局声明文件
├── package.json           // 包信息
├── project.config.json    // 公共程序配置
├── public                 // 静态资源文件夹
├── src                    // 源码
│   ├── api                // api接口
│   ├── app.config.ts      // 根程序配置
│   ├── app.scss           // 入口全局样式
│   ├── app.ts             // 入口main文件
│   ├── components         // 公共组件
│   ├── config             // 项目全局配置包含变脸配置
│   ├── types              // 定义声明
│   ├── images             // 图片
│   ├── index.html         // 打包html模板
│   ├── pages              // 页面
│   ├── styles             // 公共样式
│   └── utils              // 工具类
├── tsconfig.json          // typescript 编译配置
└── tslint.json            // tslint 配置

Q&A

升级Taro

# 升级 Taro CLI 工具:
pnpm add -D @tarojs/cli@latest

# 更新项目中 Taro 相关的依赖:
npx taro update project

# 重新安装依赖:
rm -rf ./node_modules && npm install

TypeScript 建议

• 使用 tslint 作为编辑器内置的 linter
• 使用 eslint 命令行工具配合 typescript-eslint-parser 和 eslint-config-taro(见 .eslintrc) 作为 precommit 或者 prepush 的钩子，在提交或 commit 或编译出现问题时检查代码是否符合 Taro 规范
• 不要在 TypeScript 使用 Redux 的 connect 装饰器，使用普通的函数写法,详情见: #9951
• 当你的项目不那么复杂时，可以不使用 Redux

Reference

• Babel
• EsLint
• Eslintignore
• TSconfig
• npmrc
• gitignore
• webpack
• prettier

Contribution

如果你有任何的想法或者意见，欢迎提 Issue 或者 PR。

License

MIT License © 2022 funnyzak