babel-plugin-transform-taroapi 3.7.0-alpha.2 → 3.7.0-alpha.3

package/__tests__/__snapshots__/index.spec.ts.snap

@@ -1,17 +1,47 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should leave other apis untouched 1`] = `
+exports[`babel-plugin-transform-taroapi should canIUse support! 1`] = `
+"import { canIUse as _canUse } from '@tarojs/taro-h5';
+// 对象的属性或方法
+false;
+false;
+false;
+false;
+
+// 接口参数、回调或者返回值
+true;
+false;
+false;
+false;
+false;
+true;
+
+// 组件的属性
+true;
+true;
+false;"
+`;
+
+exports[`babel-plugin-transform-taroapi should canIUse work or skip! 1`] = `
+"import Taro from '@tarojs/taro-h5';
+function canIUse() {}
+false;
+false;
+canIUse('showToast.object.image');"
+`;
+
+exports[`babel-plugin-transform-taroapi should leave other apis untouched 1`] = `
 "import Taro from '@tarojs/taro-h5';
 Taro.noop;"
 `;
 
-exports[`should move static apis under "Taro" 1`] = `
+exports[`babel-plugin-transform-taroapi should move static apis under "Taro" 1`] = `
 "import Taro from '@tarojs/taro-h5';
 Taro.noop;
 Taro.noop();"
 `;
 
-exports[`should not go wrong when using an api twice 1`] = `
+exports[`babel-plugin-transform-taroapi should not go wrong when using an api twice 1`] = `
 "import Taro, { createAnimation as _createAnimation } from '@tarojs/taro-h5';
 const animation = _createAnimation({
   duration: dura * 1000,
@@ -23,14 +53,14 @@ const resetAnimation = _createAnimation({
 });"
 `;
 
-exports[`should not import taro duplicatly 1`] = `
-"import Taro, { createAnimation as _createAnimation, initPxTransform as _initPxTransform } from "@tarojs/taro-h5";
+exports[`babel-plugin-transform-taroapi should not import taro duplicity 1`] = `
+"import Taro, { createAnimation as _createAnimation, initPxTransform as _initPxTransform } from '@tarojs/taro-h5';
 Taro.Component;
 _createAnimation();
 _initPxTransform();"
 `;
 
-exports[`should preserve assignments in lefthands 1`] = `
+exports[`babel-plugin-transform-taroapi should preserve assignments in left hands 1`] = `
 "import Taro, { createAnimation as _createAnimation, request as _request } from '@tarojs/taro-h5';
 let animation;
 animation = _createAnimation({
@@ -44,18 +74,18 @@ Taro.request = '';
 Taro['request'] = '';"
 `;
 
-exports[`should preserve default imports 1`] = `
+exports[`babel-plugin-transform-taroapi should preserve default imports 1`] = `
 "import Taro from '@tarojs/taro-h5';
 console.log(Taro);"
 `;
 
-exports[`should support rename of imported names 1`] = `
+exports[`babel-plugin-transform-taroapi should support rename of imported names 1`] = `
 "// import { inject as mobxInject, observer as mobxObserver } from '@tarojs/mobx'
-import Taro from "@tarojs/taro-h5";
+import Taro from '@tarojs/taro-h5';
 export class Connected extends Taro.Component {}"
 `;
 
-exports[`should work! 1`] = `
+exports[`babel-plugin-transform-taroapi should work! 1`] = `
 "import Taro, { setStorage as _setStorage, initPxTransform as _initPxTransform, getStorage as _getStorage } from '@tarojs/taro-h5';
 _initPxTransform(Taro.param);
 _initPxTransform();

package/__tests__/index.spec.ts

@@ -1,16 +1,17 @@
 import * as babel from '@babel/core'
 import * as t from '@babel/types'
-import * as apis from '@tarojs/plugin-platform-h5/dist/taroApis'
+import * as definition from '@tarojs/plugin-platform-h5/dist/definition.json'
 
 import plugin from '../src'
 
 type ImportType = babel.types.ImportSpecifier | babel.types.ImportDefaultSpecifier | babel.types.ImportNamespaceSpecifier
 
