oipage 1.4.0-alpha.1 → 1.4.0

package/bin/serve.js

@@ -1,132 +1,148 @@
-const { join } = require("path");
-const { existsSync, lstatSync, statSync, createReadStream } = require("fs");
-const { createServer } = require('http');
-const packageValue = require("../package.json");
-const network = require("./tools/network.js");
-const mineTypes = require("./data/mineTypes.json");
-const resolve404 = require("./tools/resolve404.js");
-const resolveImportFactory = require("./tools/resolveImport.js");
-const { doIntercept } = require("./intercept.js");
-
-// 开发服务器
-module.exports = function (config) {
-    let startTime = new Date().valueOf();
-
-    const port = config.devServer.port; // 端口号
-    const basePath = (/^\./.test(config.devServer.baseUrl)) ? join(process.cwd(), config.devServer.baseUrl) : config.devServer.baseUrl; // 服务器根路径
-
-    const name = (config.name || "OIPage") + "-http-server";
-    const version = config.version || packageValue.version;
-
-    let Server = createServer(function (request, response) {
-        let headers = request.headers;
-        let url = decodeURIComponent(request.url);
-
-        let urlArray = url.split("?");
-        url = urlArray[0];
-
-        // 请求的文件路径
-        let filePath = join(basePath, url == "/" ? "index.html" : url.replace(/^\//, ""));
-
-        // 请求拦截
-        if (doIntercept(url.replace(/^\/@modules\//, ""), config.devServer.intercept, request, response)) {
-            console.log("<i> \x1b[1m\x1b[32m[" + name + "] intercept: " + url + '\x1b[0m ' + new Date().toLocaleString());
-        }
-
-        // 如果存在且是文件
-        else if (existsSync(filePath) && !lstatSync(filePath).isDirectory()) {
-
-            let dotName = /\./.test(filePath) ? filePath.match(/\.([^.]+)$/)[1] : "";
-            let fileType = mineTypes[dotName]; // 文件类型
-            let fileInfo = statSync(filePath);
-
-            let fileModifiedTime = new Date(fileInfo.mtime).toGMTString();
-
-            let responseHeader = {
-                'Content-type': (fileType || "text/plain") + ";charset=utf-8",
-                'Access-Control-Allow-Origin': '*',
-                'Server': 'Powered by ' + name + '@' + version,
-                'Cache-Control': 'no-cache',
-                'Last-Modified': fileModifiedTime
-            };
-
-            if (headers["if-modified-since"]) {
-                let ifModifiedSince = new Date(headers["if-modified-since"]).valueOf()
-                let lastModified = new Date(fileModifiedTime).valueOf()
-                if (lastModified <= ifModifiedSince) {
-                    response.writeHead('304', responseHeader);
-                    response.end();
-                    console.log("<i> \x1b[1m\x1b[32m[" + name + "] Cache File: " + url + "\x1b[0m " + new Date().toLocaleString() + "\x1b[33m\x1b[1m 304\x1b[0m");
-                    return;
-                }
-            }
-
-            let sendType = "";
-            let entry = headers.accept !== "*/*";
-
-            // 如果文件小于10M，认为不大，直接读取
-            if (fileInfo.size < 10 * 1024 * 1024) {
-                let { source, resolveImport } = resolveImportFactory(basePath, filePath, entry, config.devServer.intercept, urlArray[1] === "download")
-
-                // 只处理非下载文件
-                // 过大的也不进行处理
-                if (urlArray[1] !== "download") {
-                    for (let i = 0; i < config.module.rules.length; i++) {
-                        if (config.module.rules[i].test.test(filePath)) {
-                            source = config.module.rules[i].use.call({
-                                root: basePath, // 服务器根路径
-                                path: filePath.replace(basePath, ""), // 文件相对路径
-                                entry, // 是否是浏览器地址栏直接访问
-                                setFileType(_fileType) { // 设置文件类型
-                                    fileType = _fileType;
-                                    responseHeader['Content-type'] = _fileType + ";charset=utf-8";
-                                }
-                            }, source);
-                            break;
-                        }
-                    }
-                }
-
-                sendType = "Read";
-                response.writeHead('200', responseHeader);
-                response.write(resolveImport(source, fileType !== "application/javascript"));
-                response.end();
-            }
-
-            // 对于大文件，使用流读取
-            else {
-                sendType = "Stream";
-                responseHeader["Content-Length"] = fileInfo.size;
-                response.writeHead('200', responseHeader);
-                createReadStream(filePath).pipe(response);
-            }
-
-            console.log("<i> \x1b[1m\x1b[32m[" + name + "] " + sendType + " File: " + url + '\x1b[0m ' + new Date().toLocaleString());
-        }
-
-        // 否则就是404
-        else {
-            response.writeHead(404, {
-                'Content-type': "text/html;charset=utf-8",
-                'Access-Control-Allow-Origin': '*',
-                'Server': 'Powered by ' + name + '@' + version
-            });
-            response.write(resolve404(filePath, url));
-            response.end();
-        }
-
-    });
-
-    Server.listen(port);
-
-    // 获取网络信息
-    let networkValue = network();
-
-    // 打印成功提示
-    console.log('<i> \x1b[1m\x1b[32m[' + name + '] Project is running at:\x1b[0m');
-    console.log('<i> \x1b[1m\x1b[32m[' + name + '] Loopback: \x1b[36mhttp://localhost:' + port + '/\x1b[0m');
-    for (let ipv4Item of networkValue.IPv4) console.log('<i> \x1b[1m\x1b[32m[' + name + '] On Your Network (IPv4):\x1b[36m http://' + ipv4Item.address + ':' + port + '/\x1b[0m');
-    for (let ipv6Item of networkValue.IPv6) console.log('<i> \x1b[1m\x1b[32m[' + name + '] On Your Network (IPv6): \x1b[36mhttp://[' + ipv6Item.address + ']:' + port + '/\x1b[0m');
-    console.log('<i> \x1b[1m\x1b[32m[' + name + '] Content not from ' + (config.name || "OIPage") + ' is served from \x1b[36m"' + basePath + '" \x1b[0mdirectory');
-    console.log('\n' + (config.name || "OIPage") + ' ' + version + ' compiled \x1b[1m\x1b[32msuccessfully\x1b[0m in ' + (new Date().valueOf() - startTime) + ' ms\n')
+const { join } = require("path");
+const { existsSync, lstatSync, statSync, createReadStream } = require("fs");
+const { createServer } = require('http');
+const packageValue = require("../package.json");
+const network = require("./tools/network.js");
+const mineTypes = require("./data/mineTypes.json");
+const resolve404 = require("./tools/resolve404.js");
+const resolveImportFactory = require("./tools/resolveImport.js");
+const { doIntercept } = require("./intercept.js");
+
+const webisteIntercept = require("./website-plugins/intercept/index.js");
+const webisteLoader = require("./website-plugins/loader/index.js");
+
+// 开发服务器
+module.exports = function (config) {
+    let startTime = new Date().valueOf();
+
+    const cache = "cache" in config.devServer ? config.devServer.cache : true;
+    const port = config.devServer.port; // 端口号
+    const basePath = (/^\./.test(config.devServer.baseUrl)) ? join(process.cwd(), config.devServer.baseUrl) : config.devServer.baseUrl; // 服务器根路径
+
+    const name = (config.name || "OIPage") + "-http-server";
+    const version = config.version || packageValue.version;
+
+    let Server = createServer(function (request, response) {
+        let headers = request.headers;
+        let url = decodeURIComponent(request.url);
+
+        let urlArray = url.split("?");
+        url = urlArray[0];
+
+        // 请求的文件路径
+        let filePath;
+
+        let isWebsite = /^\/_oipage_website_\//.test(url);
+        if (isWebsite) {
+            filePath = join(__dirname, "./website-htmls/", url.replace(/^\/_oipage_website_\//, ""));
+        } else {
+            filePath = join(basePath, url == "/" ? "index.html" : url.replace(/^\//, ""));
+        }
+
+        // 请求拦截
+        if (doIntercept(url.replace(/^\/_oipage_website_/, "").replace(/^\/@modules\//, ""), isWebsite ? webisteIntercept : config.devServer.intercept, request, response)) {
+            console.log("<i> \x1b[1m\x1b[32m[" + name + "] intercept: " + url + '\x1b[0m ' + new Date().toLocaleString());
+        }
+
+        // 如果存在且是文件
+        else if (existsSync(filePath) && !lstatSync(filePath).isDirectory()) {
+
+            let dotName = /\./.test(filePath) ? filePath.match(/\.([^.]+)$/)[1] : "";
+            let fileType = mineTypes[dotName]; // 文件类型
+            let fileInfo = statSync(filePath);
+
+            let fileModifiedTime = new Date(fileInfo.mtime).toGMTString();
+
+            let responseHeader = {
+                'Content-type': (fileType || "text/plain") + ";charset=utf-8",
+                'Access-Control-Allow-Origin': '*',
+                'Server': 'Powered by ' + name + '@' + version,
+                'Cache-Control': 'no-cache',
+                // 'Content-Length': fileInfo.size, // 会导致拦截修改的文本内容不对
+                'Last-Modified': fileModifiedTime
+            };
+
+            if (cache && headers["if-modified-since"]) {
+                let ifModifiedSince = new Date(headers["if-modified-since"]).valueOf()
+                let lastModified = new Date(fileModifiedTime).valueOf()
+                if (lastModified <= ifModifiedSince) {
+                    response.writeHead('304', responseHeader);
+                    response.end();
+                    console.log("<i> \x1b[1m\x1b[32m[" + name + "] Cache File: " + url + "\x1b[0m " + new Date().toLocaleString() + "\x1b[33m\x1b[1m 304\x1b[0m");
+                    return;
+                }
+            }
+
+            let sendType = "";
+            let entry = headers.accept !== "*/*";
+
+            // 如果文件小于10M，认为不大，直接读取
+            if (fileInfo.size < 10 * 1024 * 1024) {
+                let { source, resolveImport } = resolveImportFactory(basePath, filePath, entry, isWebsite ? webisteIntercept : config.devServer.intercept, urlArray[1] === "download", isWebsite)
+
+                // 只处理非下载文件
+                // 过大的也不进行处理
+                // （对webiste无效）
+                if (urlArray[1] !== "download") {
+                    let loaders = isWebsite ? webisteLoader : config.module;
+
+                    for (let i = 0; i < loaders.rules.length; i++) {
+                        if (loaders.rules[i].test.test(filePath)) {
+                            source = loaders.rules[i].use.call({
+                                root: basePath, // 服务器根路径
+                                path: filePath.replace(basePath, ""), // 文件相对路径
+                                entry, // 是否是浏览器地址栏直接访问
+                                setFileType(_fileType) { // 设置文件类型
+                                    fileType = _fileType;
+                                    responseHeader['Content-type'] = _fileType + ";charset=utf-8";
+                                }
+                            }, source);
+                            break;
+                        }
+                    }
+
+                }
+
+                sendType = "Read";
+                response.writeHead('200', responseHeader);
+                response.write(resolveImport(source, fileType !== "application/javascript"));
+                response.end();
+            }
+
+            // 对于大文件，使用流读取
+            else {
+                sendType = "Stream";
+                response.writeHead('200', responseHeader);
+                createReadStream(filePath).pipe(response);
+            }
+
+            console.log("<i> \x1b[1m\x1b[32m[" + name + "] " + sendType + " File: " + url + '\x1b[0m ' + new Date().toLocaleString());
+        }
+
+        // 否则就是404
+        else {
+            response.writeHead(404, {
+                'Content-type': "text/html;charset=utf-8",
+                'Access-Control-Allow-Origin': '*',
+                'Server': 'Powered by ' + name + '@' + version
+            });
+            response.write(resolve404(filePath, url));
+            response.end();
+        }
+
+    });
+
+    Server.listen(port);
+
+    // 获取网络信息
+    let networkValue = network();
+
+    // 打印成功提示
+    console.log('<i> \x1b[1m\x1b[32m[' + name + '] Project is running at:\x1b[0m');
+    console.log('<i> \x1b[1m\x1b[32m[' + name + '] Loopback: \x1b[36mhttp://localhost:' + port + '/\x1b[0m');
+    for (let ipv4Item of networkValue.IPv4) console.log('<i> \x1b[1m\x1b[32m[' + name + '] On Your Network (IPv4):\x1b[36m http://' + ipv4Item.address + ':' + port + '/\x1b[0m');
+    for (let ipv6Item of networkValue.IPv6) console.log('<i> \x1b[1m\x1b[32m[' + name + '] On Your Network (IPv6): \x1b[36mhttp://[' + ipv6Item.address + ']:' + port + '/\x1b[0m');
+    console.log('<i> \x1b[1m\x1b[32m[' + name + '] Content not from ' + (config.name || "OIPage") + ' is served from \x1b[36m"' + basePath + '" \x1b[0mdirectory');
+    if (!cache) console.log('<i> \x1b[1m\x1b[32m[' + name + '] Cancel 304 Cache!\x1b[0m');
+    console.log('\n' + (config.name || "OIPage") + ' ' + version + ' compiled \x1b[1m\x1b[32msuccessfully\x1b[0m in ' + (new Date().valueOf() - startTime) + ' ms\n')
 };

package/bin/template/404.html

@@ -1,172 +1,184 @@
-<!DOCTYPE html>
-<html lang="zh-cn">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>404 Not Found</title>
-    <style>
-        body {
-            margin: 0px;
-            background-color: #ffffff;
-            display: flex;
-            flex-wrap: wrap;
-            padding: 100px;
-        }
-
-        a {
-            text-decoration: none;
-            color: #284259;
-        }
-
-        a:hover {
-            text-decoration: underline;
-        }
-
-        .fork {
-            width: 160px;
-            line-height: 30px;
-            position: fixed;
-            background-color: #607D8B;
-            text-align: center;
-            color: white;
-            outline: 2px dashed #607D8B;
-            width: 200px;
-            transform: rotate(45deg);
-            right: -45px;
-            top: 45px;
-            z-index: 1;
-        }
-
-        .current {
-            box-sizing: border-box;
-            position: fixed;
-            left: 0;
-            top: 0;
-            line-height: 50px;
-            padding-left: 20px;
-            font-size: 14px;
-            color: #000000;
-            font-style: italic;
-        }
-
-        .filelist {
-            box-sizing: border-box;
-            position: fixed;
-            left: 20px;
-            top: 50px;
-            outline: 1px solid #9E9E9E;
-            width: calc(100vw - 40px);
-            height: calc(100vh - 70px);
-            overflow: auto;
-            padding: 20px;
-            border-radius: 5px;
-            background-color: #fcfcfc;
-        }
-
-        .filelist>table {
-            width: 100%;
-            text-align: left;
-        }
-
-        .filelist>table tr>th {
-            white-space: nowrap;
-            padding: 0 10px;
-        }
-
-        .filelist>table>thead>tr>th {
-            color: #284259;
-            font-size: 13px;
-            line-height: 40px;
-        }
-
-        .filelist>table>tbody>tr {
-            border: 1px solid #cdcdcd00;
-        }
-
-        .filelist>table>tbody>tr>th {
-            text-decoration: none;
-            font-size: 12px;
-            color: #3c3c3c;
-            word-break: break-all;
-            font-weight: 400;
-            line-height: 30px;
-        }
-
-        .filelist>table>tbody>tr>th>.btn {
-            color: white;
-            background-color: #2196F3;
-            padding: 2px 5px;
-            border-radius: 5px;
-        }
-
-        .filelist>table>tbody>tr>th.name {
-            background-repeat: no-repeat;
-            background-position: left center;
-            background-size: auto 90%;
-            padding-left: 30px;
-            color: #000000;
-        }
-
-        .filelist>table>tbody>tr>th.name>span {
-            white-space: nowrap;
-        }
-
-        .filelist>table>tbody>tr.file>th.name {
-            background-image: url('${img_file}');
-        }
-
-        .filelist>table>tbody>tr.folder>th.name {
-            background-image: url('${img_folder}');
-        }
-    </style>
-</head>
-
-<body>
-    <a href="https://github.com/oi-contrib/OIPage" target="_blank" class="fork">
-        Fork me on Github
-    </a>
-    <div class="current">
-        当前位置：${current}
-    </div>
-    <div class="filelist">
-        <table>
-            <thead>
-                <tr>
-                    <th>
-                        名称
-                    </th>
-                    <th>
-                        修改日期
-                    </th>
-                    <th>
-                        类型
-                    </th>
-                    <th>
-                        大小
-                    </th>
-                    <th>
-                        操作
-                    </th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr class="folder">
-                    <th class="name"><a href='../'>..</a></th>
-                    <th>-</th>
-                    <th>
-                        文件夹
-                    </th>
-                    <th>-</th>
-                    <th>
-                        <a href='../' class="btn">打开</a>
-                    </th>
-                </tr>
-                ${template}
-            </tbody>
-        </table>
-    </div>
-</body>
-
+<!DOCTYPE html>
+<html lang="zh-cn">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>404 Not Found</title>
+    <link rel="shortcut icon" href="/_oipage_website_/logo.png">
+    <style>
+        body {
+            margin: 0px;
+            background-color: #ffffff;
+            display: flex;
+            flex-wrap: wrap;
+            padding: 100px;
+        }
+
+        a {
+            text-decoration: none;
+            color: #284259;
+        }
+
+        a:hover {
+            text-decoration: underline;
+        }
+
+        .fork {
+            width: 160px;
+            line-height: 30px;
+            position: fixed;
+            background-color: #607D8B;
+            text-align: center;
+            color: white;
+            outline: 2px dashed #607D8B;
+            width: 200px;
+            transform: rotate(45deg);
+            right: -45px;
+            top: 45px;
+            z-index: 1;
+        }
+
+        .current {
+            box-sizing: border-box;
+            position: fixed;
+            left: 0;
+            top: 0;
+            line-height: 50px;
+            padding-left: 20px;
+            font-size: 14px;
+            color: #000000;
+            font-style: italic;
+        }
+
+        .filelist {
+            box-sizing: border-box;
+            position: fixed;
+            left: 20px;
+            top: 50px;
+            outline: 1px solid #9E9E9E;
+            width: calc(100vw - 40px);
+            height: calc(100vh - 100px);
+            overflow: auto;
+            padding: 20px;
+            border-radius: 5px;
+            background-color: #fcfcfc;
+        }
+
+        .filelist>table {
+            width: 100%;
+            text-align: left;
+            border-collapse: collapse;
+        }
+
+        .filelist>table tr>th {
+            white-space: nowrap;
+            padding: 0 10px;
+        }
+
+        .filelist>table>thead>tr>th {
+            color: #284259;
+            font-size: 13px;
+            line-height: 40px;
+        }
+
+        .filelist>table>tbody>tr>th {
+            text-decoration: none;
+            font-size: 12px;
+            color: #3c3c3c;
+            word-break: break-all;
+            font-weight: 400;
+            line-height: 30px;
+            border-top: 1px solid #e4e4e4;
+        }
+
+        .filelist>table>tbody>tr>th>.btn {
+            color: white;
+            background-color: #2196F3;
+            padding: 2px 5px;
+            border-radius: 5px;
+        }
+
+        .filelist>table>tbody>tr>th.name {
+            background-repeat: no-repeat;
+            background-position: left center;
+            background-size: auto 90%;
+            padding-left: 30px;
+            color: #000000;
+        }
+
+        .filelist>table>tbody>tr>th.name>span {
+            white-space: nowrap;
+        }
+
+        .filelist>table>tbody>tr.file>th.name {
+            background-image: url('${img_file}');
+        }
+
+        .filelist>table>tbody>tr.folder>th.name {
+            background-image: url('${img_folder}');
+        }
+
+        .website-link {
+            position: fixed;
+            bottom: 10px;
+            line-height: 30px;
+            left: 16px;
+            font-size: 14px;
+            text-decoration: underline;
+            font-weight: 800;
+        }
+    </style>
+</head>
+
+<body>
+    <a href="https://github.com/oi-contrib/OIPage" target="_blank" class="fork">
+        Fork me on Github
+    </a>
+    <div class="current">
+        当前位置：${current}
+    </div>
+    <div class="filelist">
+        <table>
+            <thead>
+                <tr>
+                    <th>
+                        名称
+                    </th>
+                    <th>
+                        修改日期
+                    </th>
+                    <th>
+                        类型
+                    </th>
+                    <th>
+                        大小
+                    </th>
+                    <th>
+                        操作
+                    </th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr class="folder">
+                    <th class="name"><a href='../'>..</a></th>
+                    <th>-</th>
+                    <th>
+                        文件夹
+                    </th>
+                    <th>-</th>
+                    <th>
+                        <a href='../' class="btn">打开</a>
+                    </th>
+                </tr>
+                ${template}
+            </tbody>
+        </table>
+    </div>
+    <a class="website-link" href="/_oipage_website_/index.html">
+        打开应用市场
+    </a>
+</body>
+
 </html>