基于 Typescript、 React 构建 Taro 应用脚手架。用于快速开始一个 Taro 项目开发。 Taro 版本为 3.5.11。
在线预览。
- Babel 支持
- Typescript 支持
- React 支持
- Sass 支持
- png|svg|jpg|jpeg|gif 引入支持
- git commit hooks, no 💩
Node 建议使用 Node 14+ 或更高版本。开发工具建议使用 VS Code。
# 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 && yarn
# develop h5
yarn dev:h5
# develop weapp
yarn dev:weapp
# build h5
yarn build:h5
# eslint
yarn eslint:check
# eslint:fix
yarn eslint:fix
# prettier check
yarn prettier:check
# prettier fix
yarn prettier:fix
# eslint and prettier check
yarn lint:check
# eslint and prettier fix
yarn lint:fix
# clean node_modules
yarn cleanMore scripts, please see package.json。
打包默认的输出目录为：dist/[platform]
# 打包H5 输出到: dist/ht
yarn build:h5
# 打包微信小程序, 输出到：dist/weapp
yarn build:weapp├── 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 配置
- 在
config/目录下，复制app_sample.js文件，重命名为app_youname.js，并修改配置； - 修改配置文件的环境变量配置；
- 使用
npx cross-env APP_ENV=app_youname yarn dev:h5命令启动开发； - 使用
npx cross-env APP_ENV=app_youname yarn build:h5命令进行打包（打包输出目录为dist/app/yourname）。
# 升级 Taro CLI 工具:
yarn add -D @tarojs/cli@latest
# 更新项目中 Taro 相关的依赖:
npx taro update project
# 重新安装依赖:
rm -rf ./node_modules && npm install- 使用 tslint 作为编辑器内置的 linter
- 使用 eslint 命令行工具配合
typescript-eslint-parser和eslint-config-taro(见 .eslintrc) 作为precommit或者prepush的钩子，在提交或 commit 或编译出现问题时检查代码是否符合 Taro 规范 - 不要在 TypeScript 使用 Redux 的
connect装饰器，使用普通的函数写法,详情见: #9951 - 当你的项目不那么复杂时，可以不使用 Redux
如果你有任何的想法或者意见，欢迎提 Issue 或者 PR。
MIT License © 2022 funnyzak
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent