初识Taro-cli

对taro的体验

实践过程遇到的: 优&缺点
官方已承认的缺点

• 初始化配置可自定义: 如样式支持丰富: sass/scss/less/stylus
• 状态管理工具支持redux/mobx
• 支持ts
• 支持微信小程序原生，taro混写 文档
• 整个生态处于上升期，官方也会较快处理issue
• sourceMap不能用
• 官方对部分处理过于暴力：如组件间传值必须用on开头、v1.3才支持的函数式组件必须以render开头
• 不能解构传值，需要key value 传给子组件
• 在JSX 中，如果出现双引号，可能会导致编译错误
• 不论用何种小程序框架，都无法避免的问题：迭代总是慢微信一步！

讨论的主题: taro-cli 创建一个项目时源码层面发生的事情

官方文档

# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli
# 值得一提的是，如果安装过程出现sass相关的安装错误，请在安装mirror-config-china后重试。
$ npm install -g mirror-config-china
# 使用命令创建模板项目
$ taro init myApp

流程

1. 拉取taro in gihubt查看源码
2. 使用命令创建模板项目时，用户与taro-cli交互的基本流程，打开packages下的 /taro-cli/bin/taro-init查看 taro init 入口文件
   
3. taro-cli底层是通过commander和用户进行交互的，满足定制化生成初始化项目需求。解析完入参，该文件返回一个实例 new Project().create()

const program = require('commander')

const Project = require('../dist/create/project').default

program
  .option('--name [name]', '项目名称')
  .option('--description [description]', '项目介绍')
  .option('--typescript', '使用TypeScript')
  .option('--no-typescript', '不使用TypeScript')
  .option('--template [template]', '项目模板(default/redux/mobx/wxcloud/wxplugin)')
  .option('--css [css]', 'CSS预处理器(sass/less/stylus/none)')
  .parse(process.argv)
 
 ......
 
 const project = new Project({
  projectName,
  projectDir: process.cwd(),
  template,
  description,
  typescript,
  css
})

project.create()
 

4. 打开 /taro-cli/src/create/project

import chalk from 'chalk'
export default class Project extends Creator {
    public...
    constructor...
    init () {
        console.log(chalk.green(`Taro即将创建一个新项目!`))
        console.log('Need help? Go and open issue: https://github.com/NervJS/taro/issues/new')
    }
    create () {
        this.ask()
    }
    ask() {
        ... 整个方法只做了一件事：把用户在commander输入的东西入参 并结构化
    }
    write () {
        ...
        // 返回一个实例 举个例子，若用户选择了redux template，出口是 /taro-cli/templates/redux/index.js.createApp()
        return createApp() 
    }
}

5. 打开 /taro-cli/templates/redux/index.js.createApp(); 当成功执行到这里时，命令行会退出，taro init 命令也就完成了

exports.createApp = function (creater, params, helper, cb) {
    // creater 在redux场景是指 /taro-cli/src/create/project export的Class 即this
    // params 入参 值理论上也就是用户输入的参数 + 系统预设生成的参
    // helper 一些辅助工具、如getPkgVersion 
    // cb 创建完项目的回调
}

探讨一个问题

输入框为什么在taro环境下是Input，wx下是input

// 打开刚刚我们创建好的项目 node_modules/@tarojs/components/src/index.js
// 看到这一行代码 答案也就很明显了
export { default as Input } from './components/input'