+const packageName = '@tarojs/taro-h5'
 const pluginOptions = [
   plugin,
   {
-    apis,
-    packageName: '@tarojs/taro-h5'
+    packageName,
+    definition,
   }
 ]
 const getNamedImports = (importSpecifiers: (t.ImportSpecifier | t.ImportDefaultSpecifier | t.ImportNamespaceSpecifier)[]) => {
@@ -21,148 +22,188 @@ const getNamedImports = (importSpecifiers: (t.ImportSpecifier | t.ImportDefaultS
     return prev
   }, new Set())
 }
-
-it('should work!', function () {
-  const code = `
-    import Taro, { setStorage, initPxTransform, param } from '@tarojs/taro-h5';
-    initPxTransform(param)
-    Taro.initPxTransform()
-    Taro.initPxTransform()
-    Taro['getStorage']()
-    setStorage()
-    export { Taro }
-  `
-  const result = babel.transform(code, { ast: true, configFile: false, plugins: [pluginOptions] })
-
-  expect(result?.code).toMatchSnapshot()
-})
-
-it('should leave other apis untouched', function () {
-  const code = `
-    import Taro from '@tarojs/taro-h5'
-    Taro.noop
-  `
-  const result = babel.transform(code, { ast: true, configFile: false, plugins: [pluginOptions] }) as babel.BabelFileResult
-  expect(result.code).toMatchSnapshot()
-
-  const ast = result.ast as t.File
-  const body = ast.program.body as [t.ImportDeclaration, t.ExpressionStatement]
-  expect(t.isImportDeclaration(body[0])).toBeTruthy()
-  expect(t.isExpressionStatement(body[1])).toBeTruthy()
-  const defaultImport = body[0].specifiers.find(v => t.isImportDefaultSpecifier(v)) as ImportType
-  expect(defaultImport).toBeTruthy()
-
-  const taroName = defaultImport.local.name
-  const namedImports = getNamedImports(body[0].specifiers)
-  expect(namedImports).toEqual(new Set())
-  expect(t.isMemberExpression(body[1].expression)).toBeTruthy()
-
-  const obj = t.memberExpression(
-    t.identifier(taroName),
-    t.identifier('noop'),
-  )
-  delete obj.optional
-  
-  expect((body[1].expression as t.MemberExpression)).toMatchObject(obj)
-})
-
-it('should move static apis under "Taro"', function () {
-  const code = `
-    import { noop } from '@tarojs/taro-h5';
-    noop;
-    noop();
-  `
-
-  const result = babel.transform(code, { ast: true, configFile: false, plugins: [pluginOptions] })
-  expect(result?.code).toMatchSnapshot()
-
-  const ast = result?.ast as t.File
-  const body = ast.program.body as [t.ImportDeclaration, t.ExpressionStatement]
-  expect(t.isImportDeclaration(body[0])).toBeTruthy()
-  expect(t.isExpressionStatement(body[1])).toBeTruthy()
-  const defaultImport = body[0].specifiers.find(v => t.isImportDefaultSpecifier(v))
-  expect(defaultImport).toBeTruthy()
-
-  const taroName = defaultImport!.local.name
-  let memberExpression: any = body[1].expression
-  if (t.isCallExpression(body[1])) {
-    memberExpression = ((body[1] as t.ExpressionStatement).expression as t.CallExpression).callee
-  }
-  expect(memberExpression).toMatchObject(t.memberExpression(
-    t.identifier(taroName),
-    t.identifier('noop')
-  ))
-})
-
-it('should not import taro duplicatly', function () {
-  const code = `
-    import { Component } from "@tarojs/taro-h5";
-    import Taro from '@tarojs/taro-h5';
-    Component
-    Taro.createAnimation()
-    Taro.initPxTransform()
-  `
-
-  const result = babel.transform(code, { ast: true, configFile: false, plugins: [pluginOptions] })
-  expect(result?.code).toMatchSnapshot()
-  const ast = result?.ast as t.File
-  const body = ast.program.body as [t.ImportDeclaration, t.ExpressionStatement, t.ExpressionStatement]
-  expect(t.isImportDeclaration(body[0])).toBeTruthy()
-  expect(t.isExpressionStatement(body[1])).toBeTruthy()
-  expect(t.isExpressionStatement(body[2])).toBeTruthy()
-})
-
-it('should not go wrong when using an api twice', function () {
-  const code = `
-    import Taro from '@tarojs/taro-h5';
-    const animation = Taro.createAnimation({
-      duration: dura * 1000,
-      timingFunction: 'linear'
-    })
-    const resetAnimation = Taro.createAnimation({
-      duration: 0,
-      timingFunction: 'linear'
-    })
-  `
-  expect(() => {
-    const result = babel.transform(code, { ast: true, configFile: false, plugins: [pluginOptions] })
+const babelTransform = (code = '') => babel.transform(code, { ast: true, configFile: false, plugins: [pluginOptions] })
+
+describe('babel-plugin-transform-taroapi', () => {
+  test('should work!', function () {
+    const code = `
+      import Taro, { setStorage, initPxTransform, param } from '${packageName}';
+      initPxTransform(param)
+      Taro.initPxTransform()
+      Taro.initPxTransform()
+      Taro['getStorage']()
+      setStorage()
+      export { Taro }
+    `
+    const result = babelTransform(code)
+    expect(result?.code).toMatchSnapshot()
+  })
+
+  test('should leave other apis untouched', function () {
+    const code = `
+      import Taro from '${packageName}'
+      Taro.noop
+    `
+    const result = babelTransform(code)
     expect(result?.code).toMatchSnapshot()
-  }).not.toThrowError()
-})
-
-it('should preserve default imports', function () {
-  const code = `
-    import Taro from '@tarojs/taro-h5'
-    console.log(Taro)
-  `
-  const result = babel.transform(code, { ast: true, configFile: false, plugins: [pluginOptions] })
-  expect(result?.code).toMatchSnapshot()
-})
 
-it('should preserve assignments in lefthands', function () {
-  const code = `
-    import Taro from '@tarojs/taro-h5'
-    let animation
-    animation = Taro.createAnimation({
-      transformOrigin: "50% 50%",
-      duration: 1000,
-      timingFunction: "ease",
-      delay: 0
-    });
-    Taro.request()
-    Taro.request = ''
-    Taro['request'] = ''
-  `
-  const result = babel.transform(code, { ast: true, configFile: false, plugins: [pluginOptions] })
-  expect(result?.code).toMatchSnapshot()
-})
+    const ast = result?.ast as t.File
+    const body = ast.program.body as [t.ImportDeclaration, t.ExpressionStatement]
+    expect(t.isImportDeclaration(body[0])).toBeTruthy()
+    expect(t.isExpressionStatement(body[1])).toBeTruthy()
+    const defaultImport = body[0].specifiers.find(v => t.isImportDefaultSpecifier(v)) as ImportType
+    expect(defaultImport).toBeTruthy()
+
+    const taroName = defaultImport.local.name
+    const namedImports = getNamedImports(body[0].specifiers)
+    expect(namedImports).toEqual(new Set())
+    expect(t.isMemberExpression(body[1].expression)).toBeTruthy()
+
+    const obj = t.memberExpression(
+      t.identifier(taroName),
+      t.identifier('noop'),
+    )
+    delete obj.optional
+
+    expect((body[1].expression as t.MemberExpression)).toMatchObject(obj)
+  })
+
+  test('should move static apis under "Taro"', function () {
+    const code = `
+      import { noop } from '${packageName}';
+      noop;
+      noop();
+    `
+
+    const result = babelTransform(code)
+    expect(result?.code).toMatchSnapshot()
 
-it('should support rename of imported names', function () {
-  const code = `
-  // import { inject as mobxInject, observer as mobxObserver } from '@tarojs/mobx'
-  import { Component as TaroComponent } from "@tarojs/taro-h5";
-  export class Connected extends TaroComponent {}
-  `
-  const result = babel.transform(code, { ast: true, configFile: false, plugins: [pluginOptions] })
-  expect(result?.code).toMatchSnapshot()
+    const ast = result?.ast as t.File
+    const body = ast.program.body as [t.ImportDeclaration, t.ExpressionStatement]
+    expect(t.isImportDeclaration(body[0])).toBeTruthy()
+    expect(t.isExpressionStatement(body[1])).toBeTruthy()
+    const defaultImport = body[0].specifiers.find(v => t.isImportDefaultSpecifier(v))
+    expect(defaultImport).toBeTruthy()
+
+    const taroName = defaultImport!.local.name
+    let memberExpression: any = body[1].expression
+    if (t.isCallExpression(body[1])) {
+      memberExpression = ((body[1] as t.ExpressionStatement).expression as t.CallExpression).callee
+    }
+    expect(memberExpression).toMatchObject(t.memberExpression(
+      t.identifier(taroName),
+      t.identifier('noop')
+    ))
+  })
+
+  test('should not import taro duplicity', function () {
+    const code = `
+      import { Component } from '${packageName}';
+      import Taro from '${packageName}';
+      Component
+      Taro.createAnimation()
+      Taro.initPxTransform()
+    `
+
+    const result = babelTransform(code)
+    expect(result?.code).toMatchSnapshot()
+    const ast = result?.ast as t.File
+    const body = ast.program.body as [t.ImportDeclaration, t.ExpressionStatement, t.ExpressionStatement]
+    expect(t.isImportDeclaration(body[0])).toBeTruthy()
+    expect(t.isExpressionStatement(body[1])).toBeTruthy()
+    expect(t.isExpressionStatement(body[2])).toBeTruthy()
+  })
+
+  test('should not go wrong when using an api twice', function () {
+    const code = `
+      import Taro from '${packageName}';
+      const animation = Taro.createAnimation({
+        duration: dura * 1000,
+        timingFunction: 'linear'
+      })
+      const resetAnimation = Taro.createAnimation({
+        duration: 0,
+        timingFunction: 'linear'
+      })
+    `
+    expect(() => {
+      const result = babelTransform(code)
+      expect(result?.code).toMatchSnapshot()
+    }).not.toThrowError()
+  })
+
+  test('should preserve default imports', function () {
+    const code = `
+      import Taro from '${packageName}'
+      console.log(Taro)
+    `
+    const result = babelTransform(code)
+    expect(result?.code).toMatchSnapshot()
+  })
+
+  test('should preserve assignments in left hands', function () {
+    const code = `
+      import Taro from '${packageName}'
+      let animation
+      animation = Taro.createAnimation({
+        transformOrigin: "50% 50%",
+        duration: 1000,
+        timingFunction: "ease",
+        delay: 0
+      });
+      Taro.request()
+      Taro.request = ''
+      Taro['request'] = ''
+    `
+    const result = babelTransform(code)
+    expect(result?.code).toMatchSnapshot()
+  })
+
+  test('should support rename of imported names', function () {
+    const code = `
+    // import { inject as mobxInject, observer as mobxObserver } from '@tarojs/mobx'
+    import { Component as TaroComponent } from '${packageName}';
+    export class Connected extends TaroComponent {}
+    `
+    const result = babelTransform(code)
+    expect(result?.code).toMatchSnapshot()
+  })
+
+  test('should canIUse work or skip!', function () {
+    const code = `
+    import Taro from '${packageName}'
+    function canIUse() {}
+    Taro.canIUse('showToast.object.image')
+    Taro['canIUse']('showToast.object.image')
+    canIUse('showToast.object.image')
+    `
+    const result = babelTransform(code)
+    expect(result?.code).toMatchSnapshot()
+  })
+
+  test('should canIUse support!', function () {
+    const code = `
+    import { canIUse as canUse } from '${packageName}';
+    // 对象的属性或方法
+    canUse('console.log')
+    canUse('CameraContext.onCameraFrame')
+    canUse('CameraFrameListener.start')
+    canUse('Image.src')
+
+    // 接口参数、回调或者返回值
+    canUse('openBluetoothAdapter')
+    canUse('getSystemInfoSync.return.safeArea.left')
+    canUse('getSystemInfo.success.screenWidth')
+    canUse('showToast.object.image')
+    canUse('onCompassChange.callback.direction')
+    canUse('request.object.method.GET')
+
+    // 组件的属性
+    canUse('live-player')
+    canUse('text.selectable')
+    canUse('button.open-type.contact')
+    `
+    const result = babelTransform(code)
+    expect(result?.code).toMatchSnapshot()
+  })
 })

package/dist/index.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const lodash_1 = require("lodash");
 const plugin = function (babel) {
     const t = babel.types;
     // 这些变量需要在每个 program 里重置
@@ -7,13 +8,43 @@ const plugin = function (babel) {
     let taroName;
     let needDefault;
     let referTaro;
+    function canIUse(definition, scheme = '') {
+        if (!scheme)
+            return false;
+        const o = (0, lodash_1.set)({}, scheme, true);
+        return (0, lodash_1.isMatchWith)(definition, o, (a, b) => {
+            if (a === '*' || b === true)
+                return true;
+        });
+    }
+    function replaceCanIUse(ast, definition) {
+        const args = ast.node.arguments;
+        if (args.length < 1)
+            return;
+        // Note: 暂不考虑其他类型的参数映射
+        if (t.isStringLiteral(args[0])) {
+            const isSupported = canIUse(definition, args[0].value);
+            ast.replaceInline(t.booleanLiteral(isSupported));
+        }
+    }
     return {
         name: 'babel-plugin-transform-taro-api',
+        pre() {
+            const { opts = {} } = this;
+            const { apis = new Set(), bindingName = 'Taro', packageName = '@tarojs/taro-h5', definition = {} } = opts;
+            this.definition = Object.assign(Object.assign(Object.assign({}, definition.apis), definition.components), { [this.canIUse]: '*' });
+            this.bindingName = bindingName;
+            this.packageName = packageName;
+            this.canIUse = 'canIUse';
+            if (apis.size < 1) {
+                apis.add(this.canIUse);
+                Object.keys(definition.apis || {}).forEach(key => apis.add(key));
+            }
+            this.apis = apis;
+        },
         visitor: {
-            ImportDeclaration(ast, state) {
-                const packageName = state.opts.packageName;
-                const apis = state.opts.apis;
-                if (ast.node.source.value !== packageName)
+            ImportDeclaration(ast) {
+                if (ast.node.source.value !== this.packageName)
                     return;
                 ast.node.specifiers.forEach(node => {
                     if (t.isImportDefaultSpecifier(node)) {
@@ -21,8 +52,9 @@ const plugin = function (babel) {
                         taroName = node.local.name;
                     }
                     else if (t.isImportSpecifier(node)) {
-                        const propertyName = node.imported.name;
-                        if (apis.has(propertyName)) { // 记录api名字
+                        const { imported } = node;
+                        const propertyName = t.isIdentifier(imported) ? imported.name : imported.value;
+                        if (this.apis.has(propertyName)) { // 记录api名字
                             ast.scope.rename(node.local.name);
                             invokedApis.set(propertyName, node.local.name);
                         }
@@ -39,9 +71,8 @@ const plugin = function (babel) {
                     }
                 });
             },
-            MemberExpression(ast, state) {
+            MemberExpression(ast) {
                 /* 处理Taro.xxx */
-                const apis = state.opts.apis;
                 const isTaro = t.isIdentifier(ast.node.object, { name: taroName });
                 const property = ast.node.property;
                 let propertyName = null;
@@ -56,7 +87,7 @@ const plugin = function (babel) {
                 if (!propertyName)
                     return;
                 // 同一api使用多次, 读取变量名
-                if (apis.has(propertyName)) {
+                if (this.apis.has(propertyName)) {
                     const parentNode = ast.parent;
                     const isAssignment = t.isAssignmentExpression(parentNode) && parentNode.left === ast.node;
                     if (!isAssignment) {
@@ -77,16 +108,42 @@ const plugin = function (babel) {
                     needDefault = true;
                 }
             },
+            CallExpression(ast) {
+                if (!ast.scope.hasReference(this.canIUse))
+                    return;
+                const callee = ast.node.callee;
+                if (t.isMemberExpression(callee) && t.isIdentifier(callee.object, { name: taroName })) {
+                    let propertyName = null;
+                    let propName = 'name';
+                    // 兼容一下 Taro['xxx']
+                    if (t.isStringLiteral(callee.property)) {
+                        propName = 'value';
+                    }
+                    propertyName = callee.property[propName];
+                    if (propertyName === this.canIUse) {
+                        // Taro.canIUse or Taro['canIUse']
+                        replaceCanIUse(ast, this.definition);
+                    }
+                }
+                else if (invokedApis.has(this.canIUse)) {
+                    const { name } = t.identifier(invokedApis.get(this.canIUse));
+                    const isCanIUse = t.isIdentifier(callee, { name });
+                    // canIUse as _canIUse
+                    if (isCanIUse)
+                        replaceCanIUse(ast, this.definition);
+                }
+            },
             Program: {
                 enter(ast) {
                     needDefault = false;
                     referTaro = [];
                     invokedApis.clear();
-                    taroName = ast.scope.getBinding('Taro')
-                        ? ast.scope.generateUid('Taro')
-                        : 'Taro';
+                    taroName = ast.scope.getBinding(this.bindingName)
+                        ? ast.scope.generateUid(this.bindingName)
+                        : this.bindingName;
                 },
-                exit(ast, state) {
+                exit(ast) {
+                    const that = this;
                     // 防止重复引入
                     let isTaroApiImported = false;
                     referTaro.forEach(node => {
@@ -94,8 +151,7 @@ const plugin = function (babel) {
                     });
                     ast.traverse({
                         ImportDeclaration(ast) {
-                            const packageName = state.opts.packageName;
-                            const isImportingTaroApi = ast.node.source.value === packageName;
+                            const isImportingTaroApi = ast.node.source.value === that.packageName;
                             if (!isImportingTaroApi)
                                 return;
                             if (isTaroApiImported)
@@ -113,7 +169,18 @@ const plugin = function (babel) {
                             else {
                                 ast.node.specifiers = namedImports;
                             }
-                        }
+                        },
+                        CallExpression(ast) {
+                            if (!invokedApis.has(that.canIUse))
+                                return;
+                            const callee = ast.node.callee;
+                            const { name } = t.identifier(invokedApis.get(that.canIUse));
+                            const isCanIUse = t.isIdentifier(callee, { name });
+                            if (isCanIUse) {
+                                // canIUse as _use
+                                replaceCanIUse(ast, that.definition);
+                            }
+                        },
                     });
                 }
             }

package/{jest.config.js → jest.config.ts}

@@ -1,4 +1,6 @@
-module.exports = {
+import type { Config } from 'jest'
+
+const config: Config = {
   collectCoverage: false,
   moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'json', 'node'],
   preset: 'ts-jest',
@@ -18,3 +20,5 @@ module.exports = {
   },
   transformIgnorePatterns: ['<rootDir>/node_modules/']
 }
+
+export default config

package/package.json

@@ -1,7 +1,10 @@
 {
   "name": "babel-plugin-transform-taroapi",
-  "version": "3.7.0-alpha.2",
+  "version": "3.7.0-alpha.3",
   "main": "dist/index.js",
+  "dependencies": {
+    "lodash": "^4.17.21"
+  },
   "devDependencies": {
     "@babel/core": "^7.14.5",
     "@babel/types": "^7.14.5",

package/src/index.ts

@@ -1,6 +1,16 @@
-const plugin = function (babel: {
-  types: any
-}) {
+import { isMatchWith, set } from 'lodash'
+
+import type * as BabelCore from '@babel/core'
+
+interface IState extends BabelCore.PluginPass {
+  apis: Set<string>
+  bindingName: string
+  packageName: string
+  canIUse: string
+  definition: Record<string, any>
+}
+
+const plugin = function (babel: typeof BabelCore): BabelCore.PluginObj<IState> {
   const t = babel.types
 
   // 这些变量需要在每个 program 里重置
@@ -10,21 +20,57 @@ const plugin = function (babel: {
 
   let referTaro: any[]
 
+  function canIUse (definition, scheme = '') {
+    if (!scheme) return false
+    const o = set({}, scheme, true)
+    return isMatchWith(definition, o, (a, b) => {
+      if (a === '*' || b === true) return true
+    })
+  }
+
+  function replaceCanIUse (ast: BabelCore.NodePath<BabelCore.types.CallExpression>, definition) {
+    const args = ast.node.arguments
+
+    if (args.length < 1) return
+
+    // Note: 暂不考虑其他类型的参数映射
+    if (t.isStringLiteral(args[0])) {
+      const isSupported = canIUse(definition, args[0].value)
+      ast.replaceInline(t.booleanLiteral(isSupported))
+    }
+  }
+
   return {
     name: 'babel-plugin-transform-taro-api',
+    pre () {
+      const { opts = {} as any } = this
+      const { apis = new Set<string>(), bindingName = 'Taro', packageName = '@tarojs/taro-h5', definition = {} } = opts
+      this.definition = {
+        ...definition.apis,
+        ...definition.components,
+        [this.canIUse]: '*'
+      }
+      this.bindingName = bindingName
+      this.packageName = packageName
+      this.canIUse = 'canIUse'
+      if (apis.size < 1) {
+        apis.add(this.canIUse)
+        Object.keys(definition.apis || {}).forEach(key => apis.add(key))
+      }
+      this.apis = apis
+    },
     visitor: {
-      ImportDeclaration (ast, state) {
-        const packageName = state.opts.packageName
-        const apis = state.opts.apis
-        if (ast.node.source.value !== packageName) return
+      ImportDeclaration (ast) {
+        if (ast.node.source.value !== this.packageName) return
 
         ast.node.specifiers.forEach(node => {
           if (t.isImportDefaultSpecifier(node)) {
             needDefault = true
             taroName = node.local.name
           } else if (t.isImportSpecifier(node)) {
-            const propertyName = node.imported.name
-            if (apis.has(propertyName)) { // 记录api名字
+            const { imported } = node
+            const propertyName = t.isIdentifier(imported) ? imported.name : imported.value
+            if (this.apis.has(propertyName)) { // 记录api名字
               ast.scope.rename(node.local.name)
               invokedApis.set(propertyName, node.local.name)
             } else { // 如果是未实现的api 改成Taro.xxx
@@ -45,9 +91,8 @@ const plugin = function (babel: {
           }
         })
       },
-      MemberExpression (ast, state) {
+      MemberExpression (ast) {
         /* 处理Taro.xxx */
-        const apis = state.opts.apis
         const isTaro = t.isIdentifier(ast.node.object, { name: taroName })
         const property = ast.node.property
         let propertyName: string | null = null
@@ -64,12 +109,12 @@ const plugin = function (babel: {
         if (!propertyName) return
 
         // 同一api使用多次, 读取变量名
-        if (apis.has(propertyName)) {
+        if (this.apis.has(propertyName)) {
           const parentNode = ast.parent
           const isAssignment = t.isAssignmentExpression(parentNode) && parentNode.left === ast.node
 
           if (!isAssignment) {
-            let identifier: any
+            let identifier: BabelCore.types.Identifier
             if (invokedApis.has(propertyName)) {
               identifier = t.identifier(invokedApis.get(propertyName)!)
             } else {
@@ -84,17 +129,41 @@ const plugin = function (babel: {
           needDefault = true
         }
       },
+      CallExpression (ast) {
+        if (!ast.scope.hasReference(this.canIUse)) return
+        const callee = ast.node.callee
+        if (t.isMemberExpression(callee) && t.isIdentifier(callee.object, { name: taroName })) {
+          let propertyName: string | null = null
+          let propName = 'name'
+
+          // 兼容一下 Taro['xxx']
+          if (t.isStringLiteral(callee.property)) {
+            propName = 'value'
+          }
+          propertyName = callee.property[propName]
+          if (propertyName === this.canIUse) {
+            // Taro.canIUse or Taro['canIUse']
+            replaceCanIUse(ast, this.definition)
+          }
+        } else if (invokedApis.has(this.canIUse)) {
+          const { name } = t.identifier(invokedApis.get(this.canIUse)!)
+          const isCanIUse = t.isIdentifier(callee, { name })
+          // canIUse as _canIUse
+          if (isCanIUse) replaceCanIUse(ast, this.definition)
+        }
+      },
       Program: {
         enter (ast) {
           needDefault = false
           referTaro = []
           invokedApis.clear()
 
-          taroName = ast.scope.getBinding('Taro')
-            ? ast.scope.generateUid('Taro')
-            : 'Taro'
+          taroName = ast.scope.getBinding(this.bindingName)
+            ? ast.scope.generateUid(this.bindingName)
+            : this.bindingName
         },
-        exit (ast, state) {
+        exit (ast) {
+          const that = this
           // 防止重复引入
           let isTaroApiImported = false
           referTaro.forEach(node => {
@@ -103,8 +172,7 @@ const plugin = function (babel: {
 
           ast.traverse({
             ImportDeclaration (ast) {
-              const packageName = state.opts.packageName
-              const isImportingTaroApi = ast.node.source.value === packageName
+              const isImportingTaroApi = ast.node.source.value === that.packageName
               if (!isImportingTaroApi) return
               if (isTaroApiImported) return ast.remove()
               isTaroApiImported = true
@@ -119,11 +187,22 @@ const plugin = function (babel: {
               } else {
                 ast.node.specifiers = namedImports
               }
-            }
+            },
+            CallExpression (ast) {
+              if (!invokedApis.has(that.canIUse)) return
+              const callee = ast.node.callee
+              const { name } = t.identifier(invokedApis.get(that.canIUse)!)
+              const isCanIUse = t.isIdentifier(callee, { name })
+              if (isCanIUse) {
+                // canIUse as _use
+                replaceCanIUse(ast, that.definition)
+              }
+            },
           })
         }
       }
     }
   }
 }
+
 export default plugin

package/types.d.ts

@@ -1,5 +0,0 @@
-declare module '@tarojs/taro-h5/dist/taroApis' {
-  export const apis: {
-    [key: string]: boolean
-  }
-}