Taro 2.2 全面插件化,支持拓展和定制个性化功能

自 2.2 开始,Taro 引入了插件化机制,允许开发者通过编写插件的方式来为 Taro 拓展更多功能或者为自身业务定制个性化功能,欢迎大家进行尝试,共同讨论~

当前版本 2.2.1

官方插件

Taro 提供了一些官方插件

@tarojs/plugin-mock,一个简易的数据 mock 插件

如何引入插件

你可以从 npm 或者本地中引入插件,引入方式主要通过 编译配置中的 plugins 和 presets,使用如下

plugins

插件在 Taro 中,一般通过编译配置中的 plugins 字段进行引入。

plugins 字段取值为一个数组,配置方式如下:

const config = { plugins: [ // 引入 npm 安装的插件 '@tarojs/plugin-mock', // 引入 npm 安装的插件,并传入插件参数 ['@tarojs/plugin-mock', { mocks: { '/api/user/1': { name: 'judy', desc: 'Mental guy' } } }], // 从本地绝对路径引入插件,同样如果需要传入参数也是如上 '/absulute/path/plugin/filename', ] } presets

如果你有一系列插件需要配置,而他们通常是组合起来完成特定的事儿,那你可以通过插件集 presets 来进行配置。

配置编译配置中的 presets 字段,如下。

const config = { presets: [ // 引入 npm 安装的插件集 '@tarojs/preset-sth', // 引入 npm 安装的插件集,并传入插件参数 ['@tarojs/plugin-sth', { arg0: 'xxx' }], // 从本地绝对路径引入插件集,同样如果需要传入参数也是如上 '/absulute/path/preset/filename', ] }

在了解完如何引入插件之后,我们来学习一下如何编写一个插件。

如何编写一个插件

一个 Taro 的插件都具有固定的代码结构,通常由一个函数组成,示例如下:

export default (ctx, options) => { // plugin 主体 ctx.onBuildStart(() => { console.log('编译开始!') }) ctx.onBuildFinish(() => { console.log('编译结束!') }) }

插件函数可以接受两个参数:

ctx:插件当前的运行环境信息,包含插件相关的 API、当前运行参数、辅助方法等等

options:为插件调用时传入的参数

在插件主体代码部分可以按照自己的需求编写相应代码,通常你可以实现以下功能。

Typings

建议使用 typescript 来编写插件,这样你就会获得很棒的智能提示,使用方式如下:

import { IPluginContext } from '@tarojs/service' export default (ctx: IPluginContext, pluginOpts) => { // 接下来使用 ctx 的时候就能获得智能提示了 ctx.onBuildStart(() => { console.log('编译开始!') }) } 主要功能 命令行扩展

你可以通过编写插件来为 Taro 拓展命令行的命令,在之前版本的 Taro 中,命令行的命令是固定的,如果你要进行扩展,那你得直接修改 Taro 源码,而如今借助插件功能,你可以任意拓展 Taro 的命令行。

这个功能主要通过 ctx.registerCommand API 来进行实现,例如,增加一个上传的命令,将编译后的代码上传到服务器:

export default (ctx) => { ctx.registerCommand({ // 命令名 name: 'upload', // 执行 taro upload --help 时输出的 options 信息 optionsMap: { '--remote': '服务器地址' }, // 执行 taro upload --help 时输出的使用例子的信息 synopsisList: [ 'taro upload --remote xxx.xxx.xxx.xxx' ], async fn () { const { remote } = ctx.runOpts await uploadDist() } }) }

将这个插件配置到中项目之后,就可以通过 taro upload --remote xxx.xxx.xxx.xxx 命令将编译后代码上传到目标服务器。

编译过程扩展

同时你也可以通过插件对代码编译过程进行拓展。

正如前面所述,针对编译过程,有 onBuildStart、onBuildFinish 两个钩子来分别表示编译开始,编译结束,而除此之外也有更多 API 来对编译过程进行修改,如下:

ctx.onBuildStart(() => viod),编译开始,接收一个回调函数

ctx.modifyWebpackChain(args: { chain: any }) => void),编译中修改 webpack 配置,在这个钩子中,你可以对 webpackChain 作出想要的调整,等同于配置

ctx.modifyBuildAssets(args: { assets: any }) => void),修改编译后的结果

ctx.modifyBuildTempFileContent(args: { tempFiles: any }) => void),修改编译过程中的中间文件,例如修改 app 或页面的 config 配置

ctx.onBuildFinish(() => viod),编译结束,接收一个回调函数

编译平台拓展

你也可以通过插件功能对编译平台进行拓展。

使用 API ctx.registerPlatform,Taro 中内置的平台支持都是通过这个 API 来进行实现。

注意:这是未完工的功能,需要依赖代码编译器 @tarojs/transform-wx 的改造完成

API

通过以上内容,我们已经大致知道 Taro 插件可以实现哪些特性并且可以编写一个简单的 Taro 插件了,但是,为了能够编写更加复杂且标准的插件,我们需要了解 Taro 插件机制中的具体 API 用法。

插件环境变量 ctx.paths

包含当前执行命令的相关路径,所有的路径如下(并不是所有命令都会拥有以下所有路径):

ctx.paths.appPath,当前命令执行的目录,如果是 build 命令则为当前项目路径

ctx.paths.configPath,当前项目配置目录,如果 init 命令,则没有此路径

ctx.paths.sourcePath,当前项目源码路径

ctx.paths.outputPath,当前项目输出代码路径

ctx.paths.nodeModulesPath,当前项目所用的 node_modules 路径

ctx.runOpts

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpdyzx.html