开发自定义Taro插件解决跨平台难题

在Taro项目开发中，难免会遇到需要混合编译的场景，一般来讲Taro可以使用原生模块、原生项目也可以使用Taro的模块内容。官方也确实说了Taro 支持使用小程序原生的页面、组件和插件。比如Taro使用原生页面，我们只需要在app.config.ts文件中加上原生页面的路由，然后项目中就可以直接以小程序原生的开发模式开发该页面。使用原生页面（weapp)这种模式对于微信小程序确实是可以，比如：新增路由// app.config.ts

export default defineAppConfig({
pages: [

// ...
"pages/wxTest/index",
// ...

]
})原生模式开发然后在Taro项目中直接以原生模式进行开发

模版文件<view>微信原生页面: {{ name }}</view>启动项目完成这两步后，就可以直接来启动项目了，由于这个路由是直接写在Taro项目中，那么这个路由对应的文件也必然会被Taro进行编译。

从这张图我们可以看到，这个原生开发的页面确实可以正常渲染，并且它的js文件确实也经过了Taro编译，但是这个编译非常简单，只是做了一下模块的导出。并且它的模版文件更直接，啥也没处理！

所以这就是Taro项目能够直接使用原生模式开发的原因！使用原生页面（kwai）但是！！！这种模式貌似只适用于微信小程序，对于其它小程序好像行不通，我这边在快手小程序中尝试以这种模式来让Taro使用原生页面，发现以下几个问题：对于ksml后缀，Taro编译会报错

意思就是webpack处理不了这种文件，需要我们安装对应的loader...这咋还和微信小程序区别对待了呢？？如果将ksml改为wxml，虽然不会报错，但它生成的ksml文件是经过Taro编译的，使用了Taro模版

可以看到，此时的页面是渲染不了的，这明明是和微信小程序一样的操作，为啥这样？原因可能是Taro底层并没有对ksml文件的编译做适配，官方不靠谱，那我们只能自己动手来解决了插件开发解决这个问题的关键就是不要让Taro编译我们的原生页面但是我们想要使用原生页面，那么就得将这个页面配置在Taro的路由列表中，但如果在路由列表中加上了这个页面那么它势必又会被Taro编译。这看样子像死循环了？换种思路：在编译之前不要将该页面加入Taro的路由列表中，在编译完成后找到生成的app.json文件，这时候再往里面添加原生页面。然后再将原生页面复制到编译产物中去就可以了。Taro插件介绍Taro 的插件都具有固定的代码结构，通常由一个函数组成，示例如下：export default (ctx, options) => {
// plugin 主体
ctx.onBuildStart(() => {

console.log('编译开始！')

})
ctx.onBuildFinish(() => {

console.log('Webpack 编译结束！')

})
ctx.onBuildComplete(() => {

console.log('Taro 构建完成！')

})
}插件函数可以接受两个参数：ctx：插件当前的运行环境信息，包含插件相关的 API、当前运行参数、辅助方法等等options：为插件调用时传入的参数Taro插件除了提供了上面三个钩子函数以外，还提供了许多 API 来对编译过程进行修改：ctx.modifyWebpackChain(args: { chain: any }) => void)，编译中修改 webpack 配置，在这个钩子中，你可以对 webpackChain 作出想要的调整，等同于配置 webpackChainctx.modifyBuildAssets(args: { assets: any }) => void)，修改编译后的结果ctx.onBuildFinish(() => void)，编译结束，接收一个回调函数。在每次 Webpack 编译后都会被触发。如果是在 watch 模式下，那么每当有文件改变触发 Webpack 编译时，都会触发 onBuildFinish 钩子。taro-plugin-kwai-noparse我们可以选用modifyWebpackChain这个钩子函数来进行处理：// taro-plugin-kwai-noparse.js
const path = require("path");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const webpack = require("webpack");

