Skip to main content
Version: 3.x

Taro Repository Overview

Repository Composition

The following list describes which NPM packages Taro consists of and what each package does.

Base

PathDescription
@tarojs/cliCLI tool
@tarojs/servicePluginized Kernel
@tarojs/taro-loaderWebpack loaders
@tarojs/helperTool library, mainly for CLI, compile-time use
@tarojs/runner-utilsTool library, mainly for compilation tools for mini program and H5
@tarojs/sharedTool library, mainly for runtime use
@tarojs/taroExpose the Taro objects needed on each end
@tarojs/apiTaro API independent of each platform
babel-preset-taroBabel preset
eslint-config-taroESLint rules
postcss-pxtransformPostCSS plugin that converts px to adaptive size units on each platform

Mini Program

PathDescription
@tarojs/mini-runnerMini program compiler tool, mainly used for setting up and calling Webpack
@tarojs/reactMini program specific React renderer based on react-reconciler
@tarojs/runtimeMini program Runtime Adapter Core
@tarojs/plugin-platform-weappWechat mini program plugin
@tarojs/plugin-platform-alipayAlipay mini program plugin
@tarojs/plugin-platform-swanBaidu smart program plugin
@tarojs/plugin-platform-ttByteDance mini program plugin
@tarojs/plugin-platform-qqQQ mini program plugin
@tarojs/plugin-platform-jdJingdong mini program plugin
@tarojs/plugin-htmlSupport for plugins that use HTML tags
postcss-html-transformPostCSS plugin, class name for handling HTML tags
@tarojs/plugin-react-devtoolsSupport for plugins using React DevTools
@tarojs/extendjQuery-like libraries

H5

PathDescription
@tarojs/webpack-runnerH5 compiler tool, mainly used for setting up and calling Webpack
@tarojs/routerH5 Router
@tarojs/taro-h5H5 API implemented according to the WeChat mini program specification
@tarojs/componentsH5 Component Library(Web Components version)
@tarojs/components-reactH5 Component Library (React version)
babel-plugin-transform-taroapiBabel plugin that allows the API to be used by tree-shaking
postcss-plugin-constparsePostCSS plugin for handling the height of the tabbar

RN

PathDescription
@tarojs/components-rnRN Component Library
@tarojs/rn-runnerRN compiler tool, mainly used to set up and call metro
@tarojs/rn-style-transformerRN style conversion tool to make RN support sass、less、stylus、postcss
@tarojs/rn-supporterRN Basic metro configuration
@tarojs/rn-transformerRN application portal and page conversion tool that allows RN to support Taro-defined app and page config
@tarojs/router-rnRN router
@tarojs/runtime-rnRN Runtime Packaging
@tarojs/taro-rnThe API implemented on the RN side according to the WeChat mini program specification
babel-plugin-transform-react-jsx-to-rn-stylesheetBabel plugin for jsx to support className attribute
taro-css-to-react-nativeConverting css to RN stylesheet

Other

PathDescription
@tarojs/taroizeMini program to Taro compiler
@tarojs/with-weappRuntime adapter for mini program to Taro

How to develop

Environment Preparation

note

Need to make sure your Node.js version is greater than 8 (it is recommended to install 10.5 or higher)

First fork a copy of the Taro repository to your Github, then clone the project locally and switch to the next branch.

Then run the following commands in sequence.

$ yarn
$ yarn run bootstrap
$ yarn build

After running the above command, the environment is ready and you can pull a new branch for development.

Code Style

  • JavaScript:Follow JavaScript Standard Style,For details, see the root directory .eslintrc.js
  • TypeScript: Follow variants based on JavaScript Standard Style, see .eslintrc.js in the root directory and tsconfig.json in the relevant package directory for details.
  • Styles: follow the .stylelintrc style in the relevant package directory.

Debug

During debugging, the npm link command is typically used to softlink the package to be debugged to a test project.

To debug compile-time code, please refer to "Single-step debugging".

Debug Runtime code, you can breakpoint debug directly.

Unit tests

The packages are currently equipped with unit tests for.

  • babel-preset-taro
  • @tarojs/cli
  • @tarojs/components
  • @tarojs/react
  • @tarojs/webpack-runner
  • @tarojs/mini-runner
  • @tarojs/runtime
  • @tarojs/taro-rn
  • @tarojs/components-rn

After modifying the above packages, developers should make sure to run pnpm --filter [package name] run test:ci to check if the test cases all pass.

Also, after developing some important features, please take time to fill in the corresponding test cases.

note

Note: @tarojs/mini-runner and @tarojs/webpack-runner use snapshot (snapshot of test results), and modifying these two packages or some other packages may cause these snapshots to fail, and thus fail the tests. When you modify these two packages, or if CI prompts you with a test case error for these two packages, run pnpm --filter [package name] run test:ci -u to update the snapshot and resubmit.

commit Specifications

When entering the commit message, please make sure to follow the Angular Style Commit Message Conventions Specifications.

Documentation

When a commit involves new features, Breaking Changes or important modifications, please add or modify the corresponding documentation.

Please read Modifying Documentation for more information about the development of documentation。

Commit Pull Request

If you are not familiar with PR (Pull Request), please read 《About Pull Requests》

After completing the development and pushing it to your own Taro repository, you are ready to submit the Pull Request.

Before submitting a PR, please read the following notes.

  1. make sure npm run build compiles successfully.
  2. Make sure the code passes the ESLint test.
  3. ensure that all test cases pass when the package in question has the npm test:ci command.
  4. when the related package has test cases, add the corresponding test cases to your commit code as well.
  5. ensure that the commit message needs to follow the Angular Style Commit Message Conventions.
  6. If the commit code is very large or complex, you can divide the PR into several commits together. We will squash as appropriate when merging.
  7. PR authors can choose to join Taro Developer WeChat group for merging PRs and technical communication.