babel-plugin-transform-taro-import

用于Taro工程编译前转换代码中对于“@tarojs/taro”的引用

为何使用？

当你有需求如下需求可能会使用：

• 准备对Taro进行外层的封装
• 你的库中引用了一些Taro的各个运行时API的实现

可以看出小程序和 Web 端上组件标准与 API 标准有很大差异，这些差异仅仅通过代码编译手段是无法抹平的，例如你不能直接在编译时将小程序的 <view /> 直接编译成 <div />，因为他们虽然看上去有些类似，但是他们的组件属性有很大不同的，仅仅依靠代码编译，无法做到一致，同理，众多 API 也面临一样的情况。针对这样的情况，Taro 采用了定制一套运行时标准来抹平不同平台之间的差异。

这一套标准主要以三个部分组成，包括标准运行时框架、标准基础组件库、标准端能力 API，其中运行时框架和 API 对应 @taro/taro，组件库对应 @tarojs/components，通过在不同端实现这些标准，从而达到去差异化的目的。

如上（引自：Taro 多端开发实现原理与项目实战），Taro有一部分的端能力API是通过编译时初始化到Taro的核心库上的。所以在编译前你的库引用的是“@tarojs/taro”,编译后（如果你的平台是微信小程序）引用的应该是是“@tarojs/taro-weapp”。但Taro目前编译工具并未对三方库对其核心包的引用做编译，所以我们如果自己的库引用了Taro的核心库且使用的一些运行时的API，就需要该插件。

效果

{ "pileName": "alipay" }

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@tarojs/taro'), require('other')) : typeof define === 'function' && define.amd ? define(['@tarojs/taro', 'other'], factory) : (global = global || self, global.demo = factory(global.Taro, global.other));
})(this, function (Taro, other) {});

      ↓ ↓ ↓ ↓ ↓ ↓

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@tarojs/taro-alipay'), require('other')) : typeof define === 'function' && define.amd ? define(['@tarojs/taro-alipay', 'other'], factory) : (global = global || self, global.demo = factory(global.Taro, global.other));
})(this, function (Taro, other) {});

使用

npm install babel-plugin-transform-taro-import --save-dev

编辑 .babelrc

{
  "plugins": [["transform-taro-import", options]]
}

options

options 是一个object.

{
  "pileName": "alipay",  // 或  h5 、weapp 、swan 、 tt等
}

For Example（babel@7+）:

// .babelrc
"plugins": [
  ["transform-taro-import", { "pileName": "alipay",}]
]

pileName

h5            ->         '@tarojs/taro-h5',
weapp   ->         '@tarojs/taro-weapp',
swan      ->         '@tarojs/taro-swan',
alipay    ->         '@tarojs/taro-alipay',
tt             ->         '@tarojs/taro-tt'

例子

详见工程下的demo。

• .babelrc

  {
    "plugins": [
      [
        "babel-plugin-transform-taro-import",
        {
          "pileName": "alipay"
        }
      ]
    ]
  }

• babel.config.js （babel@7+）

  module.exports = function (api) {
      // demo的量级不需要缓存
      api.cache(false);
    
      /**
       * 获取当前编译平台
       */
      const getCurrentCompilePile = function () {
          return process.env.npm_lifecycle_event ? process.env.npm_lifecycle_event.replace('demo:', '') : null;
      };planning_5.0.md
    
      const plugins = [
          [
              "babel-plugin-transform-taro-import",
              {
                  "pileName": getCurrentCompilePile()
              }
          ]
      ];
    
      return {
          plugins
      };
  };

计划

• 增加测试用例
• 增加debug
• 增加代码构建
• ~~增加ESM文件的转换~~