@iam-com/snack-scripts 1.0.0

package/README.md

@@ -0,0 +1,2 @@
+# 1.0.0
+    基于产品2.3.7

package/bin/main.js

@@ -0,0 +1,225 @@
+#!/usr/bin/env node
+'use strict';
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+const {spawn} = require('child_process');
+const path = require('path');
+const minimist = require('minimist');
+const fs = require('fs-extra');
+const {version} = require('../package.json');
+const {GetPackageList} = require(path.resolve(__dirname, '../utils/package'));
+// 解析命令行参数
+const args = process.argv.slice(2);
+const argv = minimist(args, {
+    default: {
+        project: null
+    }
+});
+const scriptIndex = args.findIndex(
+    x => x === 'build' || x === 'start' || x === 'entry'
+);
+
+// 命令行参数
+const script = scriptIndex === -1 ? args[0] : args[scriptIndex];
+// 项目路径
+let projectPath = argv.project || process.cwd();
+// 模版自定义路径
+let templatePath = argv.templatePath ? path.resolve(projectPath, argv.templatePath) : path.resolve(__dirname, '../template');
+/** webpack配置路径 **/
+    // snack模块打包配置
+const snackPath = path.resolve(__dirname, `../config/webpack.snack.config.js`);
+// snack模块独立html入口
+const indexHTMLPath = path.resolve(__dirname, `../config/webpack.index.config.js`);
+// sanck模块加载器
+const loaderConfigPath = path.resolve(__dirname, `../config/webpack.loader.config.js`);
+// 开发调试webpack配置
+const devConfigPath = path.resolve(__dirname, `../config/webpack.dev.config.js`);
+// 独立页面打包配置
+const entryConfigPath = path.resolve(__dirname, `../config/webpack.entry.config.js`);
+//
+const platform = process.platform;
+let webpackFile = 'webpack';
+if (platform === 'win32')
+    webpackFile = 'webpack.cmd';
+
+async function run(script) {
+    let argv = [];
+    let argvEntry = [];
+    let argvLoader = [];
+    let argvDev = [];
+    switch (script) {
+        case 'start':
+            argvDev = ['serve', '--mode=development', `--config=${devConfigPath}`];
+            // 运行模式
+            process.env.RUN_MODE = 'development';
+            break;
+        case 'build':
+            argv = ['--mode=production', `--config=${snackPath}`];
+            argvEntry = ['--mode=production', `--config=${indexHTMLPath}`];
+            argvLoader = ['--mode=production', `--config=${loaderConfigPath}`];
+            // 运行模式
+            process.env.RUN_MODE = 'production';
+            break;
+        case 'entry':
+            argv = ['--mode=production', `--config=${entryConfigPath}`];
+            // 运行模式
+            process.env.RUN_MODE = 'production';
+            break;
+    }
+    const projectPackageJSON = fs.readJSONSync(path.resolve(projectPath, 'package.json'));
+    if (projectPackageJSON.name === 'snack-cli') {
+        throw '请修改 snack-cli package.json "name" 的默认名称，该名称将在部署时作为分类目录';
+    }
+    // 脚手架版本
+    process.env.SNACK_CLI_VERSION = version;
+    // 运行命令
+    process.env.RUN_SCRIPT = script;
+    // snack-scripts 目录
+    process.env.SNACK_SCRIPTS_PATH = __dirname;
+    // 公共资源目录
+    process.env.PROJECT_COMMON_NAME = '__common__';
+    // 打包项目package.json
+    process.env.PROJECT_PACKAGE_JSON = JSON.stringify(projectPackageJSON);
+    // 项目分类
+    process.env.PROJECT_TYPE = projectPackageJSON.name;
+    // 打包项目绝对路径
+    process.env.PROJECT_PATH = projectPath;
+    // 打包项目sanck模块绝对路径
+    process.env.PROJECT_PACKAGE_PATH = path.resolve(projectPath, projectPackageJSON.input || 'src/package');
+    // 临时目录
+    process.env.PROJECT_TEMP_PATH = path.resolve(projectPath, '.snack');
+    // 模版目录
+    process.env.PROJECT_TEMPLATE_PATH = path.join(process.env.PROJECT_TEMP_PATH, 'template');
+    await fs.remove(process.env.PROJECT_TEMPLATE_PATH);
+    // 复制模版目录到临时目录
+    const err = await fs.copy(templatePath, process.env.PROJECT_TEMPLATE_PATH);
+    if (err) {
+        console.error('临时目录创建失败');
+        throw err;
+    }
+    // snack 配置
+    process.env.PROJECT_SNACK_CONFIG = JSON.stringify(projectPackageJSON.snack || {});
+    if (script === 'entry') {
+        if (!projectPackageJSON.snack && !projectPackageJSON.snack.entry) throw 'package.json 未找到snack.entry配置项';
+        /**
+         * id string 页面id
+         * type string 页面分类（可选）
+         * service string snackbar服务端地址，默认当前地址栏（可选）,
+         * devServer string 调试服务网关（可选）,
+         * favicon string 角标图标，项目相对路径（可选）,
+         *
+         */
+        // 打包项目输出路径
+        process.env.PROJECT_OUT_PATH = path.resolve(projectPath, projectPackageJSON.snack.entry.name || 'entry');
+        console.log('create entry ...');
+        await execWebpack(argv);
+    } else {
+        // 打包项目输出路径
+        if (process.env.RUN_MODE === 'development') // 开发模式
+            process.env.PROJECT_OUT_PATH = path.resolve(process.env.PROJECT_TEMP_PATH, 'temp');
+        else // 生产模式
+            process.env.PROJECT_OUT_PATH = path.resolve(projectPath, projectPackageJSON.output || 'dist', projectPackageJSON.name);
+        // 打包项目模块目录扫描列表
+        process.env.PROJECT_PACKAGE_LIST = JSON.stringify(GetPackageList(process.env.PROJECT_PACKAGE_PATH));
+        console.log(`clear output dir "${process.env.PROJECT_OUT_PATH}" ...`);
+        clearOutput(process.env.PROJECT_OUT_PATH);
+        console.log('clear output dir end');
+        if (script === 'start') {
+            console.log('Snack DevServer Runing...');
+            await execWebpack(argvDev);
+        } else { // production
+            console.log('create loader.js ...');
+            await execWebpack(argvLoader);
+            console.log('create loader.jS end');
+            console.log('create entry HTML ...');
+            await execWebpack(argvEntry);
+            console.log('create entry HTML end');
+            console.log('create snack ...');
+            await execWebpack(argv);
+            console.log('create snack end');
+        }
+        if (process.env.RUN_MODE !== 'development' && !await check(process.env.PROJECT_OUT_PATH)) {
+            fs.removeSync(process.env.PROJECT_OUT_PATH);
+            throw '完整性校验失败';
+        }
+    }
+    console.log(`
+   _____                  __      ________    ____
+  / ___/____  ____ ______/ /__   / ____/ /   /  _/
+  \\__ \\/ __ \\/ __ \`/ ___/ //_/  / /   / /    / /
+ ___/ / / / / /_/ / /__/ ,<    / /___/ /____/ /
+/____/_/ /_/\\__,_/\\___/_/|_|   \\____/_____/___/  v.${version}
+    `);
+}
+
+/**
+ * 校验打包完整性
+ * @param output
+ * @return {Promise<boolean>}
+ */
+async function check(output) {
+    try {
+        const list = await fs.readdir(output);
+        for (let i = 0, l = list.length; i < l; i++) {
+            const dirname = list[i];
+            if (dirname === '__common__') continue;
+            const snackjson = path.join(output, dirname, 'snack.json');
+            if (!await fs.exists(snackjson)) continue;
+            const index = path.join(output, dirname, 'index.js');
+            const ex = await fs.exists(index);
+            if (!ex) {
+                console.error('snack check: ', index, ' file is missing');
+                return false;
+            }
+        }
+    } catch (err) {
+        console.error('snack check: ', err);
+        return false;
+    }
+    console.log('完整性校验通过');
+    return true;
+};
+
+/**
+ * 执行webpack
+ * @param args
+ * @return {Promise<unknown>}
+ */
+let isNpm = fs.existsSync(path.resolve(process.cwd(), './node_modules/.bin/', webpackFile));
+
+function execWebpack(args) {
+    return new Promise(resolve => {
+        let ps = isNpm ? spawn(
+            'webpack',
+            args,
+            {
+                stdio: 'inherit',
+                shell: true
+            }
+        ) : spawn(
+            path.resolve(__dirname, '../node_modules/.bin/', webpackFile),
+            args,
+            {
+                stdio: 'inherit'
+            }
+        );
+        ps.on('error', (e) => {
+            console.log(e);
+            resolve(false);
+        });
+        ps.on('exit', () => {
+            resolve(true);
+        });
+    });
+}
+
+/**
+ * 清理输出目录
+ * @param output 输出目录路径
+ */
+function clearOutput(output) {
+    fs.removeSync(output);
+}
+
+run(script);