class HandleAppJsonPlugin {
options = {};

pluginName = "HandleAppJsonPlugin";

constructor(options) {

this.options = options;

}

apply(compiler) {

// 绑定 插件
compiler.hooks.compilation.tap(this.pluginName, (compilation) => {
  // 监听 webpack 的 processAssets
  compilation.hooks.processAssets.tapAsync(
    {
      name: this.pluginName,
      stage: webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE,
    },
    async (assets, callback) => {
      // 找到 app.json 文件，添加不需要编译的页面路由
      if (assets["app.json"] && assets["app.json"].source) {
        const json = JSON.parse(assets["app.json"].source());
        // console.log("------", this.options);
        json.pages.push(...this.options.pages);
        compilation.assets["app.json"] = {
          source: () => JSON.stringify(json),
          size: () => JSON.stringify(json).length,
        };
      }
      callback();
    },
  );
});

}
}

module.exports = (ctx, pluginOpts) => {
ctx.onBuildStart(() => {

console.log("编译开始！");

});

ctx.modifyWebpackChain(({ chain }) => {

// 处理 编译后生成的 app.json 文件，添加不需要taro编译的页面路由。
chain.plugin("HandleAppJsonPlugin").use(HandleAppJsonPlugin, [pluginOpts]);

// 复制未编译的文件到输出目录
const patterns = pluginOpts.pages.map((page) => {
  const pagePath = page?.split("/")?.slice(0, 2)?.join("/");
  return {
    from: path.resolve(ctx.paths.sourcePath, pagePath),
    to: path.resolve(ctx.paths.outputPath, pagePath),
  };
});

chain.plugin("CopyWebpackPlugin").use(CopyWebpackPlugin, [
  {
    patterns,
    options: {},
  },
]);

});
};
使用let plugins = [];
if (TARO_ENV === "kwai") {
plugins = [

[
  path.resolve(__dirname, "../../../", `plugins/taro-plugin-kwai-noparse`),
  {
    pages: ["pages/ksTest/index"],
  },
],

];
}

module.exports = {
plugins,
}验证

