taro 从1 更新到 3

安装taro 3.0.5

1. 更新 CLI $ npm i -g @tarojs/cli
2. 更新项目依赖$ npm i @tarojs/runtime @tarojs/mini-runner @tarojs/components @tarojs/taro
3. $ npm i react @tarojs/react # 如果使用 React
4. 运行 $ taro build --type weapp --watch

taro update self [version]更新 Taro 开发工具 taro-cli 到指定版本或 Taro3 的最新版本

taro update project [version]更新项目所有 Taro 相关依赖到指定版本或 Taro3 的最新版本

nvm(node 10版本解决)

解决问题：
运行出现Error [ERR_REQUIRE_ESM]: Must use import to load ES Module的错误，原来是node的版本问题，一开始我使用的是最新的node版本12.16.0版本，将node的版本降低到12.10.0版本就可以解决.

切换node版本：

在 MAC 上安装使用 brew install nvm, 其中 brew 是 Homebrew。
安装 nvm 后可能会出现 zsh: command not found: nvm，我们可以使用以下命令来安装：

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

其它常用命令

nvm ls-remote 查看有哪些node版本可以安装

nvm 用于管理node 版本

nvm list 查看当前所有的node 版本

nvm install v10.13.0 安装指定的版本，安装多版本

nvm install stable 安装最新的稳定版本，并切换到当前版本

nvm use —delete-prefix 10.13.0使用nvm use切换到指定的版本

nvm current 查看当前node版本

nvm alias default 命令来指定一个默认的node版本

nvm，node，npm之间的区别

• nvm：nodejs 版本管理工具。也就是说：一个 nvm 可以管理很多 node 版本和 npm 版本。
• nodejs：在项目开发时的所需要的代码库
• npm：nodejs 包管理工具。

在安装的 nodejs 的时候，npm 也会跟着一起安装，它是包管理工具。npm 管理 nodejs 中的第三方插件
nvm、nodejs、npm的关系: nvm 管理 nodejs 和 npm 的版本。npm 可以管理 nodejs 的第三方插件。

目前未启用对实验语法’classProperties’的支持

作用：用来编译类(class)
安装：npm install --save-dev @babel/plugin-proposal-class-properties
配置：.babelrc

有参数：
{ "plugins": [ ["@babel/plugin-proposal-class-properties", { "loose": true }] ] }

没参数：
{ "plugins": ["@babel/plugin-proposal-class-properties"] }

taro3 项目目录文件格式

├── babel.config.js             # Babel 配置
├── .eslintrc.js                # ESLint 配置
├── config                      # 编译配置目录
│   ├── dev.js                  # 开发模式配置
│   ├── index.js                # 默认配置
│   └── prod.js                 # 生产模式配置
├── package.json                # Node.js manifest
├── dist                        # 打包目录
├── project.config.json         # 小程序项目配置
├── src # 源码目录
│   ├── app.config.js           # 全局配置(**新增**)
│   ├── app.css                 # 全局 CSS
│   ├── app.js                  # 入口组件
│   ├── index.html              # H5 入口 HTML
│   └── pages                   # 页面组件
│       └── index
│           ├── index.config.js # 页面配置(**新增**)
│           ├── index.css       # 页面 CSS
│           └── index.jsx       # 页面组件，如果是 Vue 项目，此文件为 index.vue

1. 在旧版本 Taro 中的组件/页面中国，我们把所有面向应用开发者的 API 都放在 @tarojs/taro 里
2. 在 Taro Next 中，属于框架本身的 API 从框架自己的包中引入，其它的 API 仍然从 @tarojs/taro 引入。使用哪个框架来进行开发完全由开发者来决定。
3. 旧版本 Taro 中，页面/项目的配置挂载在类组件的类属性或函数式的属性上，通过 AST 分析取出来，然后生成 JSON 文件，项目页面的配置就无法动态地生成。
4. 在 Taro Next中，会有一个新的文件：.config.js ， 代表你页面/项目文件的文件名，config 文件必须和页面/项目文件在同一文件夹。在这个文件里你可以使用任意合法的 JavaScript 语法，只要最终把配置作为对象通过 export default 出去即可
   ```js
   // 类组件
   import Taro, { Component } from ‘@tarojs/taro’

    class Wallace extends Component {
        componentDidMount () {
        Taro.request().then(/* do something */)
        }
        render () {
            return ...
            }
        }

    // 函数式组件
    import Taro, { useEffect } from '@tarojs/taro'

    function Tall () {
        useEffect(() => {
        Taro.request().then(/* do something */)
        }, [])
        return ...
    }
```
在 **Taro Next** 中

