Skip to content

Commit

Permalink
feat(@kkt/ssr): 新增 HOSTAPI 变量, overridesCommonWebpack/minify 配置参数 & 修…
Browse files Browse the repository at this point in the history 
…复 PUBLIC_URL 问题 (#26)
  • Loading branch information
@SunLxy
SunLxy authored Mar 24, 2022
1 parent 2c8bf2f commit 6f1fc34
Show file tree
Hide file tree
Showing 16 changed files with 173 additions and 103 deletions.
6 changes: 3 additions & 3 deletions core/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@kkt/ssr",
"version": "3.1.6",
"version": "3.1.7",
"description": "",
"license": "MIT",
"main": "lib/index.js",
Expand All @@ -27,8 +27,8 @@
},
"dependencies": {
"@babel/core": "^7.17.8",
"@babel/runtime": "^7.17.8",
"@babel/register": "^7.17.7",
"@babel/runtime": "^7.17.8",
"babel-preset-react-app": "^10.0.1",
"css-loader": "^6.7.1",
"kkt": "^7.1.5",
Expand All @@ -42,4 +42,4 @@
"webpack-node-externals": "^3.0.0",
"webpackbar": "^5.0.2"
}
}
}
30 changes: 23 additions & 7 deletions core/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
process.env.FAST_REFRESH = 'false';
process.env.BUILD_PATH = "dist"


import minimist from 'minimist';
import { BuildArgs } from 'kkt';
import { OptionsProps } from "./interface"

