@norejs/ssr-builder 0.0.1

package/bin/norejs-ssr.js

@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+'use strict';
+const program = require('commander');
+
+program.command('start').action((options, command) => {
+    require('../scripts/start')(options, 'development');
+});
+
+program.command('build').action((options, command) => {
+    require('../scripts/start')(options, 'production');
+});
+
+program.parse(process.argv);

package/package.json

@@ -0,0 +1,21 @@
+{
+    "name": "@norejs/ssr-builder",
+    "version": "0.0.1",
+    "description": "SSR builder for NoreJS",
+    "main": "index.js",
+    "bin": {
+        "norejs-ssr-builder": "./bin/norejs-ssr.js"
+    },
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "author": "",
+    "license": "ISC",
+    "dependencies": {
+        "@norejs/ssr-server": "^0.0.1",
+        "commander": "10",
+        "fs-extra": "^11.1.1",
+        "webpack-merge": "^5.9.0",
+        "webpack-node-externals": "^3.0.0"
+    }
+}

package/plugins/react-scripts-ssr/config/webpack.ssr.config.js

@@ -0,0 +1,75 @@
+const path = require('path');
+const nodeExternals = require('webpack-node-externals');
+
+const { merge } = require('webpack-merge');
+const { requireNpmFromCwd } = require('../../../utils/project');
+// 去掉HTMLWebpackPlugin
+const ssrDisablePlugins = [
+    'HtmlWebpackPlugin',
+    'InlineChunkHtmlPlugin',
+    'HotModuleReplacementPlugin',
+    'ManifestPlugin',
+    'ReactRefreshWebpackPlugin',
+];
+
+const MiniCssExtractPlugin = requireNpmFromCwd('mini-css-extract-plugin');
+
+module.exports = function (baseConfig, ssrConfig, webpackEnv = 'development') {
+    // 去掉多余的插件
+    baseConfig.plugins = baseConfig.plugins.filter((plugin) => {
+        return !ssrDisablePlugins.includes(plugin.constructor.name);
+    });
+    if (
+        baseConfig.plugins.find(
+            (plugin) => plugin.constructor.name === 'MiniCssExtractPlugin'
+        )
+    ) {
+        baseConfig.plugins.push(
+            new MiniCssExtractPlugin({
+                // Options similar to the same options in webpackOptions.output
+                // both options are optional
+                filename: 'static/css/[name].[contenthash:8].css',
+                chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
+            })
+        );
+    }
+
+    const projectRoot = process.cwd();
+    // 替换style-loader
+    const rules = baseConfig.module.rules[1].oneOf;
+    rules.forEach((rule) => {
+        if (rule.test?.toString().includes('css')) {
+            rule.use.forEach((use, index) => {
+                if (typeof use === 'string' && use.includes('style-loader')) {
+                    rule.use[index] = {
+                        loader: MiniCssExtractPlugin.loader,
+                        options: {},
+                    };
+                } else if (use.loader?.includes('style-loader')) {
+                    rule.use[index] = {
+                        loader: MiniCssExtractPlugin.loader,
+                        options: {},
+                    };
+                }
+            });
+        }
+        return rule;
+    });
+
+    // 读取env文件，或者自定义
+    return merge(baseConfig, {
+        entry: { main: '/' + ssrConfig.entry },
+        output: {
+            filename: 'server.js',
+            path: path.resolve(projectRoot, ssrConfig.dist),
+            libraryTarget: 'commonjs',
+        },
+        optimization: {
+            minimize: false,
+            splitChunks: false,
+            runtimeChunk: false,
+        },
+        target: 'node',
+        externals: [nodeExternals()],
+    });
+};

package/plugins/react-scripts-ssr/index.js

@@ -0,0 +1,64 @@
+const fs = require('fs-extra');
+const {
+    getNpmPathFromCwd,
+    getFilePathFromCwd,
+} = require('../../utils/project');
+
+const runWebpack = require('../../utils/runWebpack');
+
+module.exports = function start(
+    options,
+    ssrConfig,
+    webpackEnv = 'development'
+) {
+    process.env.NODE_ENV = webpackEnv;
+    process.env.BABEL_ENV = webpackEnv;
+    // 获取react-scripts 的配置
+    const projectWebpackConfigPath = getWebpackFile('webpack.config.js');
+    const baseWebpackConfig = require(projectWebpackConfigPath)(webpackEnv);
+    const ssrWebpackConfigFactory = getSSRWebpackConfig();
+    if (typeof ssrWebpackConfigFactory !== 'function') {
+        throw new Error('webpack.ssr.config.js should export a function');
+    }
+    const webpackConfig = ssrWebpackConfigFactory(
+        baseWebpackConfig,
+        ssrConfig,
+        webpackEnv
+    );
+    return runWebpack(webpackConfig, webpackEnv);
+};
+/**
+ * 获取ssr的webpack配置
+ * @returns
+ */
+function getSSRWebpackConfig() {
+    const webpackConfigPath = getFilePathFromCwd(
+        'config/webpack.ssr.config.js'
+    );
+    if (fs.existsSync(webpackConfigPath)) {
+        return require(webpackConfigPath);
+    }
+
+    return require('./config/webpack.ssr.config');
+}
+
+/**
+ * 获取项目中的webpack配置
+ * */
+function getWebpackFile(webpackFileName) {
+    const projectWebpackConfigPath = getFilePathFromCwd(
+        'config/' + webpackFileName
+    );
+    if (fs.existsSync(projectWebpackConfigPath)) {
+        return projectWebpackConfigPath;
+    }
+    const webpackConfigPath = getNpmPathFromCwd(
+        'react-scripts/config/' + webpackFileName
+    );
+    if (!fs.existsSync(webpackConfigPath)) {
+        throw new Error(
+            'react-scripts is not installed in your project please make sure you have installed it'
+        );
+    }
+    return webpackConfigPath;
+}