package/config/webpack.dev.config.js

@@ -0,0 +1,183 @@
+/**
+ * @author 刘佳
+ * @date 2022/1/20 10:18 下午
+ * @description snack开发调试入口页面
+ */
+
+const path = require('path');
+const fs = require('fs-extra');
+const minimist = require('minimist');
+const TerserPlugin = require('terser-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+const webpack = require('webpack');
+const {VueLoaderPlugin} = require('vue-loader');
+const {version} = require('../package.json');
+const {injectIndexFile} = require('../utils/package');
+// 获取命令行参数
+let argv = minimist(process.argv.slice(2), {
+    default: {
+        mode: 'development'
+    }
+});
+// build mode
+const isDevelopment = argv.mode === 'development';
+const isProduction = argv.mode ? argv.mode === 'production' : true;
+const packageJson = JSON.parse(process.env.PROJECT_PACKAGE_JSON);
+const snackConfig = JSON.parse(process.env.PROJECT_SNACK_CONFIG);
+const entryConfig = snackConfig.entry;
+
+// paths
+const outPath = process.env.PROJECT_OUT_PATH;
+// add entry
+let templatePath = path.resolve(process.env.PROJECT_TEMPLATE_PATH, 'dev');
+const templatePkgPath = entryConfig && entryConfig.template && entryConfig.template.dev ? path.resolve(process.env.PROJECT_PATH, entryConfig.template.dev) : ''
+// 注入外部js/css
+injectIndexFile(templatePath, (indexRunFile) => {
+    // 导入模块列表
+    const packageList = JSON.parse(process.env.PROJECT_PACKAGE_LIST);
+    // add import
+    const imports = ['// Snack Module Start'];
+    const snackModuleMaps = [], snackModuleMapsParams = [];
+    const importModules = [];
+    for (let i = 0, l = packageList.length; i < l; i++) {
+        const item = packageList[i];
+        imports.push(`import * as ${item.name} from 'package/${item.dirName}'`);
+        snackModuleMaps.push(`${item.name}: {index:${item.name}.${item.dirName},setting:${item.name}.${item.dirName}Setting}`);
+        snackModuleMapsParams.push(item.name);
+        importModules.push(`'${item.name}': mosuleMaps['${item.name}'].index`);
+        importModules.push(`'${item.name}setting': mosuleMaps['${item.name}'].setting`);
+    }
+    imports.push('// Snack Module End');
+    // 替换文本
+    indexRunFile = indexRunFile.replace('/** import snack modules **/', imports.join('\n'));
+    indexRunFile = indexRunFile.replace('/** snack scripts version **/', version);
+    indexRunFile = indexRunFile.replace('/** snack module maps **/', `
+        const mosuleMaps = new Function('${snackModuleMapsParams.join('\',\'')}', \`return {
+            ${snackModuleMaps.join(',\n')}
+        }\`)(${snackModuleMapsParams.join(',')})
+    `);
+    indexRunFile = indexRunFile.replace('/** snack module maps **/', snackModuleMaps.join(',\n'));
+    indexRunFile = indexRunFile.replace('/** vers projectpkg **/', process.env.PROJECT_PACKAGE_JSON);
+    indexRunFile = indexRunFile.replace('/** vers packages **/', process.env.PROJECT_PACKAGE_LIST);
+    // 预导入模块
+    indexRunFile = indexRunFile.replace('/** vers importmodule **/', `
+        '${packageJson.name}': {
+                    ${importModules.join(',\n')}
+                }
+    `);
+    return indexRunFile;
+});
+// 克隆临时目录
+fs.copySync(templatePath, path.join(process.env.PROJECT_TEMP_PATH, 'temp/dev'));
+templatePath = path.join(process.env.PROJECT_TEMP_PATH, 'temp/dev');
+
+let conf = {
+    mode: 'development',
+    target: 'web',
+    devtool: 'eval-cheap-module-source-map',
+    entry: {
+        index: path.join(templatePath, 'index.tsx')
+    },
+    output: {
+        filename: `[name].bundle.[contenthash].js`,
+        path: outPath,
+        publicPath: '/',
+        assetModuleFilename: 'asset/[contenthash][ext][query]'
+    },
+    plugins: [
+        new HtmlWebpackPlugin({template: templatePkgPath || path.join(templatePath, 'index.html')}),
+        new VueLoaderPlugin(),
+        new webpack.HotModuleReplacementPlugin(),
+        new ReactRefreshWebpackPlugin()
+    ],
+    // loader配置
+    module: {
+        rules: [
+            {
+                test: /\.(ts|tsx|js|jsx|jsc|cjs)?$/,
+                loader: 'swc-loader',
+                options: {
+                    jsc: {
+                        parser: {
+                            syntax: 'typescript',
+                            tsx: true,
+                            dynamicImport: true
+                        },
+                        target: 'es5',
+                        keepClassNames: true,
+                        transform: {
+                            react: {
+                                development: true,
+                                refresh: true
+                            }
+                        }
+                    }
+                }
+            },
+            {
+                test: /\.vue$/,
+                exclude: /node_modules/,
+                use: 'vue-loader'
+            },
+            // 样式loader
+            {
+                test: /\.(css|sass|scss)$/,
+                // 使用哪些loader进行处理
+                use: [
+                    // use数组中loader执行顺序：从右到左，从下到上，依次执行(先执行css-loader)
+                    // style-loader：创建style标签，将js中的样式资源插入进去，添加到head中生效
+                    'style-loader',
+                    // css-loader：将css文件变成commonjs模块加载到js中，里面内容是样式字符串
+                    'css-loader',
+                    // less-loader：将less文件编译成css文件，需要下载less-loader和less
+                    'sass-loader'
+                ]
+            },
+            {
+                exclude: [/\.(js|mjs|jsx|ts|tsx|vue|sass|scss|css|vue|html|json|cjs)$/],
+                type: 'asset/resource'
+            }
+        ]
+    },
+    resolve: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+        alias: {
+            'src': path.join(process.env.PROJECT_PATH, 'src'),
+            'components': path.join(process.env.PROJECT_PATH, 'src/components'),
+            'package': path.join(process.env.PROJECT_PATH, 'src/package'),
+            'assets': path.join(process.env.PROJECT_PATH, 'src/assets'),
+            'template': path.join(__dirname, '../template')
+        }
+    },
+    optimization: {
+        minimize: false,
+        minimizer: [
+            new TerserPlugin({
+                extractComments: false//不将注释提取到单独的文件中
+            })
+        ],
+        splitChunks: {
+            chunks: 'all'
+        }
+    },
+    devServer: {
+        open: true,
+        client: {
+            progress: true
+        }
+    }
+};
+
+const configOverrides = path.resolve(process.env.PROJECT_PATH, 'config-overrides.js');
+if (fs.existsSync(configOverrides)) {
+    try {
+        const overrides = require(path.resolve(process.env.PROJECT_PATH, 'config-overrides.js'));
+        conf = overrides(conf);
+        console.log('snack config overrides');
+    } catch (err) {
+        console.error('SnackCLI Error:', err);
+    }
+}
+
+module.exports = conf;

