1. Taro Introduction
2. Environment structures
3. Project structures
4. Compile debug applets micro channel
5. Taro structure analysis item
6. Yarn Detailed command
7. solve the problem: the local version of the problem Taro CLI framework installed applet @ tarojs / taro -weapp inconsistent versions
Introduction 1. Taro
Taro is a front end small framework, through this framework to write a code, and then by Taro compilation tools, can be the source code are compiled can pay Po / byte beating applet in a different end (micro-channel / Baidu /, the H5, React-Native etc.) operation code, [Taro official website] (https://nervjs.github.io/taro/docs/README.html)
2. environmental structures
Taro environmental requirements to build a node update to the latest version, so first it honestly update node
2.1) first check node under their own build environment version number of the
node -v
Will then display the current node version number, in many ways will let you update the node module by npm n (n module for managing node), but after you've tried, you will find so many pits, is the most outrageous scheme covering can be installed in the node official website to download the latest msi, view the installation location for the native node by following command
where node
Then he will show the installation location for the native node, and after you have downloaded the latest msi, can be installed on the cover in this position;
2.2) in turn execute the following command Taro environment to build
npm config set registry http://registry.npm.taobao.org/
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
cnpm install -g @tarojs/cli
The first is to use a command npm Taobao mirror,
the second command is to configure node-sass Taobao mirror
third command is to use the global installation cnpm taro, taro will generate a command. taro-cli package is in the packages directory Taro project, the project is responsible for initialization, compiling, building, etc.
After the installation is complete to see whether taro installed by the following command
taro -V
If the installation is no problem will appear as follows
How 2.3) configuration environment encountered the following error handling
C:\Users\Administrator\AppData\Roaming\npm\node_modules\@tarojs\cli\src\util\index.js:227
exports.replaceAsync = async function (str, regex, asyncFn) {
^^^^^^^^
SyntaxError: Unexpected token function
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (C:\Users\Administrator\AppData\Roaming\npm\node_modules\@tarojs\cli\bin\taro:4:44)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Congratulations, this is not the latest version node due to update the node it
3. Project to build
By the following command to build the project
taro init taro-learning-pro
Here built a name taro-learning-pro project (when creating the project, the project name is best not to include capital letters ...), after entering the above command, follow the instructions step by step operation
Then, download the corresponding project will depend on, rely on when the download is complete, there will be the following tips
At this time a project is created using the default template has been created, the following directory structure, using different templates to generate project directory there will be some small difference
When the project is created, we can compile a small program debugging, and here to generate a small micro-channel program as an example
4. Compile debug applets micro channel
4.1) Enter the following at the command line
npm run dev: weapp
This command will compile the project code and object files in the dist directory with the following results
At this time, the micro-channel has been described applet file has been generated to the target directory dist
4.2) developer tools download micro-channel
micro-channel official website developer tools
After downloading the installation
After logging in using a micro-channel scan code, choose small projects program
Then select the project directory dist file folder
Click OK to as taro been monitoring your file changes, care if the file changes, small micro-channel program will change the tool interface
5. Taro project structure analysis
From the chart shows, app.tsx entrance is Taro project documents, project using yarn tools for package management, the role of yarn is used instead of js npm package management tool, as to why a yarn instead of npm, here do not care about;
6. Yarn command Detailed
Global Tools installation yarn: cnpm install -g yarn
Add a dependency, add through add-dependent yarn and yarn.lock package.json updated files
yarn the Add [the packageName]
yarn the Add [the packageName] --dev will record devDependencies dependent on the package.json
Update dependence
yarn upgrade
may be updated to specify dependency
yarn upgrade [packageName]
Removing a dependency
yarn remove [packageName]
All files are installed package.json of
yarn or yarn install
7. solve the problem: inconsistency problem Taro CLI version with the locally installed applets framework @ tarojs / taro-weapp version, ensure consistent
Multiplayer time collaborative development, in particular the group has new members, new people need to build their own build environment, but because the project is in the early establishment, will therefore result in inconsistent development of new versions and new development environment
for example, a project in early use of Taro CLI: 1.2.2 were created using Taro CLI1.2.2 also download a variety of dependence, but in time to join the new project, Taro has been updated to 1.2.4, so the execution npm run dev: weapp time , will prompt inconsistent release, the root cause is dependent files and Taro CLI version inconsistencies caused all we need to update two places
1: update yarn.lock
2: update package.json
Update yarn.lock:
cnpm install -G yarn
fabric
Update package.json:
npm install -g npm-check-updates
ncu -u
The previous commands to complete the update yarn.lock file dependencies and files package.json
4 thumbs up
----------------
Disclaimer: This article is the original article CSDN bloggers "yi_master", and follow CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement. .
Original link: https: //blog.csdn.net/yi_master/article/details/86009294