package/scripts/start.js

@@ -0,0 +1,11 @@
+// 读取项目中的配置，监测当前项目是否react-scripts 项目
+const { getProjectConfig } = require('../utils/project');
+
+module.exports = function start(options, webpackEnv = 'development') {
+    const config = getProjectConfig();
+    if (config.ssr) {
+        const builderName = config.ssr.builder || 'react-scripts-ssr';
+        const builder = require(`../plugins/${builderName}`);
+        return builder(options, config.ssr, webpackEnv);
+    }
+};

package/utils/project.js

@@ -0,0 +1,128 @@
+const path = require('path');
+const fs = require('fs-extra');
+const defaultConfig = {
+    ssr: {
+        entry: 'src/server.js',
+        dist: 'build-ssr',
+        builder: 'react-scripts-ssr',
+    },
+    csr: {
+        dist: 'build',
+    },
+};
+/**
+ * 获取项目中的npm包路径
+ * @param {*} npmPkgName
+ * @param {*} filePath
+ * @returns
+ */
+function getNpmPathFromCwd(npmPkgName) {
+    const projectRoot = process.cwd();
+    const nodeModules = path.resolve(projectRoot, 'node_modules');
+    const npmPkgPath = path.resolve(nodeModules, npmPkgName);
+    return npmPkgPath;
+}
+
+/**
+ *
+ * @param {*} filePath
+ * @returns
+ */
+function getFilePathFromCwd(filePath) {
+    const projectRoot = process.cwd();
+    return path.resolve(projectRoot, filePath);
+}
+
+async function isReactScriptsInstalled() {
+    const reactScriptsPath = getNpmPathFromCwd('react-scripts');
+    return await fs.exists(reactScriptsPath);
+}
+function getProjectConfig() {
+    const projectConfigPath = getFilePathFromCwd('nore.config.js');
+    let customConfig = {};
+    if (fs.existsSync(projectConfigPath)) {
+        customConfig = require(projectConfigPath) || {};
+    }
+    // 深度合并
+    // 深度合并
+
+    return deepAssign({}, defaultConfig, customConfig);
+}
+
+function isPlainObject(obj) {
+    return (
+        typeof obj === 'object' &&
+        Object.prototype.toString.call(obj) === '[object Object]'
+    );
+}
+function deepAssign() {
+    let len = arguments.length,
+        target = arguments[0];
+    if (!isPlainObject(target)) {
+        target = {};
+    }
+    for (let i = 1; i < len; i++) {
+        let source = arguments[i];
+        if (isPlainObject(source)) {
+            for (let s in source) {
+                if (s === '__proto__' || target === source[s]) {
+                    continue;
+                }
+                if (isPlainObject(source[s])) {
+                    target[s] = deepAssign(target[s], source[s]);
+                } else {
+                    target[s] = source[s];
+                }
+            }
+        }
+    }
+    return target;
+}
+
+/**
+ * 当前项目是否运行过eject
+ * @param {*} projectRoot
+ * @returns
+ */
+async function isEjected(projectRoot) {
+    const configPath = path.resolve(projectRoot, 'config');
+    const scriptsPath = path.resolve(projectRoot, 'scripts');
+    return (await fs.exists(configPath)) && (await fs.exists(scriptsPath));
+}
+/**
+ * 从项目中加载npm包
+ * @param {*} npmPkgName
+ * @returns
+ */
+function requireNpmFromCwd(npmPkgName) {
+    const nodeModules = getNpmPathFromCwd(npmPkgName);
+    try {
+        return require(nodeModules);
+    } catch (error) {
+        return undefined;
+    }
+}
+
+/**
+ * 从项目中加载某个文件
+ * @param {*} filename
+ * @returns
+ */
+function requireFromCwd(filename) {
+    const nodeModules = getFilePathFromCwd(filename);
+    try {
+        return require(nodeModules);
+    } catch (error) {
+        return undefined;
+    }
+}
+
+module.exports = {
+    getNpmPathFromCwd,
+    isEjected,
+    requireNpmFromCwd,
+    getFilePathFromCwd,
+    requireFromCwd,
+    getProjectConfig,
+    isReactScriptsInstalled,
+};

