feat: ui库 webpack

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

@@ -17,7 +17,7 @@
 
     <h1>1</h1>
 
-    <select data-menu>
+    <select class="ttt" data-menu>
       <option>最近的</option>
       <option selected>最热门</option>
       <option>最多喜欢</option>

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

@@ -1,56 +1,8 @@
 import './index.less';
 import $ from 'jquery';
-import '@backset/ui/src/components/Tooltip/index.less';
+// import '@backset/ui/src/components/Tooltip/index.less';
-// import '@backset/ui/src/components/Dropdown/index.scss';
+import Dropdown from '@backset/ui/dist/Dropdown';
 
-$('select[data-menu]').each(function () {
+$(function () {
-  let select = $(this);
+  new Dropdown('.ttt');
-  let options = select.find('option');
-  let menu = $('<div />').addClass('bs-select-menu');
-  let button = $('<div />').addClass('button');
-  let list = $('<ul />');
-  $('<em />').prependTo(button);
-
-  options.each(function (i) {
-    let option = $(this);
-    list.append($('<li />').text(option.text()));
-  });
-
-  menu.css('--t', select.find(':selected').index() * -36.5 + 'px');
-
-  select.wrap(menu);
-
-  button.append(list).insertAfter(select);
-
-  list.clone().insertAfter(button);
-});
-
-$(document).on('click', '.bs-select-menu', function (e) {
-  let menu = $(this);
-  if (!menu.hasClass('open')) menu.addClass('open');
-});
-
-$(document).on('click', '.bs-select-menu > ul > li', function (e) {
-  let li = $(this);
-  let menu = li.parent().parent();
-  let select = menu.children('select');
-  let selected = select.find('option:selected');
-  let index = li.index();
-
-  menu.css('--t', index * -36.5 + 'px');
-  selected.removeAttr('selected');
-  select.find('option').eq(index).attr('selected', 'selected');
-
-  menu.addClass(index > selected.index() ? 'tilt-down' : 'tilt-up');
-
-  setTimeout(() => {
-    menu.removeClass('open tilt-up tilt-down');
-  }, 500);
-});
-
-$(document).on('click', function (e: any) {
-  e.stopPropagation();
-  if ($('.bs-select-menu').has(e.target).length === 0) {
-    $('.bs-select-menu').removeClass('open');
-  }
 });

package.json

@@ -37,7 +37,9 @@
     "autoprefixer": "10.4.13",
     "terser-webpack-plugin": "5.3.6",
     "webpack-bundle-analyzer": "4.8.0",
-    "normalize.css": "8.0.1"
+    "normalize.css": "8.0.1",
+    "@babel/plugin-proposal-class-properties": "7.18.6",
+    "@babel/preset-env": "7.20.2"
   },
   "dependencies": {
     "object-hash": "^3.0.0"

packages/ui/package.json

@@ -4,9 +4,11 @@
   "main": "dist/index",
   "types": "dist/index.d.ts",
   "scripts": {
-    "build": "rimraf ./dist && tsc -p ./tsconfig.build.json"
+    "build": "webpack build"
   },
   "devDependencies": {
-    "semantic-ui-dropdown": "2.5.0"
+    "semantic-ui-dropdown": "2.5.0",
+    "jquery": "3.6.3",
+    "@types/jquery": "3.5.16"
   }
 }

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

@@ -1 +1,58 @@
-import './index.less'
+import "./index.scss";
+import $ from "jquery";
+
+export const useHi = (str: string) => console.log(str);
+
+export default class Dropdown {
+  constructor(selector: string) {
+    let select = $(selector);
+    let options = select.find("option");
+    let menu = $("<div />").addClass("bs-select-menu");
+    let button = $("<div />").addClass("button");
+    let list = $("<ul />");
+    $("<em />").prependTo(button);
+
+    options.each(function (i) {
+      let option = $(this);
+      list.append($("<li />").text(option.text()));
+    });
+
+    menu.css("--t", select.find(":selected").index() * -36.5 + "px");
+
+    select.wrap(menu);
+
+    button.append(list).insertAfter(select);
+
+    list.clone().insertAfter(button);
+
+    $(document).on("click", ".bs-select-menu", function (e) {
+      let menu = $(this);
+      if (!menu.hasClass("open")) menu.addClass("open");
+    });
+
+    $(document).on("click", ".bs-select-menu > ul > li", function (e) {
+      let li = $(this);
+      let menu = li.parent().parent();
+      let select = menu.children("select");
+      let selected = select.find("option:selected");
+      let index = li.index();
+
+      menu.css("--t", index * -36.5 + "px");
+      selected.removeAttr("selected");
+      select.find("option").eq(index).attr("selected", "selected");
+
+      menu.addClass(index > selected.index() ? "tilt-down" : "tilt-up");
+
+      setTimeout(() => {
+        menu.removeClass("open tilt-up tilt-down");
+      }, 500);
+    });
+
+    $(document).on("click", function (e: any) {
+      e.stopPropagation();
+      if ($(".bs-select-menu").has(e.target).length === 0) {
+        $(".bs-select-menu").removeClass("open");
+      }
+    });
+  }
+}

packages/ui/tsconfig.json

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

packages/ui/webpack.config.js

@@ -0,0 +1,100 @@
+/*eslint-disable*/
+const { join } = require('path');
+const path = require('path');
+const { readdirSync, statSync } = require('fs');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
+const TerserPlugin = require("terser-webpack-plugin");
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const isDev = process.env.RUNNING_ENV === 'dev';
+const isProd = process.env.RUNNING_ENV === 'prod';
+
+const importEntry = () => {
+  const entries = {};
+  const rootDir = join(process.cwd(), '/src/components');
+  readdirSync(rootDir)
+    .filter(i => !i.startsWith('_'))
+    .forEach(file => {
+      if (statSync(join(rootDir, file)).isDirectory())
+        entries[file] = join(rootDir, `${file}/index.ts`);
+    });
+  return entries;
+};
+
+module.exports = {
+  entry: { ...importEntry() },
+  output: {
+    path: path.resolve(__dirname, 'dist/'),
+    publicPath: '',
+    filename: '[name].js',
+    clean: true,
+    libraryTarget: 'umd' // 添加 export default 
+  },
+  mode: 'development',
+  optimization: {
+    // minimize: true,
+    // minimizer: [new TerserPlugin({
+    //   terserOptions: {
+    //     compress: true,
+    //   },
+    // })],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.ts?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.css$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+      },
+      {
+        test: /\.less$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'],
+      },
+      {
+        test: /\.(scss)$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader'
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: () => [
+                  require('autoprefixer')
+                ]
+              }
+            }
+          },
+          {
+            loader: 'sass-loader'
+          }
+        ]
+      },
+      {
+        test: /\.(png|jpg|gif)$/i,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 8192,
+            },
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: '[name].css'
+    }),
+  ].filter(Boolean),
+  resolve: {
+    extensions: ['.ts', '.js'],
+  },
+};

tsconfig.json

@@ -2,6 +2,7 @@
   "compilerOptions": {
     "noImplicitAny": true, /* 在表达式和声明上有隐含的 any类型时报错。*/
     "strictNullChecks": true,
+    "esModuleInterop": true,
     "baseUrl": ".",
     "paths": {
       "@backset/*": [