fix(components): 组件库各框架适配层先走 babel 编译, fix #6758

package.json

@@ -51,9 +51,10 @@
     "@babel/plugin-proposal-class-properties": "^7.5.5",
     "@babel/plugin-proposal-decorators": "^7.6.0",
     "@babel/plugin-proposal-do-expressions": "^7.8.3",
-    "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
+    "@babel/plugin-proposal-object-rest-spread": "^7.10.3",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-transform-react-jsx": "^7.3.0",
+    "@babel/plugin-transform-runtime": "^7.10.3",
     "@babel/preset-env": "^7.6.2",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.6.0",

packages/taro-components/.gitignore

@@ -12,10 +12,11 @@ src/demo
 
 # build
 dist
+dist-h5
 build
 
 # jest
 coverage
 __snapshots__
 .stencil
-loader
+loader

packages/taro-components/babel.config.js

@@ -6,5 +6,6 @@ module.exports = {
   ],
   plugins: [
     '@babel/plugin-proposal-class-properties'
-  ]
+  ],
+  babelrcRoots: ['./h5/*']
 }

packages/taro-components/h5/.babelrc.js

@@ -0,0 +1,16 @@
+module.exports = {
+  presets: [
+    ['@babel/env', {
+      targets: {
+        ios: '9',
+        android: '5'
+      },
+      modules: false
+    }]
+  ],
+  plugins: [
+    '@babel/plugin-proposal-class-properties',
+    '@babel/plugin-proposal-object-rest-spread',
+    '@babel/plugin-transform-runtime'
+  ]
+}

packages/taro-components/h5/vue/components/icon.vue → packages/taro-components/h5/vue/components/icon.js

@@ -1,4 +1,3 @@
-<script>
 import { listeners } from '../mixins/listeners'
 import { refs } from '../mixins/refs'
 export default {
@@ -10,12 +9,11 @@ export default {
   render (createElement) {
     const iconType = this.type.replace(/_/g, '-')
     return createElement('taro-icon-core', {
-      'class': ['hydrated', `weui-icon-${iconType}`],
+      class: ['hydrated', `weui-icon-${iconType}`],
       attrs: {
         type: this.type
       },
-      'on': this.listeners
+      on: this.listeners
     }, this.$slots.default)
   }
 }
-</script>

packages/taro-components/h5/vue/components/image.vue → packages/taro-components/h5/vue/components/image.js

@@ -1,4 +1,3 @@
-<script>
 import { listeners } from '../mixins/listeners'
 import { refs } from '../mixins/refs'
 export default {
@@ -9,14 +8,13 @@ export default {
   },
   render (createElement) {
     return createElement('taro-image-core', {
-      'class': ['hydrated', {
+      class: ['hydrated', {
         'taro-img__widthfix': this.mode === 'widthFix'
       }],
       attrs: {
         mode: this.mode
       },
-      'on': this.listeners
+      on: this.listeners
     }, this.$slots.default)
   }
 }
-</script>

packages/taro-components/h5/vue/components/picker.vue → packages/taro-components/h5/vue/components/picker.js

@@ -1,4 +1,3 @@
-<script>
 import { listeners } from '../mixins/listeners'
 import { refs } from '../mixins/refs'
 export default {
@@ -20,6 +19,7 @@ export default {
     }
   },
   render (createElement) {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
     const self = this
 
     return createElement('taro-picker-core', {
@@ -37,4 +37,3 @@ export default {
     }, self.$slots.default)
   }
 }
-</script>

packages/taro-components/h5/vue/components/scroll-view.vue → packages/taro-components/h5/vue/components/scroll-view.js

@@ -1,4 +1,3 @@
-<script>
 import { listeners } from '../mixins/listeners'
 import { refs } from '../mixins/refs'
 export default {
@@ -9,6 +8,7 @@ export default {
     scrollY: Boolean
   },
   render (createElement) {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
     const self = this
 
     const attrs = {}
@@ -32,4 +32,3 @@ export default {
     }, self.$slots.default)
   }
 }
-</script>

packages/taro-components/h5/vue/components/text.vue → packages/taro-components/h5/vue/components/text.js

@@ -1,4 +1,3 @@
-<script>
 import { listeners } from '../mixins/listeners'
 import { refs } from '../mixins/refs'
 export default {
@@ -9,14 +8,13 @@ export default {
   },
   render (createElement) {
     return createElement('taro-text-core', {
-      'class': ['hydrated taro-text', {
+      class: ['hydrated taro-text', {
         'taro-text__selectable': this.selectable
       }],
       attrs: {
         selectable: this.selectable
       },
-      'on': this.listeners
+      on: this.listeners
     }, this.$slots.default)
   }
 }
-</script>

packages/taro-components/h5/vue/index.js

@@ -1,11 +1,11 @@
 import Vue from 'vue'
 import createComponent from './createComponent'
 import createFormsComponent from './createFormsComponent'
-import Picker from './components/picker.vue'
-import Text from './components/text.vue'
-import Image from './components/image.vue'
-import Icon from './components/icon.vue'
-import ScrollView from './components/scroll-view.vue'
+import Picker from './components/picker'
+import Text from './components/text'
+import Image from './components/image'
+import Icon from './components/icon'
+import ScrollView from './components/scroll-view'
 
 import { simpleComponents } from './simpleComponents'
 

packages/taro-components/package.json

@@ -21,7 +21,8 @@
   "collection": "dist/collection/collection-manifest.json",
   "collection:main": "dist/collection/index.js",
   "scripts": {
-    "build": "stencil build --config stencil.config.ts",
+    "build-h5": "babel -d dist-h5 h5",
+    "build": "npm run build-h5 & stencil build --config stencil.config.ts",
     "dev": "stencil build --config stencil.config.ts --watch",
     "test": "karmatic --files '__tests__/**.spec.js' --coverage false",
     "test:ci": "karmatic --files '__tests__/**.spec.js' --coverage false",
@@ -47,6 +48,7 @@
     "weui": "^1.1.2"
   },
   "devDependencies": {
+    "@babel/cli": "^7.10.3",
     "@stencil/sass": "^1.1.1",
     "jquery": "^3.4.1",
     "simulant": "^0.2.2",

packages/taro-loader/src/h5.ts

@@ -43,7 +43,7 @@ var tabbarSelectedIconPath = []
 })
 `
   const vue = `
-import '@tarojs/components/h5/vue'
+import '@tarojs/components/dist-h5/vue'
 `
 
   const code = `import { createRouter } from '@tarojs/taro'

packages/taro-webpack-runner/src/config/dev.conf.ts

@@ -103,7 +103,7 @@ export default function (appPath: string, config: Partial<BuildConfig>): any {
 
   const mode = 'development'
 
-  alias['@tarojs/components$'] = `@tarojs/components/h5/${config.framework === 'vue' ? 'vue' : 'react'}`
+  alias['@tarojs/components$'] = `@tarojs/components/dist-h5/${config.framework === 'vue' ? 'vue' : 'react'}`
 
   if (config.framework === 'vue') {
     const VueLoaderPlugin = require('vue-loader/lib/plugin')