package/utils/runWebpack.js

@@ -0,0 +1,140 @@
+const { requireNpmFromCwd } = require('./project');
+const formatWebpackMessages = requireNpmFromCwd(
+    'react-dev-utils/formatWebpackMessages'
+);
+const chalk = requireNpmFromCwd('react-dev-utils/chalk');
+const printBuildError = requireNpmFromCwd('react-dev-utils/printBuildError');
+const webpack = requireNpmFromCwd('webpack');
+
+// TODO:展示进度条
+// TODO: 展示结果
+module.exports = function runWebpack(config, webpackEnv = 'development') {
+    const isDev = webpackEnv === 'development';
+    isDev ? start(config) : build(config);
+};
+function start(config) {
+    const compiler = webpack(config);
+    compiler.watch({}, (err, stats) => {
+        if (err) {
+            return printBuildError(err);
+        }
+        const messages = formatWebpackMessages(
+            stats.toJson({ all: false, warnings: true, errors: true })
+        );
+        if (messages.errors.length) {
+            return printBuildError(new Error(messages.errors.join('\n\n')));
+        }
+        if (messages.warnings.length) {
+            console.log(chalk.yellow(messages.warnings.join('\n\n')));
+        }
+        console.log(chalk.green('SSR Compiled successfully.'));
+    });
+}
+
+function build(config) {
+    const compiler = webpack(config);
+    return new Promise((resolve, reject) => {
+        console.log('SSR Compiling...');
+        compiler.run((err, stats) => {
+            let messages;
+            if (err) {
+                if (!err.message) {
+                    return reject(err);
+                }
+
+                let errMessage = err.message;
+
+                // Add additional information for postcss errors
+                if (Object.prototype.hasOwnProperty.call(err, 'postcssNode')) {
+                    errMessage +=
+                        '\nCompileError: Begins at CSS selector ' +
+                        err['postcssNode'].selector;
+                }
+
+                messages = formatWebpackMessages({
+                    errors: [errMessage],
+                    warnings: [],
+                });
+            } else {
+                messages = formatWebpackMessages(
+                    stats.toJson({
+                        all: false,
+                        warnings: true,
+                        errors: true,
+                    })
+                );
+            }
+            if (messages.errors.length) {
+                // Only keep the first error. Others are often indicative
+                // of the same problem, but confuse the reader with noise.
+                if (messages.errors.length > 1) {
+                    messages.errors.length = 1;
+                }
+                return reject(new Error(messages.errors.join('\n\n')));
+            }
+            if (
+                process.env.CI &&
+                (typeof process.env.CI !== 'string' ||
+                    process.env.CI.toLowerCase() !== 'false') &&
+                messages.warnings.length
+            ) {
+                console.log(
+                    chalk.yellow(
+                        '\nTreating warnings as errors because process.env.CI = true.\n' +
+                            'Most CI servers set it automatically.\n'
+                    )
+                );
+                return reject(new Error(messages.warnings.join('\n\n')));
+            }
+
+            const resolveArgs = {
+                stats,
+                previousFileSizes: 0,
+                warnings: messages.warnings,
+            };
+            return resolve(resolveArgs);
+        });
+    })
+        .then(
+            ({ warnings }) => {
+                if (warnings.length) {
+                    console.log(chalk.yellow('Compiled with warnings.\n'));
+                    console.log(warnings.join('\n\n'));
+                    console.log(
+                        '\nSearch for the ' +
+                            chalk.underline(chalk.yellow('keywords')) +
+                            ' to learn more about each warning.'
+                    );
+                    console.log(
+                        'To ignore, add ' +
+                            chalk.cyan('// eslint-disable-next-line') +
+                            ' to the line before.\n'
+                    );
+                } else {
+                    console.log(chalk.green('Compiled successfully.\n'));
+                }
+            },
+            (err) => {
+                const tscCompileOnError =
+                    process.env.TSC_COMPILE_ON_ERROR === 'true';
+                if (tscCompileOnError) {
+                    console.log(
+                        chalk.yellow(
+                            'Compiled with the following type errors (you may want to check these before deploying your app):\n'
+                        )
+                    );
+                    printBuildError(err);
+                } else {
+                    console.log(chalk.red('Failed to compile.\n'));
+                    printBuildError(err);
+                    process.exit(1);
+                }
+            }
+        )
+        .catch((err) => {
+            if (err && err.message) {
+                console.log(err.message);
+            }
+            process.exit(1);
+        });
+}