feat: 英文报告

apps/server/view/page/home/index.less

@@ -1,152 +1 @@
-@import '../../less/common.less';
+@import '../../less/common.less';
-
-.bs-select-menu {
-  --background: #242836;
-  --text: #fff;
-  --icon: #fff;
-  --icon-active: #3f4656;
-  --list: #1c212e;
-  --list-text: rgba(255, 255, 255, 0.2);
-  --list-text-hover: rgba(255, 255, 255, 0.5);
-  display: inline-block;
-  position: relative;
-  z-index: 1;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 25px;
-  select,
-  .button {
-    font-family: inherit;
-    margin: 0;
-    border: 0;
-    text-align: left;
-    text-transform: none;
-  }
-  select {
-    pointer-events: none;
-    user-select: none;
-    opacity: 0;
-    padding: 8px 36px 8px 12px;
-    visibility: hidden;
-    font-weight: 500;
-    font-size: 14px;
-    line-height: 25px;
-  }
-  ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    transform: translateY(var(--t));
-    transition: opacity 0.3s ease,
-      transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
-    li {
-      padding: 0 36px 0 12px;
-      height: 36.8px;
-      line-height: 36.8px;
-      cursor: pointer;
-    }
-  }
-  & > ul {
-    background: var(--list);
-    color: var(--list-text);
-    border-radius: 6px;
-    li {
-      transition: color 0.3s ease;
-      &:hover {
-        color: var(--list-text-hover);
-      }
-    }
-  }
-  .button {
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    padding: 0;
-    z-index: 1;
-    width: 100%;
-    display: block;
-    overflow: hidden;
-    border-radius: 6px;
-    color: var(--text);
-    background: var(--background);
-    em {
-      --r: 45deg;
-      display: block;
-      position: absolute;
-      right: 12px;
-      top: 50%;
-      width: 7px;
-      transform: translateY(-50%);
-      &:before,
-      &:after {
-        --o: 0.4;
-        content: '';
-        width: 7px;
-        height: 7px;
-        opacity: var(--o);
-        display: block;
-        position: relative;
-        transition: opacity 0.2s ease;
-        transform: rotate(var(--r)) scale(0.75);
-      }
-      &:before {
-        border-left: 2px solid var(--icon);
-        border-top: 2px solid var(--icon);
-        top: 1px;
-      }
-      &:after {
-        border-right: 2px solid var(--icon);
-        border-bottom: 2px solid var(--icon);
-        bottom: 1px;
-      }
-    }
-  }
-  &:not(.open) {
-    & > ul {
-      opacity: 0;
-      pointer-events: none;
-    }
-  }
-  &.open {
-    &.tilt-up {
-      animation: tilt-up 0.4s linear forwards;
-      .button {
-        em {
-          &:before {
-            --o: 1;
-          }
-        }
-      }
-    }
-    &.tilt-down {
-      animation: tilt-down 0.4s linear forwards;
-      .button {
-        em {
-          &:after {
-            --o: 1;
-          }
-        }
-      }
-    }
-  }
-}
-
-@keyframes tilt-up {
-  40%,
-  60% {
-    transform: perspective(500px) rotateX(8deg);
-  }
-}
-
-@keyframes tilt-down {
-  40%,
-  60% {
-    transform: perspective(500px) rotateX(-8deg);
-  }
-}

apps/server/view/page/home/index.ts

@@ -1,7 +1,7 @@
-import './index.less';
+// import './index.less';
 import $ from 'jquery';
