@pixui-dev/pxw 0.1.20 → 0.1.21

package/config/webpack.js

@@ -1,309 +1,325 @@
-const fs = require('fs');
-const path = require('path');
-const webpack = require('webpack');
-const argv = require('yargs').argv;
-
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const InlineChunkHtmlPlugin = require('inline-chunk-html-plugin');
-
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
-const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
-
-const sveltePreprocess = require('svelte-preprocess');
-
-const { getLocalIP, loadProjectConfig, getH5esType, setH5esType } = require('./util');
-
-const pr = path.resolve;
-let cwd = process.cwd();
-let isPxwSelf = cwd == pr(__dirname + '/..');
-let isShipping = argv.mode == 'production';
-console.log('isPxwSelf:', isPxwSelf);
-console.log('isShipping:', isShipping);
-let rootDir = pr(__dirname + '/../');
-let buildOutputPath = pr(cwd, 'dist', 'html' + (isShipping ? '-pro' : '-dev'));
-
-function getHtmlName(v) {
-	switch (v.name) {
-		case 'app': {
-			return 'index.html'; // app不允许自定义
-		}
-		case 'preprocess': {
-			return 'preprocess.html'; // preprocess不允许自定义
-		}
-		default: {
-			return v.output ? `${v.output}.html` : `${v.name}.html`;
-		}
-	}
-}
-
-let projectConfig = loadProjectConfig();
-///////////////////////////////////
-//所有app定义在这里
-let appDef = [];
-let pienv = {};
-//从链接的src里读取配置
-projectConfig.pages.forEach((p) => {
-	p.entry = `${cwd}/${p.entry}`;
-	p.template = `${cwd}/${p.template}`;
-	appDef.push(p);
-});
-
-let env = projectConfig.env;
-Object.entries(env || {}).forEach(([k, v]) => {
-	pienv['process.env.' + k] = JSON.stringify(v);
-});
-
-if (!projectConfig.noSelfCheck && (!isShipping || process.env.withSelfcheck === 'true' || isPxwSelf)) {
-	appDef.push({
-		name: 'selfcheck',
-		template: __dirname + '/../lib/assets/check.html',
-		entry: __dirname + '/../lib/check/main.tsx',
-		output: 'index',
-	});
-	projectConfig.pages.push({
-		name: 'selfcheck',
-	});
-}
-///////////////////////////////////
-
-let plugins = [
-	new CleanWebpackPlugin({
-		cleanOnceBeforeBuildPatterns: ['**/*', path.join(cwd, '.build')],
-	}),
-	new ForkTsCheckerWebpackPlugin({ async: !isShipping }), //开发时异步检查，打包时同步检查以阻止错误代码
-	new MiniCssExtractPlugin({
-		filename: '[name]/[name].css',
-	}),
-	new webpack.DefinePlugin(pienv),
-
-	...appDef.map((v) => {
-		return new HtmlWebpackPlugin({
-			minify: isShipping,
-			chunks: [v.name],
-			template: v.template,
-			filename: v.name + '/' + getHtmlName(v),
-		});
-	}),
-].filter((v) => !!v);
-
-let alias = {};
-
-//调整svelte-loader里用到的compiler，也要改用定制版本
-let usePikaSvelte = projectConfig.usePikaSvelte;
-if (usePikaSvelte) {
-	let sa = {
-		['svelte']: path.resolve('./lib/pika-svelte'),
-		['svelte/internal']: path.resolve('./lib/pika-svelte/internal'),
-		['svelte/compiler']: path.resolve('./lib/pika-svelte/compiler'),
-	};
-	require('module-alias/').addAliases(sa);
-	alias = Object.assign(alias, sa);
-}
-
-let loadBabelPlugin = function (name) {
-	return require(name);
-};
-// console.debug('appDef', appDef);
-
-module.exports = {
-	entry: Object.fromEntries(appDef.map((v) => [v.name, v.entry])),
-	output: {
-		path: buildOutputPath,
-		filename: '[name]/[name].js',
-		publicPath: isShipping
-			? '../' //发布后都从文件系统加载，使用相对路径引用素材
-			: `http://${getLocalIP()[0]}/`, //开发时绑定到外部ip，方便手机访问
-	},
-
-	externals: {
-		// preact: 'window.cpreact',
-		// react: 'window.cpreact',
-		// 'preact/hooks': 'window.cpreact',
-		// 'preact/compat': 'window.cpreact',
-		// 'pxwdom': 'window.pxwdom'
-		csharp: 'esm globalThis.CSharp',
-	},
-
-	resolve: {
-		modules: [pr(__dirname, '../node_modules'), pr(cwd, 'node_modules')], // 搜索当前子包下的 node_modules，主工程是业务包默认不会带这些工具库
-		extensions: ['.js', '.jsx', '.ts', '.tsx', '.svelte'],
-
-		alias: {
-			src: cwd + '/src',
-			lib: cwd + '/lib',
-			['faas-lib']: cwd + '/faas-lib',
-			['preact$']: __dirname + '/../lib/preact.js',
-			['preact/hooks$']: __dirname + '/../lib/preact.js',
-			['preact-router$']: __dirname + '/../lib/preact-router.js',
-			react: __dirname + '/../lib/preact.js',
-			// ['react-window']: path.resolve('./lib/react-window/src'),
-			// ['@improbable-eng/grpc-web']: path.resolve('./lib/grpc-web/dist'),
-			...alias,
-		},
-	},
-
-	module: {
-		rules: [
-			{
-				test: /.(js|ts)x?$/,
-				use: {
-					loader: require.resolve('babel-loader'),
-					options: {
-						presets: [[loadBabelPlugin('@babel/preset-typescript'), { allowNamespaces: true }]],
-						plugins: [
-							loadBabelPlugin('@babel/plugin-transform-flow-strip-types'),
-							loadBabelPlugin('@babel/plugin-syntax-jsx'),
-							[loadBabelPlugin('@babel/plugin-proposal-decorators'), { legacy: true }],
-							[loadBabelPlugin('@babel/plugin-transform-class-properties')],
-							[loadBabelPlugin('@babel/plugin-transform-optional-chaining')],
-
-							//这个插件将 jsx 标记转为 h 函数调用，但是在webpack打包后的代码里，import preact, { h } from 'preact' 里的 h 没了
-							//单个 h 成为无法识别的变量， 即使把 pragma 写成 preact.createElement 也没用，因为 preact 也被改名了
-							[loadBabelPlugin('@babel/plugin-transform-react-jsx'), { pragma: 'h' }],
-							//这个插件将 h 换成从 preact 中引入的 createElement，它知道 preact 被改名后的值
-							[
-								loadBabelPlugin('babel-plugin-jsx-pragmatic'),
-								{
-									module: 'preact',
-									import: 'h',
-									export: 'createElement',
-								},
-							],
-						],
-					},
-				},
-			},
-			{
-				test: /\.(png|jpg|gif|mp4|lottie)$/,
-				loader: require.resolve('url-loader'),
-				options: {
-					name: 'static/media/[name].[hash:8].[ext]',
-					limit: 1,
-				},
-			},
-			{
-				test: /\.svelte$/,
-				use: [
-					{
-						loader: 'svelte-loader',
-						options: {
-							compilerOptions: {
-								dev: !isShipping,
-							},
-							emitCss: true,
-							preprocess: sveltePreprocess({}),
-							hotReload: false,
-						},
-					},
-				],
-			},
-			{
-				test: /\.css$/,
-				use: [
-					MiniCssExtractPlugin.loader,
-					{
-						loader: require.resolve('css-loader'),
-						options: {
-							modules: false,
-						},
-					},
-				],
-			},
-			{
-				test: /\.less$/,
-				use: [
-					{
-						loader: MiniCssExtractPlugin.loader,
-						options: {
-							publicPath: '../',
-						},
-					},
-					{
-						loader: require.resolve('css-loader'),
-						options: {
-							modules: true,
-							esModule: false,
-						},
-					},
-					{
-						loader: require.resolve('less-loader'),
-						options: { javascriptEnabled: true },
-					},
-				],
-			},
-		],
-	},
-
-	optimization: {
-		minimize: false, // 最终发布会用pfbs转成二进制，所以源码就不用压缩了，方便阅读调试
-	},
-
-	devtool: 'source-map',
-
-	plugins,
-
-	//这个属性webpack打包时是不用的，是给pxw里的express做扩展用的，之所以要包在devServer这一层key里是因为webpack5会强制校验配置文件中不包含未知的key，只有这个key作为曾经的配置项被保留下来，刚好用来传递变量
-	devServer: {
-		getMiddleware: function () {
-			return getMiddleware;
-		},
-	},
-};
-
-var getMiddleware = function (appPort) {
-	const middleware = require('webpack-dev-middleware');
-	let h5es = require('./h5es');
-
-	process.env.mode = 'development';
-	let config = module.exports;
-
-	config.mode = 'development';
-	config.output.publicPath = `http://${getLocalIP()[0]}:${appPort}/`;
-	const compiler = webpack(config);
-	return [
-		(req, res, next) => {
-			if (req.url == '/') return res.sendFile(pr(rootDir, 'config/index.html'));
-			if (req.url == '/api/get-project-config') return res.json({ ...projectConfig, h5esVersions: h5es.h5esVersions, defaultH5esType: getH5esType() });
-			if (req.url == '/api/update-tsconfig') {
-				try {
-					console.log(req.body);
-					let h5esType = setH5esType(req.body.typeRoots);
-					res.json({
-						success: true,
-						restartRecommended: true,
-						newConfig: h5esType,
-					});
-				}
-				catch (error) {
-					console.log(error);
-					res.status(500).json({
-						error: `更新配置失败: ${error.message}`,
-						detail: error.stack,
-					});
-				}
-				return;
-			}
-
-			//rewrites page's subpath /name/a/b/c to /name
-			for (let i = 0; i < projectConfig.pages.length; i++) {
-				let p = projectConfig.pages[i];
-				let prefix = `/${p.name}/`;
-				console.log('check rewrite', req.url, prefix);
-				if (req.url.startsWith(prefix) && req.url.indexOf('.') < 0) {
-					req.url = prefix;
-					return next();
-				}
-			}
-			return next();
-		},
-		middleware(compiler, {
-			writeToDisk: true,
-			mimeTypes: {
-				js: 'text/javascript',
-			},
-		}),
-	];
-};
+const fs = require('fs');
+const path = require('path');
+const webpack = require('webpack');
+const argv = require('yargs').argv;
+
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const InlineChunkHtmlPlugin = require('inline-chunk-html-plugin');
+
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+
+const sveltePreprocess = require('svelte-preprocess');
+
+const { getLocalIP, loadProjectConfig, getH5esType, setH5esType } = require('./util');
+
+const pr = path.resolve;
+let cwd = process.cwd();
+let isPxwSelf = cwd == pr(__dirname + '/..');
+let isShipping = argv.mode == 'production';
+console.log('isPxwSelf:', isPxwSelf);
+console.log('isShipping:', isShipping);
+let rootDir = pr(__dirname + '/../');
+let buildOutputPath = pr(cwd, 'dist', 'html' + (isShipping ? '-pro' : '-dev'));
+
+function getHtmlName(v) {
+	switch (v.name) {
+		case 'app': {
+			return 'index.html'; // app不允许自定义
+		}
+		case 'preprocess': {
+			return 'preprocess.html'; // preprocess不允许自定义
+		}
+		default: {
+			return v.output ? `${v.output}.html` : `${v.name}.html`;
+		}
+	}
+}
+
+let projectConfig = loadProjectConfig();
+///////////////////////////////////
+//所有app定义在这里
+let appDef = [];
+let pienv = {};
+//从链接的src里读取配置
+projectConfig.pages.forEach((p) => {
+	p.entry = `${cwd}/${p.entry}`;
+	p.template = `${cwd}/${p.template}`;
+	appDef.push(p);
+});
+
+let env = projectConfig.env;
+Object.entries(env || {}).forEach(([k, v]) => {
+	pienv['process.env.' + k] = JSON.stringify(v);
+});
+
+if (!projectConfig.noSelfCheck && (!isShipping || process.env.withSelfcheck === 'true' || isPxwSelf)) {
+	appDef.push({
+		name: 'selfcheck',
+		template: __dirname + '/../lib/assets/check.html',
+		entry: __dirname + '/../lib/check/main.tsx',
+		output: 'index',
+	});
+	projectConfig.pages.push({
+		name: 'selfcheck',
+	});
+}
+///////////////////////////////////
+
+let plugins = [
+	new CleanWebpackPlugin({
+		cleanOnceBeforeBuildPatterns: ['**/*', path.join(cwd, '.build')],
+	}),
+	new ForkTsCheckerWebpackPlugin({ async: !isShipping }), //开发时异步检查，打包时同步检查以阻止错误代码
+	new MiniCssExtractPlugin({
+		filename: '[name]/[name].css',
+	}),
+	new webpack.DefinePlugin(pienv),
+
+	...appDef.map((v) => {
+		return new HtmlWebpackPlugin({
+			minify: isShipping,
+			chunks: [v.name],
+			template: v.template,
+			filename: v.name + '/' + getHtmlName(v),
+		});
+	}),
+].filter((v) => !!v);
+
+let alias = {};
+
+//调整svelte-loader里用到的compiler，也要改用定制版本
+let usePikaSvelte = projectConfig.usePikaSvelte;
+if (usePikaSvelte) {
+	let sa = {
+		['svelte']: path.resolve('./lib/pika-svelte'),
+		['svelte/internal']: path.resolve('./lib/pika-svelte/internal'),
+		['svelte/compiler']: path.resolve('./lib/pika-svelte/compiler'),
+	};
+	require('module-alias/').addAliases(sa);
+	alias = Object.assign(alias, sa);
+}
+
+let loadBabelPlugin = function (name) {
+	return require(name);
+};
+// console.debug('appDef', appDef);
+
+module.exports = {
+	entry: Object.fromEntries(appDef.map((v) => [v.name, v.entry])),
+	output: {
+		path: buildOutputPath,
+		filename: '[name]/[name].js',
+		publicPath: isShipping
+			? '../' //发布后都从文件系统加载，使用相对路径引用素材
+			: `http://${getLocalIP()[0]}/`, //开发时绑定到外部ip，方便手机访问
+	},
+
+	externals: {
+		// preact: 'window.cpreact',
+		// react: 'window.cpreact',
+		// 'preact/hooks': 'window.cpreact',
+		// 'preact/compat': 'window.cpreact',
+		// 'pxwdom': 'window.pxwdom'
+		csharp: 'esm globalThis.CSharp',
+	},
+
+	resolve: {
+		modules: [pr(__dirname, '../node_modules'), pr(cwd, 'node_modules')], // 搜索当前子包下的 node_modules，主工程是业务包默认不会带这些工具库
+		extensions: ['.js', '.jsx', '.ts', '.tsx', '.svelte'],
+
+		alias: {
+			src: cwd + '/src',
+			lib: cwd + '/lib',
+			['faas-lib']: cwd + '/faas-lib',
+			['preact$']: __dirname + '/../lib/preact.js',
+			['preact/hooks$']: __dirname + '/../lib/preact.js',
+			['preact-router$']: __dirname + '/../lib/preact-router.js',
+			react: __dirname + '/../lib/preact.js',
+			// ['react-window']: path.resolve('./lib/react-window/src'),
+			// ['@improbable-eng/grpc-web']: path.resolve('./lib/grpc-web/dist'),
+			...alias,
+		},
+	},
+
+	module: {
+		rules: [
+			{
+				test: /.(js|ts)x?$/,
+				use: {
+					loader: require.resolve('babel-loader'),
+					options: {
+						presets: [[loadBabelPlugin('@babel/preset-typescript'), { allowNamespaces: true }]],
+						plugins: [
+							loadBabelPlugin('@babel/plugin-transform-flow-strip-types'),
+							loadBabelPlugin('@babel/plugin-syntax-jsx'),
+							[loadBabelPlugin('@babel/plugin-proposal-decorators'), { legacy: true }],
+							[loadBabelPlugin('@babel/plugin-transform-class-properties')],
+							[loadBabelPlugin('@babel/plugin-transform-optional-chaining')],
+
+							//这个插件将 jsx 标记转为 h 函数调用，但是在webpack打包后的代码里，import preact, { h } from 'preact' 里的 h 没了
+							//单个 h 成为无法识别的变量， 即使把 pragma 写成 preact.createElement 也没用，因为 preact 也被改名了
+							[loadBabelPlugin('@babel/plugin-transform-react-jsx'), { pragma: 'h' }],
+							//这个插件将 h 换成从 preact 中引入的 createElement，它知道 preact 被改名后的值
+							[
+								loadBabelPlugin('babel-plugin-jsx-pragmatic'),
+								{
+									module: 'preact',
+									import: 'h',
+									export: 'createElement',
+								},
+							],
+						],
+					},
+				},
+			},
+			{
+				test: /\.(png|jpg|gif|mp4|lottie)$/,
+				loader: require.resolve('url-loader'),
+				options: {
+					name: 'static/media/[name].[hash:8].[ext]',
+					limit: 1,
+				},
+			},
+			{
+				test: /\.svelte$/,
+				use: [
+					{
+						loader: 'svelte-loader',
+						options: {
+							compilerOptions: {
+								dev: !isShipping,
+							},
+							emitCss: true,
+							preprocess: sveltePreprocess({}),
+							hotReload: false,
+						},
+					},
+				],
+			},
+			{
+				test: /\.css$/,
+				use: [
+					MiniCssExtractPlugin.loader,
+					{
+						loader: require.resolve('css-loader'),
+						options: {
+							modules: false,
+						},
+					},
+				],
+			},
+			{
+				test: /\.less$/,
+				use: [
+					{
+						loader: MiniCssExtractPlugin.loader,
+						options: {
+							publicPath: '../',
+						},
+					},
+					{
+						loader: require.resolve('css-loader'),
+						options: {
+							modules: true,
+							esModule: false,
+						},
+					},
+					{
+						loader: require.resolve('less-loader'),
+						options: { javascriptEnabled: true },
+					},
+				],
+			},
+		],
+	},
+
+	optimization: {
+		minimize: false, // 最终发布会用pfbs转成二进制，所以源码就不用压缩了，方便阅读调试
+	},
+
+	devtool: 'source-map',
+
+	plugins,
+
+	//这个属性webpack打包时是不用的，是给pxw里的express做扩展用的，之所以要包在devServer这一层key里是因为webpack5会强制校验配置文件中不包含未知的key，只有这个key作为曾经的配置项被保留下来，刚好用来传递变量
+	devServer: {
+		getMiddleware: function () {
+			return getMiddleware;
+		},
+	},
+};
+
+var getMiddleware = function (appPort, notifyAppReload) {
+	// console.log('webpack getMiddleware', appPort, notifyAppReload);
+	const middleware = require('webpack-dev-middleware');
+	let h5es = require('./h5es');
+
+	process.env.mode = 'development';
+	let config = module.exports;
+
+	config.mode = 'development';
+	config.output.publicPath = `http://${getLocalIP()[0]}:${appPort}/`;
+	config.plugins.push(
+		//有html文件重新生成时，通知已经打开的页面reload
+		new (class PxAutobackupPlugin {
+			apply(compiler) {
+				compiler.hooks.afterEmit.tap('PxAutoReloadPlugin', (info) => {
+					let assets = Object.entries(info.assets).map(([name, asset]) => {
+						if (name.endsWith('.html')) {
+							console.log('webpack afterEmit', name);
+							notifyAppReload(name.split('/')[0]);
+						}
+					});
+				});
+			}
+		})(),
+	);
+	const compiler = webpack(config);
+	return [
+		(req, res, next) => {
+			if (req.url == '/') return res.sendFile(pr(rootDir, 'config/index.html'));
+			if (req.url == '/api/get-project-config') return res.json({ ...projectConfig, h5esVersions: h5es.h5esVersions, defaultH5esType: getH5esType() });
+			if (req.url == '/api/update-tsconfig') {
+				try {
+					console.log(req.body);
+					let h5esType = setH5esType(req.body.typeRoots);
+					res.json({
+						success: true,
+						restartRecommended: true,
+						newConfig: h5esType,
+					});
+				}
+				catch (error) {
+					console.log(error);
+					res.status(500).json({
+						error: `更新配置失败: ${error.message}`,
+						detail: error.stack,
+					});
+				}
+				return;
+			}
+
+			//rewrites page's subpath /name/a/b/c to /name
+			for (let i = 0; i < projectConfig.pages.length; i++) {
+				let p = projectConfig.pages[i];
+				let prefix = `/${p.name}/`;
+				console.log('check rewrite', req.url, prefix);
+				if (req.url.startsWith(prefix) && req.url.indexOf('.') < 0) {
+					req.url = prefix;
+					return next();
+				}
+			}
+			return next();
+		},
+		middleware(compiler, {
+			writeToDisk: true,
+			mimeTypes: {
+				js: 'text/javascript',
+			},
+		}),
+	];
+};