README

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文件的转换~~

Usage no npm install needed!