function help() {
const { version } = require('../package.json');
Expand All @@ -18,6 +18,9 @@ function help() {
console.log(' --s-st, --s-split ', 'server Split code .');
console.log(' --c-st, --c-split ', 'client Split code .');
console.log(' -o, --original ', 'Use original react-scripts .');
console.log(' -m, --minify ', 'All Minify output.');
console.log(' --s-m, --s-minify ', 'server Minify output.');
console.log(' --c-m, --c-minify ', 'clinet Minify output.');

console.log('\n Example:\n');
console.log(' $ \x1b[35mkkt-ssr\x1b[0m build');
Expand All @@ -33,15 +36,21 @@ function help() {

interface SSRNCCArgs extends BuildArgs {
"s-ne"?: boolean;
"s-m"?: boolean;
"s-minify"?: boolean;
"s-nodeExternals"?: boolean,
"s-st"?: boolean,
"s-split"?: boolean,
"c-ne"?: boolean;
"c-nodeExternals"?: boolean,
"c-st"?: boolean,
"c-split"?: boolean,
"c-m"?: boolean;
"c-minify"?: boolean;
"o"?: boolean,
"original"?: boolean,
"m"?: boolean;
"minify"?: boolean,
}

(async () => {
Expand Down Expand Up @@ -84,17 +93,24 @@ interface SSRNCCArgs extends BuildArgs {
// 使用原始 react-scripts
const original = argvs["o"] || argvs["original"]

const options = {
const mini = argvs["m"] || argvs["minify"]

const miniServer = mini || argvs["s-m"] || argvs["s-minify"]
const miniClient = mini || argvs["c-m"] || argvs["c-minify"]

const options: OptionsProps = {
clientNodeExternals,
serverNodeExternals,
clientIsChunk,
serverIsChunk,
original
original,
mini,
miniServer,
miniClient
}
// 解决 原始情况下 PUBLIC_URL 报错
if (argvs["PUBLIC_URL"]) {
process.env.PUBLIC_URL = argvs["PUBLIC_URL"];
} else {

// 解决 使用 react-scripts 原始情况下 PUBLIC_URL 报错
if (!Reflect.has(process.env || {}, "PUBLIC_URL")) {
process.env.PUBLIC_URL = '';
}

Expand Down
5 changes: 4 additions & 1 deletion core/src/interface.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,8 @@ export interface OptionsProps {
serverNodeExternals: boolean;
serverIsChunk: boolean;
clientIsChunk: boolean;
original: boolean
original: boolean,
mini: boolean
miniServer: boolean
miniClient: boolean
}
4 changes: 4 additions & 0 deletions core/src/overrides/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,8 @@ export interface OverridesProps {
overridesClientWebpack?: (conf: webpack.Configuration, env: "development" | "production", options: any) => webpack.Configuration,
/** 服务端配置 */
overridesServerWebpack?: (conf: webpack.Configuration, env: "development" | "production", options: any) => webpack.Configuration;
/** 公共覆盖配置 */
overridesCommonWebpack?: (conf: webpack.Configuration, env: "development" | "production", options: any) => webpack.Configuration;
// 最终的配置
overridesWebpack?: WebpackConfigFunction

Expand Down Expand Up @@ -77,6 +79,8 @@ let overrides: OverridesProps = {
overridesClientWebpack: undefined,
// 自定义 server 配置设置
overridesServerWebpack: undefined,
/** 公共覆盖配置 */
overridesCommonWebpack: undefined,
// 最终自定义配置设置
overridesWebpack: undefined,
// 监听配置
Expand Down
17 changes: 1 addition & 16 deletions core/src/overrides/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,23 +137,8 @@ export const restOutPut = (conf: WebpackConfiguration, options: WebpackConfigura
};
};

export const addMiniCssExtractPlugin = (conf: WebpackConfiguration): WebpackConfiguration => {
return {
...conf,
plugins: conf.plugins.concat([
// 开发状态下没有这个 plugin
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',
})
]),
}
}

// loader source-map-loader

export const removeSourceMapLoader = (conf: WebpackConfiguration): WebpackConfiguration => {
return {
...conf,
Expand All @@ -164,7 +149,6 @@ export const removeSourceMapLoader = (conf: WebpackConfiguration): WebpackConfig
}
}


// node 环境 把 css 进行处理
export const restDevModuleRuleCss = (conf: WebpackConfiguration,): WebpackConfiguration => {
return {
Expand All @@ -179,6 +163,7 @@ export const restDevModuleRuleCss = (conf: WebpackConfiguration,): WebpackConfig

/**
* 1. 去除 style-loader|mini-css-extract-plugin
* 2. 修改 css-loader 配置
* */
export const getModuleCSSRules = (rules: (webpack.RuleSetRule | '...')[], shouldUseSourceMap: boolean = false) => {
const newRules: any = [];
Expand Down
121 changes: 93 additions & 28 deletions core/src/script/utils/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
restDevModuleRuleCss,
removeSourceMapLoader
} from "../../overrides/utils"

const { choosePort } = require('react-dev-utils/WebpackDevServerUtils');
// 引入环境变量
require(`${reactScripts}/config/env`);
Expand All @@ -25,17 +26,33 @@ require(`${reactScripts}/config/env`);
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
const HOST = process.env.HOST || 'localhost';

const getWebpackConfig = (newConfig: webpack.Configuration, type: "server" | "client", overrides: OverridesProps, nodeExternals: boolean, split: boolean, env: "development" | "production", isWebpackDevServer: boolean) => {

export type GetWebpackConfig = (
newConfig: webpack.Configuration,
type: "server" | "client",
overrides: OverridesProps,
nodeExternals: boolean,
split: boolean,
env: "development" | "production",
isWebpackDevServer: boolean,
options: OptionsProps
) => webpack.Configuration


const getWebpackConfig: GetWebpackConfig = (newConfig, type, overrides, nodeExternals, split, env, isWebpackDevServer, options) => {
/** 入口 */
newConfig.entry = overrides[`${type}_path`]
/** 加载 进度条 plugin */
newConfig = getWbpackBarPlugins(newConfig, {
name: type,
})
/** 输出配置 */
const out: webpack.Configuration["output"] = {
filename: `${type}.js`,
path: overrides.output_path,
}

if (type === "server") {
/** 输出 类型 */
out.library = { type: "commonjs2" }
}

Expand All @@ -44,19 +61,21 @@ const getWebpackConfig = (newConfig: webpack.Configuration, type: "server" | "cl

const httpPath = `http://${HOST}:${PORT}`

newConfig = restOutPut(newConfig, out)

/** start 命令时候 配置前缀 为 devServer 端口 */
if (isWebpackDevServer && env === "development") {
newConfig.output.publicPath = `${httpPath}/`
out.publicPath = `${httpPath}/`
} else {
newConfig.output.publicPath = `/`
out.publicPath = `/`
}

/** 重置 输入配置 */
newConfig = restOutPut(newConfig, out)

let isCreateAsset = false;
if (isWebpackDevServer && type === "client" && env === "development") {
isCreateAsset = true
}

/** start 命令下 生成 server.js文件和 自动启动 server.js 服务 */
if (isWebpackDevServer && type === "server" && env === "development") {
newConfig.plugins.push(
new DevServerPlugins({
Expand All @@ -69,91 +88,137 @@ const getWebpackConfig = (newConfig: webpack.Configuration, type: "server" | "cl
}),
)
}

/** 重置 asset-manifest.json 文件内容 */
newConfig = restWebpackManifestPlugin(newConfig, overrides.paths, type, isCreateAsset, httpPath)

/** 清除 html 模板方面的 plugin **/
newConfig = clearHtmlTemp(newConfig)

newConfig.module.exprContextCritical = false;

const define = {
OUTPUT_PUBLIC_PATH: JSON.stringify(overrides.output_path),
KKT_PUBLIC_DIR: JSON.stringify(process.env.KKT_PUBLIC_DIR || overrides.output_path),
HOST: JSON.stringify(HOST),
PORT: JSON.stringify(PORT),
Dev_Server: JSON.stringify(isWebpackDevServer),
HOSTAPI: JSON.stringify(undefined),
"process.env.PORT": JSON.stringify(PORT),
"process.env.HOSTAPI": JSON.stringify(undefined),
"process.env.HOST": JSON.stringify(HOST)
}

if (isWebpackDevServer) {
// 代理 服务的 ip 地址
define.HOSTAPI = JSON.stringify(`http://${HOST}:${PORT}`)
define["process.env.HOSTAPI"] = JSON.stringify(`http://${HOST}:${PORT}`)
}

newConfig.plugins.push(
new webpack.DefinePlugin({
OUTPUT_PUBLIC_PATH: JSON.stringify(overrides.output_path),
HOST: JSON.stringify(HOST),
PORT: JSON.stringify(PORT),
Dev_Server: JSON.stringify(isWebpackDevServer),
"process.env.PORT": JSON.stringify(PORT || 3000),
"process.env.HOST": JSON.stringify(HOST || "localhost"),
"process.env.PUBLIC_URL": JSON.stringify(process.env.PUBLIC_URL || overrides.output_path || "")
}),
new webpack.DefinePlugin(define),
)

if (!split) {
// 代码是否进行分割
newConfig.plugins.push(new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }))
}

if (nodeExternals) {
/**
* https://www.npmjs.com/package/webpack-node-externals
* 这个库扫描node_modules文件夹中的所有 node_modules 名称，并构建一个外部函数，告诉 Webpack 不要捆绑这些模块或它们的任何子模块
* */
newConfig.externals = [webpackNodeExternals()]
}

if (type === "server") {
if (options.miniServer && type === "server") {
/** server 端 去除代码压缩 */
newConfig.optimization.minimize = false
newConfig.optimization.minimizer = []
}

if (options.miniClient && type === "client") {
/** client 端 去除代码压缩 */
newConfig.optimization.minimize = false
newConfig.optimization.minimizer = []
}

return newConfig
}

export default async (env: "development" | "production", options: OptionsProps, isWebpackDevServer: boolean = false) => {

/** 端口处理 */
const PORT = await choosePort(HOST, DEFAULT_PORT);

/** 加载自定义配置 */
const overrides = await loaderConf()

process.env.PORT = PORT || "3000"
process.env.HOST = HOST || "localhost";


const { overridesClientWebpack, overridesServerWebpack, overridesWebpack, ...rest } = overrides
const { overridesClientWebpack, overridesServerWebpack, overridesWebpack, overridesCommonWebpack, ...rest } = overrides

const configFactory = require(`${webpackConfigPath}`);

let configArr: webpack.Configuration[] = []

/**------------------------ client --------------------- */
/**------------------------ client 配置 --------------------- */
if (fs.existsSync(overrides.client_path)) {
const configClient = configFactory(env);

let newConfigClient = configClient

// 控制 client 是否使用 ssr，默认情况下使用
if (!options.original) {
newConfigClient = getWebpackConfig(configClient, "client", overrides, options.clientNodeExternals, options.clientIsChunk, env, isWebpackDevServer)

newConfigClient = getWebpackConfig(configClient, "client", overrides, options.clientNodeExternals, options.clientIsChunk, env, isWebpackDevServer, options)
}
if (isWebpackDevServer && !options.original) {
// 去除 source-map-loader
newConfigClient = removeSourceMapLoader(newConfigClient)
}
if (overridesCommonWebpack) {
newConfigClient = overridesCommonWebpack(newConfigClient, env, { ...rest, env })
}
if (overridesClientWebpack) {
newConfigClient = overridesClientWebpack(newConfigClient, env, { ...rest, env })
}
configArr.push(newConfigClient)
}

/**------------------------ server --------------------- */
/**------------------------ server 配置 --------------------- */
if (fs.existsSync(overrides.server_path)) {

const configServer = configFactory(env);
let newConfigServer = getWebpackConfig(configServer, "server", overrides, options.serverNodeExternals, options.serverIsChunk, env, isWebpackDevServer)

let newConfigServer = getWebpackConfig(configServer, "server", overrides, options.serverNodeExternals, options.serverIsChunk, env, isWebpackDevServer, options)

newConfigServer.devtool = false
newConfigServer.target = "node14"

/** server 处理 css */
newConfigServer = restDevModuleRuleCss(newConfigServer)
// 去除 source-map-loader
/** 去除 source-map-loader */
newConfigServer = removeSourceMapLoader(newConfigServer)

if (overridesCommonWebpack) {

newConfigServer = overridesCommonWebpack(newConfigServer, env, { ...rest, env })

}

if (overridesServerWebpack) {

newConfigServer = overridesServerWebpack(newConfigServer, env, { ...rest, env })

}

configArr.push(newConfigServer)
}

/**------------------------ other --------------------- */
if (overridesWebpack && typeof overridesWebpack === "function") {

configArr = overridesWebpack(configArr, env, { ...rest, env }) as webpack.Configuration[]

}

return {
Expand Down
Loading

0 comments on commit 6f1fc34

Please sign in to comment.