现在可以像微信小程序那样正常使用原生页面了。
weibo.com/ttarticle/p/show?id=2309405159754304717046
weibo.com/ttarticle/p/show?id=2309405159754304717178
weibo.com/ttarticle/p/show?id=2309405159754346659853
weibo.com/ttarticle/p/show?id=2309405159754220831016
weibo.com/ttarticle/p/show?id=2309405159754321232270
weibo.com/ttarticle/p/show?id=2309405159754312843518
weibo.com/ttarticle/p/show?id=2309405159754300522610
weibo.com/ttarticle/p/show?id=2309405159754312843764
weibo.com/ttarticle/p/show?id=2309405159754241802460
weibo.com/ttarticle/p/show?id=2309405159754308911255
weibo.com/ttarticle/p/show?id=2309405159754300522571
weibo.com/ttarticle/p/show?id=2309405159754216374342
weibo.com/ttarticle/p/show?id=2309405159754254123046
weibo.com/ttarticle/p/show?id=2309405159754308649344
weibo.com/ttarticle/p/show?id=2309405159754220830764
weibo.com/ttarticle/p/show?id=2309405159754220830936
weibo.com/ttarticle/p/show?id=2309405159754233151704
weibo.com/ttarticle/p/show?id=2309405159754334076949
weibo.com/ttarticle/p/show?id=2309405159754225025026
weibo.com/ttarticle/p/show?id=2309405159754300260620
weibo.com/ttarticle/p/show?id=2309405159754212442412
weibo.com/ttarticle/p/show?id=2309405159754312843568
weibo.com/ttarticle/p/show?id=2309405159754300260816
weibo.com/ttarticle/p/show?id=2309405159754208248003
weibo.com/ttarticle/p/show?id=2309405159754208248133
weibo.com/ttarticle/p/show?id=2309405159754149265922
weibo.com/ttarticle/p/show?id=2309405159754208248139
weibo.com/ttarticle/p/show?id=2309405159754161848414
weibo.com/ttarticle/p/show?id=2309405159754225025274
weibo.com/ttarticle/p/show?id=2309405159754145333259
weibo.com/ttarticle/p/show?id=2309405159754300260558
weibo.com/ttarticle/p/show?id=2309405159754212180212
weibo.com/ttarticle/p/show?id=2309405159754216636661
weibo.com/ttarticle/p/show?id=2309405159754132488368
weibo.com/ttarticle/p/show?id=2309405159754136682718
weibo.com/ttarticle/p/show?id=2309405159754132488272
weibo.com/ttarticle/p/show?id=2309405159754128294021
weibo.com/ttarticle/p/show?id=2309405159754128294030
weibo.com/ttarticle/p/show?id=2309405159754124361805
weibo.com/ttarticle/p/show?id=2309405159754128293980
weibo.com/ttarticle/p/show?id=2309405159754031824994
weibo.com/ttarticle/p/show?id=2309405159754124099674
weibo.com/ttarticle/p/show?id=2309405159754044670158
weibo.com/ttarticle/p/show?id=2309405159754124099619
weibo.com/ttarticle/p/show?id=2309405159754053058721
weibo.com/ttarticle/p/show?id=2309405159754027631044
weibo.com/ttarticle/p/show?id=2309405159753964716064
weibo.com/ttarticle/p/show?id=2309405159754119905628
weibo.com/ttarticle/p/show?id=2309405159754036281596
weibo.com/ttarticle/p/show?id=2309405159754115711420
weibo.com/ttarticle/p/show?id=2309405159753944006803
weibo.com/ttarticle/p/show?id=2309405159754040475875
weibo.com/ttarticle/p/show?id=2309405159754040475849
weibo.com/ttarticle/p/show?id=2309405159754069573705
weibo.com/ttarticle/p/show?id=2309405159754036019654
weibo.com/ttarticle/p/show?id=2309405159753952133268
weibo.com/ttarticle/p/show?id=2309405159754061185045
weibo.com/ttarticle/p/show?id=2309405159753952395350
weibo.com/ttarticle/p/show?id=2309405159753948201086
weibo.com/ttarticle/p/show?id=2309405159754040475703
weibo.com/ttarticle/p/show?id=2309405159753969172677
weibo.com/ttarticle/p/show?id=2309405159753956589679
weibo.com/ttarticle/p/show?id=2309405159753944007065
weibo.com/ttarticle/p/show?id=2309405159753947939072
weibo.com/ttarticle/p/show?id=2309405159753885286636
weibo.com/ttarticle/p/show?id=2309405159754119905294
weibo.com/ttarticle/p/show?id=2309405159754031825310
weibo.com/ttarticle/p/show?id=2309405159754027630669
weibo.com/ttarticle/p/show?id=2309405159754036281349
weibo.com/ttarticle/p/show?id=2309405159753947938855
weibo.com/ttarticle/p/show?id=2309405159753977561266
weibo.com/ttarticle/p/show?id=2309405159753935618427
weibo.com/ttarticle/p/show?id=2309405159754031825320
weibo.com/ttarticle/p/show?id=2309405159753859858942
weibo.com/ttarticle/p/show?id=2309405159753876636072
weibo.com/ttarticle/p/show?id=2309405159753939812460
weibo.com/ttarticle/p/show?id=2309405159753944006839
weibo.com/ttarticle/p/show?id=2309405159753872441654
weibo.com/ttarticle/p/show?id=2309405159753939812625
weibo.com/ttarticle/p/show?id=2309405159753855926513
weibo.com/ttarticle/p/show?id=2309405159753851469864
weibo.com/ttarticle/p/show?id=2309405159753860120968
weibo.com/ttarticle/p/show?id=2309405159753864315137
weibo.com/ttarticle/p/show?id=2309405159753772040277
weibo.com/ttarticle/p/show?id=2309405159753860120736
weibo.com/ttarticle/p/show?id=2309405159753855664582
weibo.com/ttarticle/p/show?id=2309405159753855664186
weibo.com/ttarticle/p/show?id=2309405159753755001034
weibo.com/ttarticle/p/show?id=2309405159753763651609
weibo.com/ttarticle/p/show?id=2309405159753700474979
weibo.com/ttarticle/p/show?id=2309405159753763651772
weibo.com/ttarticle/p/show?id=2309405159753763651858
weibo.com/ttarticle/p/show?id=2309405159753775972404
weibo.com/ttarticle/p/show?id=2309405159753776234817
weibo.com/ttarticle/p/show?id=2309405159753851470310
weibo.com/ttarticle/p/show?id=2309405159753843343698
weibo.com/ttarticle/p/show?id=2309405159753767846297
weibo.com/ttarticle/p/show?id=2309405159753784360973
weibo.com/ttarticle/p/show?id=2309405159753671115186
weibo.com/ttarticle/p/show?id=2309405159753771778268
weibo.com/ttarticle/p/show?id=2309405159753688154200
weibo.com/ttarticle/p/show?id=2309405159753767846020
weibo.com/ttarticle/p/show?id=2309405159753679765618
weibo.com/ttarticle/p/show?id=2309405159753767583890
weibo.com/ttarticle/p/show?id=2309405159753667182608
weibo.com/ttarticle/p/show?id=2309405159753675571542
weibo.com/ttarticle/p/show?id=2309405159753675571595
weibo.com/ttarticle/p/show?id=2309405159753683697788
weibo.com/ttarticle/p/show?id=2309405159753793011953
weibo.com/ttarticle/p/show?id=2309405159753855664498
weibo.com/ttarticle/p/show?id=2309405159753595617367
weibo.com/ttarticle/p/show?id=2309405159753671115318
weibo.com/ttarticle/p/show?id=2309405159753763389644
weibo.com/ttarticle/p/show?id=2309405159753679503860
weibo.com/ttarticle/p/show?id=2309405159753608462363
weibo.com/ttarticle/p/show?id=2309405159753679765825
weibo.com/ttarticle/p/show?id=2309405159753671377191
weibo.com/ttarticle/p/show?id=2309405159753671115010
weibo.com/ttarticle/p/show?id=2309405159753666920792
weibo.com/ttarticle/p/show?id=2309405159753591685473
weibo.com/ttarticle/p/show?id=2309405159753759457304
weibo.com/ttarticle/p/show?id=2309405159753591423074
weibo.com/ttarticle/p/show?id=2309405159753591685180
weibo.com/ttarticle/p/show?id=2309405159753591423242
weibo.com/ttarticle/p/show?id=2309405159753579102418
weibo.com/ttarticle/p/show?id=2309405159753583296662
weibo.com/ttarticle/p/show?id=2309405159753503342710
weibo.com/ttarticle/p/show?id=2309405159753587491079
weibo.com/ttarticle/p/show?id=2309405159753587228968
weibo.com/ttarticle/p/show?id=2309405159752639316132
weibo.com/ttarticle/p/show?id=2309405159753491022168
weibo.com/ttarticle/p/show?id=2309405159753499410558
weibo.com/ttarticle/p/show?id=2309405159753587229130
weibo.com/ttarticle/p/show?id=2309405159753583034632
weibo.com/ttarticle/p/show?id=2309405159752815476986
weibo.com/ttarticle/p/show?id=2309405159753499410511
weibo.com/ttarticle/p/show?id=2309405159753499148329
weibo.com/ttarticle/p/show?id=2309405159753490760054
weibo.com/ttarticle/p/show?id=2309405159753579102592
weibo.com/ttarticle/p/show?id=2309405159752283062533
weibo.com/ttarticle/p/show?id=2309405159752727396427
weibo.com/ttarticle/p/show?id=2309405159752463417351
weibo.com/ttarticle/p/show?id=2309405159753503342600
weibo.com/ttarticle/p/show?id=2309405159753574646036
weibo.com/ttarticle/p/show?id=2309405159752996094047
weibo.com/ttarticle/p/show?id=2309405159752903819692
weibo.com/ttarticle/p/show?id=2309405159753574908082
weibo.com/ttarticle/p/show?id=2309405159752551497817
weibo.com/ttarticle/p/show?id=2309405159752194719906
weibo.com/ttarticle/p/show?id=2309405159753511731248
weibo.com/ttarticle/p/show?id=2309405159753499410535
weibo.com/ttarticle/p/show?id=2309405159752371142999
weibo.com/ttarticle/p/show?id=2309405159753491022160