support icon and illustrations umd file#215 (#322)

* feat: add semi-icons umd bundle

* feat: support illustrations umd

packages/semi-icons/package.json

@@ -22,9 +22,11 @@
     "lib/es/index.js"
   ],
   "scripts": {
+    "clean": "rimraf dist lib",
     "build:icon": "node scripts/build-icon ",
     "build:lib": "node ./scripts/compileLib.js",
-    "prepublishOnly": "npm run build:lib"
+    "build:js": "node scripts/compileDist.js",
+    "prepublishOnly": "npm run clean && npm run build:lib && npm run build:js"
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.15.4",
@@ -35,6 +37,10 @@
     "@babel/plugin-transform-runtime": "^7.15.8",
     "@babel/preset-env": "^7.15.8",
     "@babel/preset-react": "^7.14.5",
+    "@douyinfe/semi-webpack-plugin": "2.1.0-beta.3",
+    "babel-loader": "^8.2.2",
+    "case-sensitive-paths-webpack-plugin": "2.4.0",
+    "css-loader": "4.3.0",
     "del": "^6.0.0",
     "gulp": "^4.0.2",
     "gulp-babel": "^8.0.0",
@@ -42,8 +48,14 @@
     "gulp-sass": "^5.0.0",
     "gulp-typescript": "^6.0.0-alpha.1",
     "merge2": "^1.4.1",
-    "sass": "1.32.13",
-    "through2": "^4.0.2"
+    "mini-css-extract-plugin": "0.11.3",
+    "rimraf": "^3.0.2",
+    "sass": "1.32.2",
+    "sass-loader": "^10.0.5",
+    "terser-webpack-plugin": "^4.2.3",
+    "through2": "^4.0.2",
+    "ts-loader": "^5.4.5",
+    "webpack": "^4.46.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0"

packages/semi-icons/scripts/compileDist.js

@@ -0,0 +1,59 @@
+const webpack = require('webpack');
+const getWebpackConfig = require('../webpack.config');
+
+function compile() {
+    return new Promise((resolve, reject) => {
+        console.log('compile jsx start');
+        const config = getWebpackConfig({minimize: false});
+        webpack(config, (err, stats) => {
+            if (err) {
+                console.error(err);
+                reject(err);
+                return;
+            }
+            
+            const info = stats.toJson();
+        
+            if (stats.hasErrors()) {
+                (info.errors || []).forEach(error => {
+                    console.error(error);
+                });
+                reject(err);
+                return;
+            }
+            console.log('compile jsx success');
+            resolve();
+        });
+    });
+}
+
+function compileMin() {
+    return new Promise((resolve, reject) => {
+        console.log('compile jsx with minimize start');
+        const config = getWebpackConfig({minimize: true});
+        webpack(config, (err, stats) => {
+            if (err) {
+                console.error(err);
+                reject(err);
+            }
+            
+            const info = stats.toJson();
+        
+            if (stats.hasErrors()) {
+                (info.errors || []).forEach(error => {
+                    console.error(error);
+                    reject(err);
+                });
+            }
+            console.log('compile jsx with minimize success');
+            resolve();
+        });
+    });
+}
+
+async function main() {
+    await compile();
+    await compileMin();
+}
+
+main();

packages/semi-icons/webpack.config.js

@@ -0,0 +1,94 @@
+const path = require('path');
+const webpack = require('webpack');
+const TerserPlugin = require('terser-webpack-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
+const babelConfig = require('./babel.config');
+
+const semiThemeLoader = path.resolve(__dirname, '../semi-webpack/lib/semi-theme-loader.js');
+
+module.exports = function getWebpackConfig({ minimize }){
+    return {
+        mode: 'production',
+        bail: true,
+        devtool: 'source-map',
+        entry: {
+            index: ['./src/index.ts']
+        },
+        output: {
+            filename: minimize ? 'umd/semi-icons.min.js' : 'umd/semi-icons.js',
+            path: path.join(__dirname, 'dist'),
+            library: 'SemiIcons',
+            libraryTarget: 'umd'
+        },
+        module: {
+            rules: [
+                {
+                    test: /\.tsx?$/,
+                    include: [
+                        path.resolve(__dirname, 'src'),
+                    ],
+                    use: [
+                        {
+                            loader: 'babel-loader',
+                            options: babelConfig
+                        },
+                        {
+                            loader: 'ts-loader',
+                            options: {
+                                transpileOnly: true,
+                                happyPackMode: false,
+                                appendTsSuffixTo: []
+                            }
+                        }
+                    ]
+                },
+                { 
+                    test: /\.scss$/, 
+                    loaders: [
+                        {
+                            loader: MiniCssExtractPlugin.loader
+                        },
+                        {
+                            loader: 'css-loader'
+                        },
+                        {
+                            loader: 'sass-loader'
+                        },
+                        {
+                            loader: semiThemeLoader
+                        }
+                    ] 
+                },
+            ]
+        },
+        optimization: {
+            minimize: !!minimize,
+            minimizer: [new TerserPlugin()]
+        },
+        performance: { maxEntrypointSize: 10485760, maxAssetSize: 5242880 },
+        plugins: [
+            new webpack.DefinePlugin({
+                'process.env': { NODE_ENV: '"production"' }
+            }),
+            new CaseSensitivePathsPlugin(),
+            new webpack.HashedModuleIdsPlugin(),
+            new MiniCssExtractPlugin({
+                // Options similar to the same options in webpackOptions.output
+                // both options are optional
+                filename: minimize ? 'css/semi-icons.min.css' : 'css/semi-icons.css',
+            })
+        ],
+        resolve: {
+            extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
+        },
+        externals: {
+            react: {
+                root: 'React',
+                commonjs2: 'react',
+                commonjs: 'react',
+                amd: 'react'
+            }
+        }
+    };
+};

packages/semi-illustrations/package.json

@@ -34,17 +34,25 @@
     "@babel/plugin-transform-runtime": "^7.15.8",
     "@babel/preset-env": "^7.15.8",
     "@babel/preset-react": "^7.14.5",
+    "case-sensitive-paths-webpack-plugin": "2.4.0",
+    "babel-loader": "^8.2.2",
     "del": "^6.0.0",
     "gulp": "^4.0.2",
     "gulp-babel": "^8.0.0",
     "gulp-replace": "^1.1.3",
     "gulp-typescript": "^6.0.0-alpha.1",
-    "merge2": "^1.4.1"
+    "merge2": "^1.4.1",
+    "rimraf": "^3.0.2",
+    "terser-webpack-plugin": "^4.2.3",
+    "ts-loader": "^5.4.5",
+    "webpack": "^4.46.0"
   },
   "scripts": {
+    "clean": "rimraf dist lib",
     "build:icon": "node scripts/build-illustration",
     "build:lib": "node ./scripts/compileLib.js",
-    "prepublishOnly": "npm run build:lib"
+    "build:js": "node scripts/compileDist.js",
+    "prepublishOnly": "npm run clean && npm run build:lib && npm run build:js"
   },
   "gitHead": "5d5893482dd1f4c69333907f01fc66a8125ac9cd"
 }

