chore: component on demand optimization

jd/demo.js

@@ -65,12 +65,8 @@ var demoModel = function (nameLc) {
     }
   });
   </script>
-  
-  <style lang="scss">
-  @import 'index.scss';
-  </style>
   `,
-    doc: `#  ${nameLc}组件
+    doc: `# ${nameLc}组件
 
     ### 介绍
     
@@ -82,7 +78,7 @@ var demoModel = function (nameLc) {
     
     ## 代码演示
     
-    ### 基础用法1
+    ### 基础用法
     
 
     

jd/generate-nutui-taro-vue.js

@@ -27,22 +27,28 @@ let installFunction = `function install(app: any) {
     }
   });
 }`;
-let fileStr = `${importStr}
+let fileStrBuild = `${importStr}
 ${installFunction}
-export { ${packages.join(',')}  };
-export default { install, version:'${package.version}'};`;
+const version = '${package.version}';
+export { install, version };
+export default { install, version};`;
+
 fs.outputFile(
   path.resolve(__dirname, '../src/packages/nutui.taro.vue.build.ts'),
-  fileStr,
+  fileStrBuild,
   'utf8',
   (error) => {
     // logger.success(`${package_config_path} 文件写入成功`);
   }
 );
-fileStr += importScssStr;
+let fileStrDev = `${importStr}
+${installFunction}
+${importScssStr}
+export { install, ${packages.join(',')}  };
+export default { install, version:'${package.version}'};`;
 fs.outputFile(
   path.resolve(__dirname, '../src/packages/nutui.taro.vue.ts'),
-  fileStr,
+  fileStrDev,
   'utf8',
   (error) => {
     // logger.success(`${package_config_path} 文件写入成功`);

jd/generate-nutui.js

@@ -27,23 +27,29 @@ let installFunction = `function install(app: App) {
     }
   });
 }`;
-let fileStr = `${importStr}
+let fileStrBuild = `${importStr}
 ${installFunction}
-export { install, ${packages.join(',')}  };
-export default { install, version:'${package.version}'};`;
+const version = '${package.version}';
+export { install, version, ${packages.join(',')}};
+export default { install, version};`;
+
 fs.outputFile(
   path.resolve(__dirname, '../src/packages/nutui.vue.build.ts'),
-  fileStr,
+  fileStrBuild,
   'utf8',
   (error) => {
     // logger.success(`${package_config_path} 文件写入成功`);
   }
 );
 
-fileStr += importScssStr;
+let fileStrDev = `${importStr}
+${installFunction}
+${importScssStr}
+export { install, ${packages.join(',')}  };
+export default { install, version:'${package.version}'};`;
 fs.outputFile(
   path.resolve(__dirname, '../src/packages/nutui.vue.ts'),
-  fileStr,
+  fileStrDev,
   'utf8',
   (error) => {
     // logger.success(`${package_config_path} 文件写入成功`);

package.json

@@ -41,8 +41,8 @@
     "build:site": "npm run checked && vite build",
     "build:gh-pages": "npm run checked && vite build --base=/nutui/",
     "build:site:oss": "npm run checked && vite build --base=/nutui/3x/",
-    "build": "npm run checked && vite build --config vite.config.build.ts && npm run generate:types && npm run generate:themes && vite build --config vite.config.build.css.ts",
-    "build:taro:vue": "npm run checked:taro:vue && vite build --config vite.config.build.taro.vue.ts && npm run generate:types && npm run generate:themes && vite build --config vite.config.build.css.ts",
+    "build": "npm run checked && vite build --config vite.config.build.ts && vite build --config vite.config.build.disperse.ts && npm run generate:types && npm run generate:themes && vite build --config vite.config.build.css.ts",
+    "build:taro:vue": "npm run checked:taro:vue && vite build --config vite.config.build.taro.vue.ts && vite build --config vite.config.build.taro.vue.disperse.ts && npm run generate:types && npm run generate:themes && vite build --config vite.config.build.css.ts",
     "serve": "vite preview",
     "upload": "yarn build:site:oss && node ./jd/upload.js",
     "add": "node jd/createComponentMode.js",
@@ -63,12 +63,12 @@
     }
   },
   "dependencies": {
-    "pinyin": "^2.10.2",
-    "sass": "^1.34.0",
-    "vue": "^3.0.5",
-    "vue-router": "^4.0.4"
+    "pinyin": "^2.10.2"
   },
   "devDependencies": {
+    "sass": "^1.34.0",
+    "vue": "^3.0.5",
+    "vue-router": "^4.0.4",
     "@commitlint/cli": "^10.0.0",
     "@commitlint/config-conventional": "^10.0.0",
     "@tarojs/taro": "^3.3.0-alpha.8",
@@ -129,4 +129,4 @@
     "type": "git",
     "url": "https://github.com/jdf2e/nutui.git"
   }
-}
+}

src/docs/start.md

@@ -7,7 +7,7 @@
 
 <img src="https://img12.360buyimg.com/imagetools/jfs/t1/162421/39/13392/9425/6052ea60E592310a9/264bdff23ef5fe95.png" width="200" alt="NutUI">
 
-#### NPM 安装
+## NPM 安装
 
 ```bash
 # Vue2 项目 需要参考 2.x 文档 https://nutui.jd.com/2x
