- r-ui
  |- src
     |- components
        |- button
           |- index.tsx
  |- index.tsx

mkdir r-ui && cd r-ui && npm init
# 配置項(xiàng)目基本信息（name、version......）

git init
# .gitignore文件內(nèi)容請(qǐng)直接查看項(xiàng)目?jī)?nèi)文件
# 完成后，初始提交：
# git add . && git commit -m "init"

yarn add -D webpack webpack-cli webpack-dev-server
# 安裝webpack-dev-server是為后續(xù)構(gòu)建樣例頁(yè)面做準(zhǔn)備，前期可以不安裝。

diff --git a/package.json b/package.json
index e01c1b1..53dd9a3 100644
--- a/package.json
+++ b/package.json
@@ -8,5 +8,9 @@
   },
   "author": "",
   "license": "MIT",
-  "devDependencies": {}
+  "devDependencies": {
+    "webpack": "^5.72.1",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.9.0"
+  }
 }

// webpack.config.js
const {resolve} = require("path");
module.exports = {
  // 組件庫(kù)的起點(diǎn)入口
  entry: './src/index.tsx',
  output: {
    filename: "r-ui.umd.js", // 打包后的文件名
    path: resolve(__dirname, 'dist'), // 打包后的文件目錄：根目錄/dist/
    library: 'rui', // 導(dǎo)出的UMD js會(huì)在window掛rui，即可以訪問(wèn)window.rui
    libraryTarget: 'umd' // 導(dǎo)出庫(kù)為UMD形式
  },
  resolve: {
    // webpack 默認(rèn)只處理js、jsx等js代碼
    extensions: ['.js', '.jsx', '.ts', '.tsx']
  },
  externals: {},
  // 模塊
  module: {
    // 規(guī)則
    rules: []
  }
};

yarn add -D babel-loader @babel/core @babel/preset-env @babel/preset-typescript @babel/preset-react @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread

diff --git a/package.json b/package.json
index 53dd9a3..33c32b6 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,13 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
+    "@babel/core": "^7.18.2",
+    "@babel/plugin-proposal-class-properties": "^7.17.12",
+    "@babel/plugin-proposal-object-rest-spread": "^7.18.0",
+    "@babel/preset-env": "^7.18.2",
+    "@babel/preset-react": "^7.17.12",
+    "@babel/preset-typescript": "^7.17.12",
+    "babel-loader": "^8.2.5",
     "webpack": "^5.72.1",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.9.0"
(END)

源代碼 =babel=> 目標(biāo)代碼

源代碼
|
進(jìn)入babel
|
babel插件1處理代碼：移除某些符號(hào)
|
babel插件2處理代碼：將形如() => {}的箭頭函數(shù)，轉(zhuǎn)換成function xxx() {}
|
目標(biāo)代碼

@babel/core
@babel/preset-env
@babel/preset-typescript
@babel/preset-react
@babel/plugin-proposal-class-properties
@babel/plugin-proposal-object-rest-spread

{
 "presets": [
   ["env", {
     "targets": {
       "browsers": ["last 2 versions", "safari >= 7"]
     }
   }]
 ]
}

diff --git a/webpack.config.js b/webpack.config.js
index 8bfbb63..6767fd8 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -17,6 +17,11 @@ module.exports = {
   // 模塊
   module: {
     // 規(guī)則
-    rules: []
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'babel-loader'
+      }
+    ]
   }
 };
(END)

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread"
  ]
}

 <!-- ... other HTML ... -->
  <!-- Load React. -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  <!-- 組件庫(kù)JS -->
  <script src="r-ui.js"></script>
</body>

diff --git a/webpack.config.js b/webpack.config.js
index 6767fd8..54fc0e5 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -13,7 +13,13 @@ module.exports = {
     // webpack 默認(rèn)只處理js、jsx等js代碼
     extensions: ['.js', '.jsx', '.ts', '.tsx']
   },