package/config/webpack.entry.config.js

@@ -0,0 +1,180 @@
+const path = require('path');
+const fs = require('fs-extra');
+const minimist = require('minimist');
+const TerserPlugin = require('terser-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+// 获取命令行参数
+let argv = minimist(process.argv.slice(2), {
+    default: {
+        mode: 'development'
+    }
+});
+// build mode
+const isDevelopment = argv.mode === 'development';
+const isProduction = argv.mode ? argv.mode === 'production' : true;
+// paths
+const projectpath = process.env.PROJECT_PATH;
+const outPath = process.env.PROJECT_OUT_PATH;
+const snackConfig = JSON.parse(process.env.PROJECT_SNACK_CONFIG);
+const entryConfig = snackConfig.entry;
+const templatePath = path.resolve(process.env.PROJECT_TEMPLATE_PATH, 'entry');
+const templatePkgPath = entryConfig && entryConfig.template && entryConfig.template.entry ? path.resolve(process.env.PROJECT_PATH, entryConfig.template.entry) : ''
+const hash = String(Math.random() * 1000000 | 0) + String(Math.random() * 1000000 | 0);
+const pluginJs = entryConfig.js;
+const pluginCss = entryConfig.css;
+let jsFile = fs.readFileSync(path.join(templatePath, 'index.tsx'), {encoding: 'utf8'});
+// 外部自定义样式
+if (pluginJs) {
+    const p = `../../../${pluginJs.replace(/^(\/|\.\/)/, '')}`;
+    jsFile = jsFile.replace('/** import plugin js **/', `import '${p}'`);
+    console.log('外挂JS: ', path.resolve(templatePath, p));
+}
+if (pluginCss) {
+    const p = `../../../${pluginCss.replace(/^(\/|\.\/)/, '')}`;
+    jsFile = jsFile.replace('/** import plugin css **/', `import '${p}'`);
+    console.log('外挂CSS: ', path.resolve(templatePath, p));
+}
+fs.outputFileSync(path.join(templatePath, 'index.tsx'), jsFile);
+
+// 复制资源
+const copy = [];
+copy.push({
+    from: entryConfig.favicon ? path.resolve(projectpath, entryConfig.favicon) : path.resolve(process.env.PROJECT_TEMPLATE_PATH, 'favicon.svg'),
+    to: path.resolve(outPath)
+});
+copy.push({
+    from: path.resolve(process.env.PROJECT_TEMPLATE_PATH, 'minified.min.js'),
+    to: path.resolve(outPath)
+});
+copy.push({
+    from: path.resolve(process.env.PROJECT_TEMPLATE_PATH, 'proxy.min.js'),
+    to: path.resolve(outPath)
+});
+// 所要复制到入口文件的文件
+if (entryConfig.files instanceof Array) {
+    entryConfig.files.forEach(file => {
+        const filePath = path.resolve(projectpath, file);
+        const stat = fs.statSync(filePath);
+        let targetPath = path.resolve(outPath);
+        if (stat.isDirectory()) {
+            const pathParse = path.parse(filePath);
+            targetPath = path.resolve(outPath, pathParse.name);
+        }
+        copy.push({
+            from: filePath,
+            to: targetPath
+        });
+    });
+}
+// 清理目录
+fs.removeSync(outPath);
+
+module.exports = {
+    cache: {
+        type: 'filesystem',
+        allowCollectingMemory: true
+    },
+    performance: {
+        hints: false // 关闭性能提示
+    },
+    mode: isDevelopment ? 'development' : 'production',
+    target: ['web', 'es5'],
+    entry: path.join(templatePath, 'index.tsx'),
+    devtool: false,
+    output: {
+        filename: `[name].js`,
+        path: outPath,
+        publicPath: '/'
+    },
+    plugins: [
+        new CopyWebpackPlugin({patterns: copy}, {noErrorOnMissing: true}),
+        // new CopyWebpackPlugin({patterns: coyps}, {noErrorOnMissing: true}),
+        new HtmlWebpackPlugin(
+            {
+                title: entryConfig.title || 'Snack Entry',
+                filename: path.join(outPath, 'index.html'),
+                template: templatePkgPath || path.join(templatePath, 'index.html'),
+                hash: true,
+                inject: false,
+                jshash: hash, // js hash 参数
+                jsvers: {
+                    id: entryConfig.id,
+                    type: entryConfig.type || '_',
+                    mobile: {
+                        id: entryConfig.mobile && entryConfig.mobile.id || null,
+                        type: entryConfig.mobile && entryConfig.mobile.type || '_'
+                    },
+                    service: entryConfig.service,
+                    devServer: entryConfig.devServer,
+                    favicon: entryConfig.favicon === undefined ? './favicon.svg' : '',
+                    loaderjs: `main.js?_=${hash}`
+                }
+            }
+        )
+    ],
+    // loader配置
+    module: {
+        rules: [
+            {
+                test: /\.(ts|tsx|js|jsc|cjs)?$/,
+                loader: 'swc-loader',
+                options: {
+                    sync: true,
+                    jsc: {
+                        parser: {
+                            'syntax': 'typescript',
+                            'tsx': true
+                        },
+                        'target': 'es5',
+                        'keepClassNames': true,
+                        'loose': true
+                    }
+                }
+            },
+            // 样式loader
+            {
+                // 匹配哪些文件
+                test: /\.(css|sass|scss)$/,
+                // 使用哪些loader进行处理
+                use: [
+                    // use数组中loader执行顺序：从右到左，从下到上，依次执行(先执行css-loader)
+                    // style-loader：创建style标签，将js中的样式资源插入进去，添加到head中生效
+                    'style-loader',
+                    // css-loader：将css文件变成commonjs模块加载到js中，里面内容是样式字符串
+                    'css-loader',
+                    // less-loader：将less文件编译成css文件，需要下载less-loader和less
+                    'sass-loader'
+                ]
+            }
+        ]
+    },
+    resolve: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+        alias: {
+            'src': path.join(process.env.PROJECT_PATH, 'src'),
+            'components': path.join(process.env.PROJECT_PATH, 'src/components'),
+            'package': path.join(process.env.PROJECT_PATH, 'src/package'),
+            'assets': path.join(process.env.PROJECT_PATH, 'src/assets')
+        }
+    },
+    optimization: {
+        minimize: isProduction,
+        minimizer: [
+            new TerserPlugin(
+                {
+                    parallel: true,//使用多进程并发运行以提高构建速度 Boolean|Number 默认值： true
+                    terserOptions: {
+                      compress: {
+                        drop_debugger: true,//移除自动断点功能；
+                      },
+                      format: {
+                        comments: false,//删除注释
+                      },
+                    },
+                    extractComments: false,//是否将注释剥离到单独的文件中
+                  }
+            )
+        ]
+    }
+};