@@ -20,6 +20,100 @@ npm i @nutui/nutui@next
 npm i @nutui/nutui-taro
 ```
 
+### NPM 使用示例
+
+
+#### Vite 构建工具 通过 vite-plugin 使用按需加载
+
+[Vite](https://vitejs.dev/) 构建工具，使用 [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import) 实现按需引入。
+
+##### 安装插件
+``` bash
+npm install babel-plugin-import --save-dev
+```
+在 `vite.config` 中添加配置：
+``` javascript
+import vue from '@vitejs/plugin-vue'
+import styleImport from 'vite-plugin-style-import';
+export default {
+  plugins: [
+    vue(),
+    styleImport({
+      libs: [
+        {
+          libraryName: '@nutui/nutui',
+          libraryNameChangeCase: 'pascalCase',
+          resolveStyle: (name) => {
+            return `@nutui/nutui/dist/packages/${name}/index.scss`
+          }
+        }
+      ],
+    }),
+  ],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@import "@nutui/nutui/dist/styles/variables.scss";`
+      }
+    }
+  }
+};
+```
+#### WebPack 构建工具 通过 babel 使用按需加载
+
+[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一款 babel 插件，它会在编译过程中将 import 语句自动转换为按需引入的方式。
+##### 安装插件
+``` bash
+npm install babel-plugin-import --save-dev
+```
+在 `.babelrc` 或 `babel.config.js` 中添加配置：
+``` javascript
+{
+  // ...
+  plugins: [
+    [
+      "import",
+      {
+        "libraryName": "@nutui/nutui",
+        "libraryDirectory": "dist/packages/_es",
+        "camel2DashComponentName": false
+      },
+      'nutui3-vue'
+    ],
+    [
+      "import",
+      {
+        "libraryName": "@nutui/nutui-taro",
+        "libraryDirectory": "dist/packages/_es",
+        "camel2DashComponentName": false
+      },
+      'nutui3-taro'
+    ]
+  ]
+}
+```
+接着像这样在代码中直接引入组件。
+
+```javascript
+import { createApp } from "vue";
+import App from "./App.vue";
+import { Button, Icon } from "@nutui/nutui";
+import "@nutui/nutui/dist/style.css";
+createApp(App).use(Button).use(Icon).mount("#app");
+```
+
+#### 导入全部组件
+
+> 注意：这种方式将会导入所有组件，打包文件大小会很大
+```javascript
+import { createApp } from "vue";
+import App from "./App.vue";
+// 注意：这种方式将会导入所有组件
+import NutUI from "@nutui/nutui";
+import "@nutui/nutui/dist/style.css";
+createApp(App).use(NutUI).mount("#app");
+```
+
 #### CDN 安装使用示例
 
 > 可以通过 CDN 的方式引入， 可以在 **jsdelivr** 和 **unpkg** 等公共 CDN 上获取到 NutUI。
@@ -61,30 +155,9 @@ npm i @nutui/nutui-taro
 ```
 
 > 在页面中直接引入，将无法使用 **主题定制** 等功能。我们推荐使用 *NPM* 或 *YARN* 方式安装，不推荐在页面中直接引入的用法
-#### NPM 使用示例
-
-```javascript
-import { createApp } from "vue";
-import App from "./App.vue";
-import NutUI from "@nutui/nutui";
-import "@nutui/nutui/dist/style.css";
-createApp(App).use(NutUI).mount("#app");
-```
-
-> 注意：这种方式将会导入所有组件
-
-## 推荐使用按需加载
-
-```javascript
-import { createApp } from "vue";
-import App from "./App.vue";
-import { Button, Cell, Icon } from "@nutui/nutui";
-import "@nutui/nutui/dist/style.css";
-createApp(App).use(Button).use(Cell).use(Icon).mount("#app");
-```
 
 
-## 注意事项
+## 使用注意事项
 
 - 使用:prop传递数据格式为 数字、布尔值或函数时，必须带:(兼容字符串类型除外)，比如：
 ```html

vite.config.build.disperse.ts

@@ -2,6 +2,7 @@ import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import path from 'path';
 import config from './package.json';
+import configPkg from './src/config.json';
 
 const banner = `/*!
 * ${config.name} v${config.version} ${new Date()}
@@ -9,50 +10,48 @@ const banner = `/*!
 * Released under the MIT License.
 */`;
 
+let input = {};
+
+configPkg.nav.map((item) => {
+  item.packages.forEach((element) => {
+    let { name, show, type, exportEmpty } = element;
+    if (show || exportEmpty) {
+      input[name] = `./src/packages/__VUE/${name.toLowerCase()}/index${
+        type === 'methods' ? '.ts' : '.vue'
+      }`;
+    }
+  });
+});
+
 export default defineConfig({
   resolve: {
     alias: [{ find: '@', replacement: path.resolve(__dirname, './src') }]
   },
-  css: {
-    preprocessorOptions: {
-      scss: {
-        // example : additionalData: `@import "./src/design/styles/variables";`
-        // dont need include file extend .scss
-        additionalData: `@import "@/packages/styles/variables.scss";@import "@/sites/assets/styles/variables.scss";`
-      }
-    }
-  },
   plugins: [vue()],
   build: {
     minify: false,
+    terserOptions: {
+      compress: {
+        drop_console: true,
+        drop_debugger: true
+      }
+    },
     lib: {
       entry: '',
       name: 'index',
-      fileName: (format) => 'index',
+      // fileName: (format) => format,
       formats: ['es']
     },
     rollupOptions: {
       // 请确保外部化那些你的库中不需要的依赖
       external: ['vue', 'vue-router', 'pinyin'],
-
-      input: [
-        './src/packages/__VUE/price/index.vue',
-        './src/packages/__VUE/cell/index.vue'
-      ],
+      input,
       output: {
-        dir: path.resolve(__dirname, './dist/packages/')
-        // entryFileNames: '[name].js',
-        // file: path.resolve(__dirname, './dist/packages/price/index.js'),
+        banner,
+        dir: path.resolve(__dirname, './dist/packages/_es'),
+        entryFileNames: '[name].js'
       }
-      //  [
-      //   {
-      //     // dir: path.resolve(__dirname, './dist/packages/'),
-      //     // file: path.resolve(__dirname, './dist/packages/price/index.js'),
-      //     // banner,
-      //     // format: 'es'
-      //   }
-      // ]
     },
-    emptyOutDir: true
+    emptyOutDir: false
   }
 });

vite.config.build.taro.vue.disperse.ts

@@ -0,0 +1,57 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import path from 'path';
+import config from './package.json';
+import configPkg from './src/config.json';
+
+const banner = `/*!
+* ${config.name} v${config.version} ${new Date()}
+* (c) 2021 @jdf2e.
+* Released under the MIT License.
+*/`;
+
+let input = {};
+
+configPkg.nav.map((item) => {
+  item.packages.forEach((element) => {
+    let { name, show, taro, type, exportEmpty } = element;
+    if (taro && (show || exportEmpty)) {
+      input[name] = `./src/packages/__VUE/${name.toLowerCase()}/index${
+        exportEmpty ? '.vue' : '.taro.vue'
+      }`;
+    }
+  });
+});
+
+export default defineConfig({
+  resolve: {
+    alias: [{ find: '@', replacement: path.resolve(__dirname, './src') }]
+  },
+  plugins: [vue()],
+  build: {
+    minify: false,
+    terserOptions: {
+      compress: {
+        drop_console: true,
+        drop_debugger: true
+      }
+    },
+    lib: {
+      entry: '',
+      name: 'index',
+      // fileName: (format) => format,
+      formats: ['es']
+    },
+    rollupOptions: {
+      // 请确保外部化那些你的库中不需要的依赖
+      external: ['vue', 'vue-router', 'pinyin'],
+      input,
+      output: {
+        banner,
+        dir: path.resolve(__dirname, './dist/packages/_es'),
+        entryFileNames: '[name].js'
+      }
+    },
+    emptyOutDir: false
+  }
+});