-// import '@backset/ui/src/components/Tooltip/index.less';
+import '@backset/ui/dist/ui.css';
-import Dropdown from '@backset/ui/dist/Dropdown';
+import { Dropdown } from '@backset/ui';
 
 $(function () {
   new Dropdown('.ttt');

apps/server/webpack.config.js

@@ -132,7 +132,6 @@ module.exports = {
   resolve: {
     extensions: ['.ts', '.js', '.ejs'],
   },
-
   externals: {
     // require("jquery") 是外部的，并且可用
     // 在全局变量 jQuery 上

package.json

@@ -39,7 +39,17 @@
     "webpack-bundle-analyzer": "4.8.0",
     "normalize.css": "8.0.1",
     "@babel/plugin-proposal-class-properties": "7.18.6",
-    "@babel/preset-env": "7.20.2"
+    "@babel/preset-env": "7.20.2",
+    "rollup": "3.17.2",
+    "@rollup/plugin-node-resolve": "15.0.1",
+    "@rollup/plugin-typescript": "11.0.0",
+    "@rollup/plugin-commonjs": "24.0.1",
+    "@rollup/plugin-terser": "0.4.0",
+    "rollup-plugin-postcss": "4.0.2",
+    "postcss": "8.4.21",
+    "rollup-plugin-babel": "4.4.0",
+    "@babel/core": "7.21.0",
+    "rollup-plugin-dts": "5.2.0"
   },
   "dependencies": {
     "object-hash": "^3.0.0"

packages/ui/package.json

@@ -1,10 +1,16 @@
 {
   "name": "@backset/ui",
   "version": "1.0.0",
-  "main": "dist/index",
+  "types": "./dist/index.d.ts",
-  "types": "dist/index.d.ts",
+  "module": "./dist/index.esm.js",
+  "file": [
+    "dist"
+  ],
+  "type": "module",
   "scripts": {
-    "build": "webpack build"
+    "build-1": "webpack build && tsc -p ./tsconfig.build.json",
+    "dev": "rollup -w -c",
+    "build": "rollup -c"
   },
   "devDependencies": {
     "semantic-ui-dropdown": "2.5.0",

packages/ui/rollup.config.js

@@ -0,0 +1,56 @@
+import resolve from '@rollup/plugin-node-resolve';
+import typescript from '@rollup/plugin-typescript';
+// rollup默认不支持commonjs
+import commonjs from '@rollup/plugin-commonjs';
+import babel from 'rollup-plugin-babel'
+import postcss from 'rollup-plugin-postcss'
+import terser from '@rollup/plugin-terser';
+import path, { join } from 'path'
+import dts from "rollup-plugin-dts";
+import { readdirSync, statSync } from 'fs'
+
+export default [
+  {
+    input: './src/index.ts',
+    output: {
+      dir: 'dist',
+      format: 'esm',
+      entryFileNames: '[name].esm.js',
+    },
+    plugins: [
+      resolve(),
+      commonjs(),
+      typescript(),
+      // babel({ exclude: "node_modules/**", presets: ["@babel/preset-env"] }),
+      terser(),
+      postcss({
+        extract: true,
+        extract: path.resolve('dist/ui.css')
+      })],
+  },
+  // index.d.ts
+  {
+    input: "./src/index.ts",
+    output: [{ file: "dist/index.d.ts", format: "es" }],
+    plugins: [dts(), postcss({
+      extract: true,
+      extract: path.resolve('dist/ui.css')
+    })],
+  },
+  // 单独打包每个组件
+
+  // 生成 commonjs
+  // {
+  //   input: 'src/index.ts',
+  //   output: {
+  //     dir: 'dist',
+  //     format: 'cjs',
+  //     entryFileNames: '[name].cjs.js',
+  //   },
+  //   plugins: [resolve(), commonjs(), typescript(), terser(), postcss({
+  //     extract: true,
+  //     minimize: true, // cssnano 压缩
+  //     extract: path.resolve('dist/ui.css'),
+  //   })],
+  // },
+]

packages/ui/src/components/Tooltip/index.ts

@@ -1 +1 @@
-import "./index.less";
+import "./index.scss";

packages/ui/src/index.ts

@@ -1 +1,4 @@
 import "./components/Tooltip";
+import Dropdown from "./components/Dropdown/index";
+
+export { Dropdown };

packages/ui/tsconfig.json

@@ -3,8 +3,7 @@
     "experimentalDecorators": true
   },
   "include": [
-    "src/**/*",
+    "src/**/*"
-    "webpack.config.js"
+, "scripts"  ],
-  ],
   "extends": "../../tsconfig.json",
 }

packages/ui/webpack.config.js

@@ -22,7 +22,7 @@ const importEntry = () => {
 };
 
 module.exports = {
-  entry: { ...importEntry() },
+  entry: { ...importEntry(), 'index': join(__dirname, 'src/index.ts') },
   output: {
     path: path.resolve(__dirname, 'dist/'),
     publicPath: '',
@@ -30,14 +30,14 @@ module.exports = {
     clean: true,
     libraryTarget: 'umd' // 添加 export default 
   },
-  mode: 'development',
+  mode: 'production',
   optimization: {
-    // minimize: true,
+    minimize: true,
-    // minimizer: [new TerserPlugin({
+    minimizer: [new TerserPlugin({
-    //   terserOptions: {
+      terserOptions: {
-    //     compress: true,
+        compress: true,
-    //   },
+      },
-    // })],
+    })],
   },
   module: {
     rules: [

packages/util/package.json

@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "main": "dist/cjs/index",
   "types": "dist/es/index.d.ts",
+  "browser": "./src/index.ts",
   "scripts": {
     "build": "rimraf ./dist && tsc -p ./tsconfig.build-es.json && tsc -p ./tsconfig.build-cjs.json"
   },

readme.md

@@ -34,6 +34,14 @@ e.g
 
 这种情况，作为依赖，`workspace`下的其他包引入，`vscode`会有代码提示
 
+## 入口文件
+
+- 如果 npm 包导出的是 ESM 规范的包，使用 module
+- 如果 npm 包只在 web 端使用，并且严禁在 server 端使用，使用 browser。
+- 如果 npm 包只在 server 端使用，使用 main
+- 如果 npm 包在 web 端和 server 端都允许使用，使用 browser 和 main
+- 其他更加复杂的情况，如 npm 包需要提供 commonJS 与 ESM 等多个规范的代码文件，请参考上述使用场景或流程图
+
 # tsconfig.json
 
 指定了用来编译这个项目的根文件和编译选项

tsconfig.build.json

@@ -4,8 +4,9 @@
     "declaration": true,
     "module": "ES2020",
     "sourceMap": true,
-    "esModuleInterop": true,
+    // "esModuleInterop": true,
     "skipLibCheck": true, // 忽略烈性检查
-    "forceConsistentCasingInFileNames": true
+    "forceConsistentCasingInFileNames": true,
+    "allowSyntheticDefaultImports": true
   },
 }