chore: vite打包配置修改，添加taro标签处理 (jd-opensource#1766)

* feat: 添加range组件、calendar组件在线文档 * fix: 文档调整 * fix: 重构calendar组件 * feat: 日历组件重构，文档修改，功能完善 * fix: 格式化 * fix: 代码格式化调整。 * fix: 去除无用代码 * fix: 文档调整 * fix: 文档调整 * fix: taro demo 样式修改 * feat: range组件功能完善，新增竖向操作，刻度展示。 * fix: 冲突解决 * feat: taro功能新增，兼容处理，文档修改 * feat: 添加range组件，jdt主题色 * fix: 修改组件初始化逻辑 * feat: 新增h5 日期多选功能 * feat: taro版本添加日期多选功能 * fix: 修复多选，无法选中开头结尾日期问题 * fix: 文档修改，添加en-US 文档 * fix: 文档完善 * fix: calendar，demo错误修复 * fix: swiper文档修改 * fix: 日历组件问题修复 * fix: calendar taro兼容问题调整 * fix: taro转h5问题修改 * fix: 日历组件修改，vite配置修改，新增plugin * fix: 配置项修改 Co-authored-by: lkjh3214 <[email protected]> Co-authored-by: love_forever <[email protected]>
zhouLion · Oct 21, 2022 · 727c0fe · 727c0fe
1 parent 2041d07
commit 727c0fe
Show file tree

Hide file tree

Showing 4 changed files with 146 additions and 144 deletions.
diff --git a/src/packages/__VUE/calendar/index.taro.vue b/src/packages/__VUE/calendar/index.taro.vue
@@ -1,157 +1,35 @@
 <template>
-  <template v-if="ENV != ENV_TYPE.WEB">
-    <nut-popup
-      v-if="poppable"
-      v-model:visible="show"
-      position="bottom"
-      round
-      closeable
-      @click-overlay="closePopup"
-      @click-close-icon="closePopup"
-      :style="{ height: '85vh' }"
-    >
-      <nut-calendar-item
-        v-if="show"
-        ref="calendarRef"
-        :type="type"
-        :is-auto-back-fill="isAutoBackFill"
-        :poppable="poppable"
-        :title="title"
-        :default-value="defaultValue"
-        :start-date="startDate"
-        :end-date="endDate"
-        @update="update"
-        @close="close"
-        @choose="choose"
-        @select="select"
-        :confirm-text="confirmText"
-        :start-text="startText"
-        :end-text="endText"
-        :show-today="showToday"
-        :show-title="showTitle"
-        :show-sub-title="showSubTitle"
-        :to-date-animation="toDateAnimation"
-      >
-        <template v-slot:btn v-if="showTopBtn">
-          <slot name="btn"> </slot>
-        </template>
-        <template v-slot:day="date" v-if="dayInfo">
-          <slot name="day" :date="date.date"> </slot>
-        </template>
-        <template v-slot:topInfo="date" v-if="topInfo">
-          <slot name="topInfo" :date="date.date"> </slot>
-        </template>
-        <template v-slot:bottomInfo="date" v-if="bottomInfo">
-          <slot name="bottomInfo" :date="date.date"> </slot>
-        </template>
-      </nut-calendar-item>
-    </nut-popup>
-
+  <nut-popup
+    v-if="poppable"
+    v-model:visible="show"
+    position="bottom"
+    round
+    closeable
+    @click-overlay="closePopup"
+    @click-close-icon="closePopup"
+    :style="{ height: '85vh' }"
+  >
     <nut-calendar-item
-      v-else
+      v-if="show"
+      ref="calendarRef"
       :type="type"
       :is-auto-back-fill="isAutoBackFill"
       :poppable="poppable"
       :title="title"
-      :confirm-text="confirmText"
-      :start-text="startText"
-      :end-text="endText"
       :default-value="defaultValue"
       :start-date="startDate"
       :end-date="endDate"
+      @update="update"
       @close="close"
       @choose="choose"
       @select="select"
-      :show-title="showTitle"
-      :show-sub-title="showSubTitle"
-      :to-date-animation="toDateAnimation"
-      :show-today="showToday"
-    >
-      <template v-slot:btn v-if="showTopBtn">
-        <slot name="btn"> </slot>
-      </template>
-      <template v-slot:day="date" v-if="dayInfo">
-        <slot name="day" :date="date.date"> </slot>
-      </template>
-      <template v-slot:topInfo="date" v-if="topInfo">
-        <slot name="topInfo" :date="date.date"> </slot>
-      </template>
-      <template v-slot:bottomInfo="date" v-if="bottomInfo">
-        <slot name="bottomInfo" :date="date.date"> </slot>
-      </template>
-    </nut-calendar-item>
-  </template>
-
-  <template v-if="ENV == ENV_TYPE.WEB">
-    <nut-popup
-      v-if="poppable"
-      :visible="visible"
-      position="bottom"
-      round
-      :closeable="true"
-      @click-overlay="closePopup"
-      @click-close-icon="closePopup"
-      :destroy-on-close="true"
-      :style="{ height: '85vh' }"
-    >
-      <nut-calendar-item-h5
-        v-if="show"
-        props
-        ref="calendarRef"
-        :type="type"
-        :is-auto-back-fill="isAutoBackFill"
-        :poppable="poppable"
-        :title="title"
-        :confirm-text="confirmText"
-        :start-text="startText"
-        :end-text="endText"
-        :default-value="defaultValue"
-        :start-date="startDate"
-        :end-date="endDate"
-        @update="update"
-        @close="close"
-        @choose="choose"
-        @select="select"
-        :show-today="showToday"
-        :show-title="showTitle"
-        :show-sub-title="showSubTitle"
-        :to-date-animation="toDateAnimation"
-      >
-        <template v-slot:btn v-if="showTopBtn">
-          <slot name="btn"> </slot>
-        </template>
-        <template v-slot:day="date" v-if="dayInfo">
-          <slot name="day" :date="date.date"> </slot>
-        </template>
-        <template v-slot:topInfo="date" v-if="topInfo">
-          <slot name="topInfo" :date="date.date"> </slot>
-        </template>
-        <template v-slot:bottomInfo="date" v-if="bottomInfo">
-          <slot name="bottomInfo" :date="date.date"> </slot>
-        </template>
-      </nut-calendar-item-h5>
-    </nut-popup>
-    <nut-calendar-item-h5
-      v-else
-      :type="type"
-      :is-auto-back-fill="isAutoBackFill"
-      :poppable="poppable"
-      :title="title"
       :confirm-text="confirmText"
       :start-text="startText"
       :end-text="endText"
-      :default-value="defaultValue"
-      :start-date="startDate"
-      :end-date="endDate"
-      @update="update"
-      @close="close"
-      @choose="choose"
-      @select="select"
       :show-today="showToday"
       :show-title="showTitle"
       :show-sub-title="showSubTitle"
       :to-date-animation="toDateAnimation"
-      ref="calendarRef"
     >
       <template v-slot:btn v-if="showTopBtn">
         <slot name="btn"> </slot>
@@ -165,23 +43,54 @@
       <template v-slot:bottomInfo="date" v-if="bottomInfo">
         <slot name="bottomInfo" :date="date.date"> </slot>
       </template>
-    </nut-calendar-item-h5>
-  </template>
+    </nut-calendar-item>
+  </nut-popup>
+  <nut-calendar-item
+    v-else
+    :type="type"
+    :is-auto-back-fill="isAutoBackFill"
+    :poppable="poppable"
+    :title="title"
+    :confirm-text="confirmText"
+    :start-text="startText"
+    :end-text="endText"
+    :default-value="defaultValue"
+    :start-date="startDate"
+    :end-date="endDate"
+    @close="close"
+    @choose="choose"
+    @select="select"
+    :show-title="showTitle"
+    :show-sub-title="showSubTitle"
+    :to-date-animation="toDateAnimation"
+    :show-today="showToday"
+  >
+    <template v-slot:btn v-if="showTopBtn">
+      <slot name="btn"> </slot>
+    </template>
+    <template v-slot:day="date" v-if="dayInfo">
+      <slot name="day" :date="date.date"> </slot>
+    </template>
+    <template v-slot:topInfo="date" v-if="topInfo">
+      <slot name="topInfo" :date="date.date"> </slot>
+    </template>
+    <template v-slot:bottomInfo="date" v-if="bottomInfo">
+      <slot name="bottomInfo" :date="date.date"> </slot>
+    </template>
+  </nut-calendar-item>
 </template>
 <script lang="ts">
 import { ref, watch, computed, reactive, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { create } = createComponent('calendar');
 import CalendarItem from '../calendaritem/index.taro.vue';
-import CalendarItem2 from '../calendaritem/index.h5.vue';
 import Utils from '@/packages/utils/date';
 import { useExpose } from '@/packages/utils/useExpose/index';
 import Taro from '@tarojs/taro';
 
 export default create({
   components: {
-    [CalendarItem.name]: CalendarItem,
-    NutCalendarItemH5: CalendarItem2
+    [CalendarItem.name]: CalendarItem
   },
   props: {
     type: {

diff --git a/transformFinalCode.ts b/transformFinalCode.ts
@@ -0,0 +1,60 @@
+// Components that need to be converted
+export const DEFAULT_Components = new Set(['scroll-view', 'picker-view', 'picker-view-column']);
+//whether to include the path to the current file
+export const judgePath = (paths: string[], targetPath: string) => {
+  for (let i = 0; i < paths.length; i++) {
+    let reg = new RegExp(paths[i]);
+    if (reg.test(targetPath)) {
+      return true;
+    }
+  }
+  return false;
+};
+import type { Plugin } from 'vite';
+export interface transformOptions {
+  exclude?: string[];
+  components?: string[];
+  envCondition?: string;
+  include?: string[];
+}
+export function transformFinalCode(options: transformOptions = {}): Plugin {
+  let _options: transformOptions = {
+    envCondition: 'process.env.TARO_ENV',
+    components: [],
+    include: [],
+    exclude: []
+  };
+  _options = Object.assign(_options, options);
+  return {
+    name: 'transformFinalCode',
+    enforce: 'post',
+    async config(config) {
+      if (!_options.envCondition) {
+        throw new Error('Environment variable is missing, check the envCondition field');
+      }
+      let _define = {};
+      _define[_options.envCondition] = _options.envCondition;
+      config.define = Object.assign(config.define, _define);
+      return config;
+    },
+    transform(code: string, id: any) {
+      let _code = code;
+      let _components = DEFAULT_Components;
+      if (_options.components && _options.components.length > 0) {
+        _components = new Set(_options.components);
+      }
+      if (_options.exclude && _options.exclude.length !== 0 && judgePath(_options.exclude, id)) {
+        return _code;
+      }
+      if (_options.include && _options.include.length !== 0 && !judgePath(_options.include, id)) {
+        return _code;
+      }
+      _components.forEach((tagName) => {
+        let Reg = new RegExp(`"${tagName}"`, 'ig');
+        const r = `function(){if(${_options.envCondition} === 'h5'){return 'taro-${tagName}'}else{return '${tagName}'}}()`;
+        _code = _code.replace(Reg, r);
+      });
+      return _code;
+    }
+  };
+}
diff --git a/vite.config.build.taro.vue.disperse.ts b/vite.config.build.taro.vue.disperse.ts
@@ -5,6 +5,7 @@ import path from 'path';
 const fs = require('fs-extra');
 import config from './package.json';
 import configPkg from './src/config.json';
+import { transformFinalCode, DEFAULT_Components } from './transformFinalCode';
 
 const banner = `/*!
 * ${config.name} v${config.version} ${new Date()}
@@ -17,8 +18,10 @@ let input = {};
 configPkg.nav.map((item) => {
   item.packages.forEach((element) => {
     let { name } = element;
+    // if (name.toLowerCase().indexOf('calendar') != -1) {
     const filePath = path.join(`./src/packages/__VUE/${name.toLowerCase()}/index.taro.vue`);
     input[name] = `./src/packages/__VUE/${name.toLowerCase()}/index${fs.existsSync(filePath) ? '.taro' : ''}.vue`;
+    // }
   });
 });
 
@@ -40,7 +43,18 @@ export default defineConfig({
               tag.startsWith('picker-view-column')
             );
           },
-          whitespace: 'preserve'
+          whitespace: 'preserve',
+          nodeTransforms: [
+            (node) => {
+              if (node.type === 1 /* ELEMENT */) {
+                const nodeName = node.tag;
+                if (DEFAULT_Components.has(nodeName)) {
+                  // node.tag = `taro-${nodeName}`,
+                  node.tagType = 1; /* 0: ELEMENT, 1: COMPONENT */
+                }
+              }
+            }
+          ]
         }
       }
     }),
@@ -74,6 +88,9 @@ declare module 'vue' {
           content: fileContent + changeContent
         };
       }
+    }),
+    transformFinalCode({
+      include: ['__VUE/.*/index.taro']
     })
   ],
   build: {

diff --git a/vite.config.build.taro.vue.ts b/vite.config.build.taro.vue.ts
@@ -2,14 +2,17 @@ import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import path from 'path';
 import config from './package.json';
+import { transformFinalCode, DEFAULT_Components } from './transformFinalCode';
 
 const banner = `/*!
 * ${config.name} v${config.version} ${new Date()}
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */`;
-
 export default defineConfig({
+  define: {
+    'process.env.TARO_ENV': 'process.env.TARO_ENV'
+  },
   resolve: {
     alias: [{ find: '@', replacement: path.resolve(__dirname, './src') }]
   },
@@ -28,17 +31,30 @@ export default defineConfig({
         compilerOptions: {
           isCustomElement: (tag) => {
             return (
-              tag.startsWith('scroll-view') ||
               tag.startsWith('swiper') ||
               tag.startsWith('swiper-item') ||
+              tag.startsWith('scroll-view') ||
               tag.startsWith('picker') ||
               tag.startsWith('picker-view') ||
               tag.startsWith('picker-view-column')
             );
           },
-          whitespace: 'preserve'
+          whitespace: 'preserve',
+          nodeTransforms: [
+            (node) => {
+              if (node.type === 1 /* ELEMENT */) {
+                const nodeName = node.tag;
+                if (DEFAULT_Components.has(nodeName)) {
+                  node.tagType = 1; /* 0: ELEMENT, 1: COMPONENT */
+                }
+              }
+            }
+          ]
         }
       }
+    }),
+    transformFinalCode({
+      include: ['__VUE/.*/index.taro']
     })
   ],
   build: {