@pixui-dev/pxw 0.1.16

package/config/webpack.js

@@ -0,0 +1,291 @@
+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, getOrSetH5esType } = 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) => {
+			const defaulth5esType = getOrSetH5esType();
+			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: defaulth5esType });
+
+			//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',
+			},
+		}),
+	];
+};

package/lib/assets/check.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<style>
+			body {
+				background-color: #ffffff;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				padding: 10pt;
+			}
+			div {
+				display: flex;
+				flex-direction: column;
+			}
+
+			p {
+				font-size: 20pt;
+			}
+
+			.frame {
+				border: 2px solid #aa0000;
+				/*display: flex;*/
+				/*flex-direction: row;*/
+				/*justify-content: space-evenly;*/
+				width: 90%;
+				padding: 10px;
+			}
+		</style>
+		<script type="module">
+			import preact from '/preact.js';
+			window.cpreact = preact;
+		</script>
+		<script>
+			window.self = window;
+			let onload = () => {
+				console.log('onload...');
+			};
+
+			toggle = function () {
+				let div = document.getElementById('timer');
+				let v = div.style.visibility;
+				console.log('visibility', v);
+				div.style.visibility = v == 'hidden' ? 'visible' : 'hidden';
+			};
+		</script>
+	</head>
+
+	<body onload="onload();">
+		<div>container rendered by JSX:</div>
+		<div id="container" class="frame"></div>
+		<div style="height: 10pt"></div>
+		<div>content in static html:</div>
+		<div class="frame" onclick="toggle()" style="align-items: center">
+			<div style="flex-direction: row">
+				<img height="150" src="https://global.discourse-cdn.com/sitepoint/original/3X/b/5/b59a78e2ed76c705f3c0dcb300f3f222aefdcd99.png" />
+			</div>
+			<div id="timer">I'm a timer!</div>
+		</div>
+	</body>
+</html>