@norejs/ssr-builder 0.0.2 → 1.0.0

package/.turbo/turbo-build.log

@@ -0,0 +1,5 @@
+
+> @norejs/ssr-builder@0.0.2 build /Users/pengzai/www/github/UniversalSSR/packages/ssr-builder
+> echo build
+
+build

package/CHANGELOG.md

@@ -0,0 +1,19 @@
+# @norejs/ssr-builder
+
+## 1.0.0
+
+### Major Changes
+
+- update
+
+### Patch Changes
+
+- Updated dependencies
+  - @norejs/ssr-server@1.0.0
+
+## 0.0.3
+
+### Patch Changes
+
+- Updated dependencies [2a8b808]
+  - @norejs/ssr-server@0.1.0

package/README.md

@@ -0,0 +1,5 @@
+# `@norejs/ssr-builder`
+
+@norejs/ssr-cli lightweight、universal SSR solution;
+
+It's work in progress. Please don't use it yet.

package/package.json

@@ -1,21 +1,29 @@
 {
-    "name": "@norejs/ssr-builder",
-    "version": "0.0.2",
-    "description": "SSR builder for NoreJS",
-    "main": "index.js",
-    "bin": {
-        "norejs-ssr-builder": "./bin/norejs-ssr-builder.js"
-    },
-    "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1"
-    },
-    "author": "",
-    "license": "ISC",
-    "dependencies": {
-        "@norejs/ssr-server": "^0.0.2",
-        "commander": "10",
-        "fs-extra": "^11.1.1",
-        "webpack-merge": "^5.9.0",
-        "webpack-node-externals": "^3.0.0"
-    }
-}
+  "name": "@norejs/ssr-builder",
+  "version": "1.0.0",
+  "description": "SSR builder for NoreJS",
+  "main": "index.js",
+  "bin": {
+    "norejs-ssr-builder": "./bin/norejs-ssr-builder.js"
+  },
+  "author": "pengzai",
+  "license": "ISC",
+  "dependencies": {
+    "@modern-js/builder": "^2.27.0",
+    "@modern-js/builder-rspack-provider": "^2.27.0",
+    "@modern-js/builder-webpack-provider": "^2.27.0",
+    "@norejs/ssr-server": "^1.0.0",
+    "@norejs/ssr-utils": "^0.0.2",
+    "commander": "10",
+    "fs-extra": "^11.1.1",
+    "mini-css-extract-plugin": "^2.7.6",
+    "react-dev-utils": "^12.0.1",
+    "webpack-merge": "^5.9.0",
+    "webpack-node-externals": "^3.0.0"
+  },
+  "scripts": {
+    "build": "echo build",
+    "start": "echo start",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}

package/plugins/modern/index.js

@@ -0,0 +1,42 @@
+const { createBuilder } = require('@modern-js/builder');
+const {
+    builderWebpackProvider,
+} = require('@modern-js/builder-webpack-provider');
+// const nodeExternals = require('webpack-node-externals');
+const path = require('path');
+const projectRoot = process.cwd();
+
+module.exports = async function start(
+    options,
+    ssrConfig,
+    webpackEnv = 'development'
+) {
+    // 使用modern builder 构建项目
+    const provider = builderWebpackProvider({
+        builderConfig: {
+            output: {
+                distPath: {
+                    root: ssrConfig.dist,
+                },
+            },
+            tools: {
+                webpack: (config, { env }) => {
+                    console.log('webpack config', config);
+                    config.output.libraryTarget = 'commonjs';
+                    // config.externals = [nodeExternals()];
+                },
+            },
+            // some configs
+        },
+    });
+    const builder = await createBuilder(provider, {
+        cwd: process.cwd(),
+        entry: { main: path.resolve(projectRoot, ssrConfig.entry) },
+        target: 'node',
+    });
+
+    await builder.build({
+        mode: webpackEnv,
+        watch: webpackEnv === 'development',
+    });
+};

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

@@ -1,8 +1,9 @@
 const path = require('path');
 const nodeExternals = require('webpack-node-externals');
-
 const { merge } = require('webpack-merge');