```js
    import Taro from '@tarojs/taro'
    import React, { Component }  from 'react' // Component 是来自于 React 的 API

    class Reporter extends Component {
        ...
    }

    // 函数式组件
    import Taro from '@tarojs/taro'
    
    import React, { useEffect }  from 'react' // useEffect 是来自于 React 的 API

    function Fast () {

    return ...
    }
```

全文替换

1. 页面/组件
   import Taro from '@tarojs/taro';
import React, { Component, Fragment } from 'react'
2. 页面配置文件config提取到xxx.config.js中
3. 有些文件路径配置错误
4. 部分文件没有导出export

配置文件的修改

babel.config.js --babel配置

    module.exports = {
    presets: [
        ['taro', {
        framework: 'react',
        ts: true  //typescipte文件
        }]
        ]
    }

config/index.js —通用配置

删除plugins属性，添加新的属性

  framework: 'react',  //框架
  mini: { //小程序专用配置
    postcss: {
      pxtransform: {
        enable: true,
        config: {
        }
      },
      url: {
        enable: true,
        config: {
          limit: 1024 // 设定转换尺寸上限
        }
      },
      cssModules: {
        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }

export default 与 export 的区别

1. export与export default均可用于导出常量、函数、文件、模块等

2. 在一个文件或模块中，export、import可以有多个，export default仅有一个

3. 通过export方式导出，在导入时要加{ }，export default则不需要

4. 常规用法
   (1) 输出单个值，使用export default xx （default 可以看作 xx的别名）
   (2) 输出多个值，使用export
   (3) export default与普通的export不要同时使用

require 与 import的区别

1. require CommonJS/AMD(规范) 运行时加载 只能在运行时确定模块的依赖关系及输入/输出的变量，无法进行静态优化。
2. import ESMAScript6+ 编译时加载 语言规格层面支持模块功能。支持编译时静态分析，便于JS引入宏和类型检验。动态绑定

  const fs = require('fs')
  exports.fs = fs
  module.exports = fs

  import fs from 'fs'
  import {default as fs} from 'fs'
  import * as fs from 'fs'
  import {readFile} from 'fs'
  import {readFile as read} from 'fs'
  import fs, {readFile} from 'fs'

  export default fs
  export const fs
  export function readFile
  export {readFile, read}
  export * from 'fs'

taro3 路由的更新机制

• 在旧版本中可以通过 this.$router 访问当前组件/页面路由的详情。
• 在 Taro Next 对应的 API 是在 @tarojs/taro 中的 getCurrentInstance().router，两者的属性一模一样。

  import { getCurrentInstance } from '@tarojs/taro'
  class C extends Component {
    current = getCurrentInstance()

    componentWillMount () {
      // getCurrentInstance().router 和 this.$router 和属性一样
      console.log(this.current.router)
    }
  }

  // 函数式组件
  import { getCurrentInstance } from '@tarojs/taro'
  function C () {
    const { router } = getCurrentInstance()
    // getCurrentInstance().router 和 useRouter 返回的内容也一样
    // const router = useRouter()
  }

taro3其它小细节

1. 更新的时候taro的组件必须要先引入，然后才可以使用,常用的View, Text, Button, ScrollView, Image

2. React必须要先引入才可以使用import React from 'react'

3. 小程序端不要将在模板中用到的数据设置为 undefined(可以用Null代替)
   (小程序与taro的区别)[https://www.jianshu.com/p/1066e853cb51]