packages/semi-illustrations/scripts/compileDist.js

@@ -0,0 +1,59 @@
+const webpack = require('webpack');
+const getWebpackConfig = require('../webpack.config');
+
+function compile() {
+    return new Promise((resolve, reject) => {
+        console.log('compile jsx start');
+        const config = getWebpackConfig({minimize: false});
+        webpack(config, (err, stats) => {
+            if (err) {
+                console.error(err);
+                reject(err);
+                return;
+            }
+            
+            const info = stats.toJson();
+        
+            if (stats.hasErrors()) {
+                (info.errors || []).forEach(error => {
+                    console.error(error);
+                });
+                reject(err);
+                return;
+            }
+            console.log('compile jsx success');
+            resolve();
+        });
+    });
+}
+
+function compileMin() {
+    return new Promise((resolve, reject) => {
+        console.log('compile jsx with minimize start');
+        const config = getWebpackConfig({minimize: true});
+        webpack(config, (err, stats) => {
+            if (err) {
+                console.error(err);
+                reject(err);
+            }
+            
+            const info = stats.toJson();
+        
+            if (stats.hasErrors()) {
+                (info.errors || []).forEach(error => {
+                    console.error(error);
+                    reject(err);
+                });
+            }
+            console.log('compile jsx with minimize success');
+            resolve();
+        });
+    });
+}
+
+async function main() {
+    await compile();
+    await compileMin();
+}
+
+main();

packages/semi-illustrations/webpack.config.js

@@ -0,0 +1,69 @@
+const path = require('path');
+const webpack = require('webpack');
+const TerserPlugin = require('terser-webpack-plugin');
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
+const babelConfig = require('./babel.config');
+
+module.exports = function getWebpackConfig({ minimize }){
+    return {
+        mode: 'production',
+        bail: true,
+        devtool: 'source-map',
+        entry: {
+            index: ['./src/index.ts']
+        },
+        output: {
+            filename: minimize ? 'umd/semi-illustrations.min.js' : 'umd/semi-illustrations.js',
+            path: path.join(__dirname, 'dist'),
+            library: 'SemiIllustrations',
+            libraryTarget: 'umd'
+        },
+        module: {
+            rules: [
+                {
+                    test: /\.tsx?$/,
+                    include: [
+                        path.resolve(__dirname, 'src'),
+                    ],
+                    use: [
+                        {
+                            loader: 'babel-loader',
+                            options: babelConfig
+                        },
+                        {
+                            loader: 'ts-loader',
+                            options: {
+                                transpileOnly: true,
+                                happyPackMode: false,
+                                appendTsSuffixTo: []
+                            }
+                        }
+                    ]
+                }
+            ]
+        },
+        optimization: {
+            minimize: !!minimize,
+            minimizer: [new TerserPlugin()]
+        },
+        performance: { maxEntrypointSize: 10485760, maxAssetSize: 5242880 },
+        plugins: [
+            new webpack.DefinePlugin({
+                'process.env': { NODE_ENV: '"production"' }
+            }),
+            new CaseSensitivePathsPlugin(),
+            new webpack.HashedModuleIdsPlugin(),
+        ],
+        resolve: {
+            extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
+        },
+        externals: {
+            react: {
+                root: 'React',
+                commonjs2: 'react',
+                commonjs: 'react',
+                amd: 'react'
+            }
+        }
+    };
+};