-  externals: {},
+  externals: {
+    // 打包過(guò)程遇到以下依賴導(dǎo)入，不會(huì)打包對(duì)應(yīng)庫(kù)代碼，而是調(diào)用window上的React和ReactDOM
+    // import React from 'react'
+    // import ReactDOM from 'react-dom'
+    'react': 'React',
+    'react-dom': 'ReactDOM'
+  },
   // 模塊
   module: {
     // 規(guī)則
(END)

yarn add -D @types/react@17.0.39 @types/react-dom@17.0.17

diff --git a/package.json b/package.json
index 33c32b6..bd17763 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,8 @@
     "@babel/preset-env": "^7.18.2",
     "@babel/preset-react": "^7.17.12",
     "@babel/preset-typescript": "^7.17.12",
+    "@types/react": "17.0.39",
+    "@types/react-dom": "17.0.17",
     "babel-loader": "^8.2.5",
     "webpack": "^5.72.1",
     "webpack-cli": "^4.9.2",

- r-ui
  |- .babelrc
  |- package.json
  |- webpack.config.js

- r-ui
  |- src/components/button/index.tsx
  |- src/index.tsx
  |- ... ...

import * as React from 'react';
interface ButtonProps {
}
const Button: React.FC<ButtonProps> = (props) => {
    const {children, ...rest} = props;
    return <button {...rest} >{children}</button>
}
export default Button;

export {default as Button} from './components/button';

diff --git a/package.json b/package.json
index bd17763..01565ad 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
+    "build": "webpack --config webpack.config.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
(END)

yarn run build

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>r-ui example</title>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  	<!-- 注意r-ui.umd.js的路徑 -->
    <script src="r-ui.umd.js"></script>
</head>
<body>
<div id="example"></div>
<script>
  const onClick = () => {
    alert('hello');
  };
  // window上存在rui，是因?yàn)槲覀儗⒔M件包導(dǎo)出為了umd包，取名為rui
  // 使用React原生方法創(chuàng)建Button的react組件實(shí)例
  // 等價(jià)于：
  // <Button onClick={onClick}>hello, world</Button>
  const button = React.createElement(rui.Button, {onClick}, 'hello, world');
  // 調(diào)用ReactDOM方法，將button組件實(shí)例掛載到example DOM節(jié)點(diǎn)上
  ReactDOM.render(button, document.getElementById('example'));
</script>
</body>
</html>

- r-ui
  |- dist
     |- index.html
     |- r-ui.umd.js
  |- ... ...

yarn add -D less-loader less css-loader mini-css-extract-plugin

diff --git a/package.json b/package.json
index 01565ad..3070d07 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,10 @@
     "@types/react": "17.0.39",
     "@types/react-dom": "17.0.17",
     "babel-loader": "^8.2.5",
+    "css-loader": "^6.7.1",
+    "less": "^4.1.2",
+    "less-loader": "^11.0.0",
+    "mini-css-extract-plugin": "^2.6.0",
     "webpack": "^5.72.1",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.9.0"

diff --git a/webpack.config.js b/webpack.config.js
index 54fc0e5..9db43b8 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,5 +1,6 @@
 // webpack.config.js
 const {resolve} = require("path");
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 module.exports = {
   // 組件庫(kù)的起點(diǎn)入口
   entry: './src/index.tsx',
@@ -27,7 +28,28 @@ module.exports = {
       {
         test: /\.tsx?$/,
         use: 'babel-loader'
+      },
+      {
+        test: /\.less$/,
+        use: [
+          // webpack中的順序是【從后向前】鏈?zhǔn)秸{(diào)用的
+          // 所以對(duì)于less先交給less-loader處理，轉(zhuǎn)為css
+          // 再交給css-loader
+          // 最后導(dǎo)出css（MiniCssExtractPlugin.loader）
+          // 所以注意loader的配置順序
+          {
+            loader: MiniCssExtractPlugin.loader,
+          },
+          'css-loader',
+          'less-loader'
+        ]
       }
     ]
-  }
+  },
+  plugins: [
+    // 插件用于最終的導(dǎo)出獨(dú)立的css的工作
+    new MiniCssExtractPlugin({
+      filename: 'r-ui.umd.css'
+    }),
+  ]
 };

@color: #006fde;
.my-button {
  color: @color;
}

import * as React from 'react';
+// 引入less樣式
+import './index.less';
 
 interface ButtonProps {
 }
 const Button: React.FC<ButtonProps> = (props) => {
     const {children, ...rest} = props;
-    return <button {...rest} >{children}</button>
+    // 使用my-button樣式
+    return <button {...rest} className='my-button'>{children}</button>
 }
 export default Button;

<head>
     <meta charset="UTF-8">
     <title>r-ui example</title>
     <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
     <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
     <script src="r-ui.umd.js"></script>
+    <link href="r-ui.umd.css" rel="external nofollow"  rel="stylesheet"/>
 </head>

yarn add antd

diff --git a/package.json b/package.json
index 3070d07..09ca792 100644
--- a/package.json
+++ b/package.json
@@ -26,5 +26,8 @@
     "webpack": "^5.72.1",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.9.0"
+  },
+  "dependencies": {
+    "antd": "^4.20.6"
   }
 }

-@color: #006fde;
-
-.my-button {
-  color: @color;
-}
+@import "~antd/lib/button/style/index.css";

 import * as React from 'react';
+// 使用antd的Button和ButtonProps
+// 為了不和我們的Button沖突，需要改導(dǎo)出名
+import {Button as AntdButton, ButtonProps as AntdButtonProps} from 'antd';
 // 引入less樣式
 import './index.less';
-interface ButtonProps {
+interface ButtonProps extends AntdButtonProps {
 }
 const Button: React.FC<ButtonProps> = (props) => {
     const {children, ...rest} = props;
-    // 使用my-button樣式
-    return <button {...rest} className='my-button'>{children}</button>
+    // 使用AntdButton
+    return <AntdButton {...rest}>{children}</AntdButton>
 }
 export default Button;