# babel-plugin-transform-taro-import

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

Latest version **0.1.2** (published 2019-07-15) · BSD-3-Clause license · 0 weekly downloads

## Install

```sh
npm install babel-plugin-transform-taro-import
pnpm add babel-plugin-transform-taro-import
yarn add babel-plugin-transform-taro-import
bun add babel-plugin-transform-taro-import
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2019-07-15 |
| First published | 2019-07-10 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 9.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Erwin |
| Maintainers | ~golddream |
| Keywords | taro |

## Links

- npm: https://www.npmjs.com/package/babel-plugin-transform-taro-import
- Repository: https://github.com/golddream-y/babel-plugin-transform-taro-import
- Homepage: https://github.com/golddream-y/babel-plugin-transform-taro-import#readme
- Issues: https://github.com/golddream-y/babel-plugin-transform-taro-import/issues
- npm.io page: https://npm.io/package/babel-plugin-transform-taro-import

## Alternatives

- [lodash.startswith](https://npm.io/package/lodash.startswith.md) — 769.7K weekly downloads
- [@tarojs/service](https://npm.io/package/@tarojs/service.md) — 33.9K weekly downloads
- [io.extendreality.tilia.indicators.spatialtargets.unity](https://npm.io/package/io.extendreality.tilia.indicators.spatialtargets.unity.md) — 131 weekly downloads
- [@rtarojs/taro](https://npm.io/package/@rtarojs/taro.md) — 90 weekly downloads
- [node-branch-io](https://npm.io/package/node-branch-io.md) — 50 weekly downloads

## Recent versions

- 0.1.2 (latest) — 2019-07-15
- 0.1.1 — 2019-07-10

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

### 效果


#### `{ "pileName": "alipay" }`

```javascript
(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) {});
```

### 使用

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

编辑 `.babelrc`

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

### options

`options` 是一个object.

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

For Example（babel@7+）:

```javascrit
// .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+）

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

---
_Source: https://npm.io/package/babel-plugin-transform-taro-import · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._