-const { requireNpmFromCwd } = require('../../../utils/project');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+
 // 去掉HTMLWebpackPlugin
 const ssrDisablePlugins = [
     'HtmlWebpackPlugin',
@@ -13,16 +14,15 @@ const ssrDisablePlugins = [
     'ReactRefreshWebpackPlugin',
 ];
 
-const MiniCssExtractPlugin = requireNpmFromCwd('mini-css-extract-plugin');
+
 
 module.exports = function (baseConfig, ssrConfig, webpackEnv = 'development') {
-    console.log('baseConfig', baseConfig);
     // 去掉多余的插件
     baseConfig.plugins = baseConfig.plugins.filter((plugin) => {
         return !ssrDisablePlugins.includes(plugin.constructor.name);
     });
     if (
-        baseConfig.plugins.find(
+        !baseConfig.plugins.find(
             (plugin) => plugin.constructor.name === 'MiniCssExtractPlugin'
         )
     ) {
@@ -59,7 +59,7 @@ module.exports = function (baseConfig, ssrConfig, webpackEnv = 'development') {
     });
 
     // 读取env文件，或者自定义
-    return merge(baseConfig, {
+    const ssrWebpackConfig = merge(baseConfig, {
         entry: { main: path.resolve(projectRoot, ssrConfig.entry) },
         output: {
             filename: 'server.js',
@@ -74,4 +74,6 @@ module.exports = function (baseConfig, ssrConfig, webpackEnv = 'development') {
         target: 'node',
         externals: [nodeExternals()],
     });
+    console.log('ssrWebpackConfig', ssrWebpackConfig);
+    return ssrWebpackConfig;
 };

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

@@ -1,10 +1,7 @@
 const fs = require('fs-extra');
-const {
-    getNpmPathFromCwd,
-    getFilePathFromCwd,
-} = require('../../utils/project');
+const { getNpmPathFromCwd, getFilePathFromCwd } = require('@norejs/ssr-utils');
 
-const runWebpack = require('../../utils/runWebpack');
+const runWebpack = require('../../utils/run-webpack');
 
 module.exports = function start(
     options,
@@ -13,9 +10,16 @@ module.exports = function start(
 ) {
     process.env.NODE_ENV = webpackEnv;
     process.env.BABEL_ENV = webpackEnv;
+    const isDev = webpackEnv === 'development';
     // 获取react-scripts 的配置
-    const projectWebpackConfigPath = getWebpackFile('webpack.config.js');
-    const baseWebpackConfig = require(projectWebpackConfigPath)(webpackEnv);
+    const projectWebpackConfigPath =
+        getWebpackFile('webpack.config.js') ||
+        getWebpackFile('webpack.config.' + (isDev ? 'dev' : 'prod') + '.js');
+    console.log('projectWebpackConfigPath', projectWebpackConfigPath);
+    let baseWebpackConfig = require(projectWebpackConfigPath);
+    if (typeof baseWebpackConfig === 'function') {
+        baseWebpackConfig = baseWebpackConfig(webpackEnv);
+    }
     const ssrWebpackConfigFactory = getSSRWebpackConfig();
     if (typeof ssrWebpackConfigFactory !== 'function') {
         throw new Error('webpack.ssr.config.js should export a function');
@@ -56,9 +60,7 @@ function getWebpackFile(webpackFileName) {
         '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 null;
     }
     return webpackConfigPath;
 }

package/scripts/start.js

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

package/utils/{runWebpack.js → run-webpack.js}

@@ -1,16 +1,14 @@
-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 { requireNpmFromCwd } = require('@norejs/ssr-utils');
 const webpack = requireNpmFromCwd('webpack');
+const chalk = require('react-dev-utils/chalk');
+const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
+const printBuildError = require('react-dev-utils/printBuildError');
 
 // TODO:展示进度条
 // TODO: 展示结果
-module.exports = function runWebpack(config, webpackEnv = 'development') {
+module.exports = function runWebpack(config, webpackEnv = 'development', cb) {
     const isDev = webpackEnv === 'development';
-    isDev ? start(config) : build(config);
+    isDev ? start(config, cb) : build(config, cb);
 };
 function start(config) {
     const compiler = webpack(config);
@@ -34,23 +32,13 @@ function start(config) {
 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: [],
@@ -65,28 +53,11 @@ function build(config) {
                 );
             }
             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,
@@ -100,16 +71,6 @@ function build(config) {
                 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'));
                 }

package/utils/project.js

@@ -1,128 +0,0 @@
-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,
-};