oipage 1.1.0 → 1.2.0-alpha.1

package/CHANGELOG

@@ -32,4 +32,14 @@ v1.1.0:
           * logform 表单输入
         2、命令（oipage-cli）
           * dist 磁盘操作
-          * run 运行多命令
+          * run 运行多命令
+v1.2.0:
+    date:
+    changes:
+      - 优化改造
+        1、优化npm包目录结构等
+      - 新增功能
+        1、开发服务器
+          * 添加配置文件
+            （oipage-cli serve --config ./oipage.config.js）
+          * 新增对node_modules包引入支持

package/bin/help.js

@@ -9,6 +9,7 @@ OIPage@v${packageValue.version}
 【1】oipage-cli serve 开发服务器
     --port|-p 端口号
     --baseUrl 服务器根目录
+    --config|-c 设置配置文件
 
 【2】oipage-cli disk 磁盘操作
     --force|-f 强制执行

package/bin/run

@@ -5,19 +5,43 @@
 process.title = 'OIPage';
 
 const { exec } = require('child_process');
-const { formatArgv } = require("./format");
+const { join } = require("path");
+const { existsSync, lstatSync } = require("fs");
+const { mergeOption } = require("vislite");
+const { formatArgv } = require("./tools/format.js");
 
 // 开发服务器
 if (process.argv[2] === "serve") {
 
     let argvObj = formatArgv(process.argv, {
-        "-p": "--port"
+        "-p": "--port",
+        "-c": "--config"
     });
 
-    require("./serve")({
-        port: (argvObj["--port"] || [])[0] || 8080,
-        baseUrl: (argvObj["--baseUrl"] || [])[0] || "./",
-    });
+    let config = {
+        devServer: {
+            port: 8080,
+            baseUrl: "./",
+        },
+        bundle: []
+    };
+
+    // 如果设置了配置文件
+    if (argvObj["--config"]) {
+        let configPath = join(process.cwd(), argvObj["--config"][0] || "./oipage.config.js");
+        if (existsSync(configPath) && !lstatSync(configPath).isDirectory()) {
+            let configValue = require(configPath);
+            mergeOption(config, configValue);
+        } else {
+            console.log("\x1b[0m\x1b[31m" + configPath + "\x1b[0m");
+            throw new Error("OIPage: The configuration file does not exist or is not a file.");
+        }
+    }
+
+    if ((argvObj["--port"] || [])[0]) config.devServer.port = (argvObj["--port"] || [])[0];
+    if ((argvObj["--baseUrl"] || [])[0]) config.devServer.baseUrl = (argvObj["--baseUrl"] || [])[0];
+
+    require("./serve.js")(config);
 }
 
 // 磁盘操作
@@ -30,7 +54,7 @@ else if (process.argv[2] === "disk") {
         "-c": "--copy"
     }, true);
 
-    require("./disk")(argvObj);
+    require("./disk.js")(argvObj);
 }
 
 // 运行多命令
@@ -66,5 +90,5 @@ else if (process.argv[2] === "run") {
 
 // 默认，帮助
 else {
-    require("./help")();
+    require("./help.js")();
 }

package/bin/serve.js

@@ -1,22 +1,26 @@
 const { join } = require("path");
-const { existsSync, lstatSync, readFileSync, statSync, createReadStream } = require("fs");
+const { existsSync, lstatSync, statSync, createReadStream } = require("fs");
 const { createServer } = require('http');
 const packageValue = require("../package.json");
-const network = require("./network");
-const mineTypes = require("./mineTypes.json");
-const resolve404 = require("./resolve404.js");
+const network = require("./tools/network.js");
+const mineTypes = require("./data/mineTypes.json");
+const resolve404 = require("./tools/resolve404.js");
+const resolveImport = require("./tools/resolveImport.js");
+const { formatRawHeaders } = require("./tools/format.js");
 
 // 开发服务器
 module.exports = function (config) {
     let startTime = new Date().valueOf();
 
-    const port = config.port; // 端口号
-    const basePath = (/^\./.test(config.baseUrl)) ? join(process.cwd(), config.baseUrl) : config.baseUrl; // 服务器根路径
+    const port = config.devServer.port; // 端口号
+    const basePath = (/^\./.test(config.devServer.baseUrl)) ? join(process.cwd(), config.devServer.baseUrl) : config.devServer.baseUrl; // 服务器根路径
 
     let Server = createServer(function (request, response) {
-
+        let headers = formatRawHeaders(request.rawHeaders);
         let url = decodeURIComponent(request.url);
-        url = url.split("?")[0];
+
+        let urlArray = url.split("?");
+        url = urlArray[0];
 
         // 请求的文件路径
         let filePath = join(basePath, url == "/" ? "index.html" : url.replace(/^\//, ""));
@@ -28,25 +32,44 @@ module.exports = function (config) {
             let fileType = mineTypes[dotName]; // 文件类型
             let fileInfo = statSync(filePath);
 
-            response.writeHead('200', {
+            let responseHeader = {
                 'Content-type': (fileType || "text/plain") + ";charset=utf-8",
                 'Access-Control-Allow-Origin': '*',
-                'Content-Length': fileInfo.size,
                 'Server': 'Powered by OIPage-dev-server@' + packageValue.version
-            });
+            };
 
             let sendType = "";
 
             // 如果文件小于10M，认为不大，直接读取
             if (fileInfo.size < 10 * 1024 * 1024) {
+                let source = resolveImport(basePath, filePath, headers.Accept === "*/*", urlArray[1] === "download")
+
+                // 只处理非下载文件
+                // 过大的也不进行处理
+                if (urlArray[1] !== "download") {
+                    for (let i = 0; i < config.bundle.length; i++) {
+                        if (config.bundle[i].test.test(filePath)) {
+                            source = config.bundle[i].handler.call({
+                                root: basePath, // 服务器根路径
+                                path: filePath.replace(basePath, ""), // 文件相对路径
+                                entry: headers.Accept !== "*/*", // 是否是浏览器地址栏直接访问
+                            }, source);
+                            break;
+                        }
+                    }
+                }
+
                 sendType = "Read";
-                response.write(readFileSync(filePath));
+                response.writeHead('200', responseHeader);
+                response.write(source);
                 response.end();
             }
 
             // 对于大文件，使用流读取
             else {
                 sendType = "Stream";
+                responseHeader["Content-Length"] = fileInfo.size;
+                response.writeHead('200', responseHeader);
                 createReadStream(filePath).pipe(response);
             }
 

package/bin/{format.js → tools/format.js}

@@ -73,4 +73,17 @@ exports.formatArgv = function (argvs, shorts, isArray) {
     pushValue();
 
     return result;
+};
+
+/**
+ * 请求头解析
+ * @param {*} rawHeaders 
+ * @returns 
+ */
+exports.formatRawHeaders = function (rawHeaders) {
+    let headers = {};
+    for (let i = 0; i < rawHeaders.length - 1; i += 2) {
+        headers[rawHeaders[i]] = rawHeaders[i + 1];
+    }
+    return headers;
 };

package/bin/{resolve404.js → tools/resolve404.js}

@@ -1,7 +1,7 @@
 const { readdirSync, lstatSync, readFileSync, statSync } = require("fs");
 const { join } = require("path");
 const { formatByte, formatTime } = require("./format");
-const mineTypes = require("./mineTypes.json");
+const mineTypes = require("../data/mineTypes.json");
 
 const img_folder = "data:image/png;base64," + readFileSync(join(__dirname, "../images/folder.png")).toString('base64');
 const img_file = "data:image/png;base64," + readFileSync(join(__dirname, "../images/file.png")).toString('base64');
@@ -72,7 +72,7 @@ module.exports = function (filePath, url) {
         </th>
             <th>
                 <a href='./${subItems[i]}' class="btn">访问</a>
-                <a href='./${subItems[i]}' class="btn" download='${subItems[i]}'>下载</a>
+                <a href='./${subItems[i]}?download' class="btn" download='${subItems[i]}'>下载</a>
             </th>
         </tr>`;
         }

package/bin/tools/resolveImport.js

@@ -0,0 +1,66 @@
+const { readFileSync, existsSync, lstatSync } = require("fs");
+const { join } = require("path");
+
+module.exports = function (basePath, filePath, needResolve, isDownload) {
+    let code = readFileSync(filePath);
+
+    let resolveImport = function (content) {
+        return content.replace(/import [^'"]* from (['"])([^'"]*)['"]/sg, function (_importCode, _, _importUrl) {
+            if (/^[./]/.test(_importUrl)) {
+                return _importCode;
+            } else {
+                return _importCode.replace(_importUrl, _importUrl.replace(/([^/])+/s, function (npmName) {
+
+                    let node_modulesRootPath = join(filePath, "../");
+                    let prePath = "";
+                    while (true) {
+                        let npmBundlePath = join(node_modulesRootPath, "./node_modules/", npmName);
+
+                        // 如果存在
+                        if (existsSync(npmBundlePath) && lstatSync(npmBundlePath).isDirectory()) {
+                            let npmNameValue = npmName;
+
+                            // 对于类似 import VISLite from "vislite"
+                            // 需要把包名解析成具体的文件
+                            if (!/\//.test(_importUrl)) {
+                                let bundlePackage = require(join(npmBundlePath, "./package.json"));
+                                npmNameValue = npmName + "/" + bundlePackage.main;
+                            }
+
+                            return (prePath ? prePath : "./") + "node_modules/" + npmNameValue;
+                        }
+
+                        if (node_modulesRootPath === basePath) {
+                            return npmName;
+                        } else {
+                            node_modulesRootPath = join(node_modulesRootPath, "../");
+                            prePath = "../" + prePath;
+                        }
+                    }
+                }));
+            }
+        });
+    };
+
+    // 如果是下载
+    if (isDownload) {
+        return code;
+    }
+
+    // 如果需要解析
+    else if (needResolve) {
+        return resolveImport(code + "");
+    }
+
+    // 如果是.html或.htm结尾
+    else if (/\.html{0,1}$/.test(filePath)) {
+        return (code + "").replace(/<script type="module">(.*)<\/script>/sg, function (_, _matchCode) {
+            return `<script type="module">${resolveImport(_matchCode)}</script>`;
+        });
+    }
+
+    // 否则直接返回即可
+    else {
+        return code;
+    }
+};

package/nodejs/animation/index.js

@@ -1,5 +1,5 @@
 /*!
-* animation of OIPage v1.1.0
+* animation of OIPage v1.2.0-alpha.1
 * git+https://github.com/oi-contrib/OIPage.git
 */
 

package/nodejs/cmdlog/index.js

@@ -1,5 +1,5 @@
 /*!
-* cmdlog of OIPage v1.1.0
+* cmdlog of OIPage v1.2.0-alpha.1
 * git+https://github.com/oi-contrib/OIPage.git
 */
 

package/nodejs/disk/index.js

@@ -1,5 +1,5 @@
 /*!
-* disk of OIPage v1.1.0
+* disk of OIPage v1.2.0-alpha.1
 * git+https://github.com/oi-contrib/OIPage.git
 */
 

package/nodejs/logform/index.js

@@ -1,5 +1,5 @@
 /*!
-* logform of OIPage v1.1.0
+* logform of OIPage v1.2.0-alpha.1
 * git+https://github.com/oi-contrib/OIPage.git
 */
 const {linelog} = require("../cmdlog/index.js");

package/nodejs/throttle/index.js

@@ -1,5 +1,5 @@
 /*!
-* throttle of OIPage v1.1.0
+* throttle of OIPage v1.2.0-alpha.1
 * git+https://github.com/oi-contrib/OIPage.git
 */
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "oipage",
-  "version": "1.1.0",
+  "version": "1.2.0-alpha.1",
   "description": "前端网页或应用快速开发助手，包括开发服务器、辅助命令、实用API等",
   "sideEffects": false,
   "scripts": {
     "dev": "node ./build/index.js watch",
     "build": "node ./build/index.js",
-    "serve": "node ./bin/run serve -p 20000"
+    "serve": "node ./bin/run serve --config ./oipage.config.js"
   },
   "bin": {
     "oipage-cli": "bin/run"
@@ -34,7 +34,7 @@
     "url": "https://github.com/oi-contrib/OIPage/issues"
   },
   "homepage": "https://oi-contrib.github.io/OIPage",
-  "devDependencies": {
-    "oipage": "^0.2.0"
+  "dependencies": {
+    "vislite": "^1.3.0"
   }
-}
+}

package/web/animation/index.js

@@ -1,5 +1,5 @@
 /*!
-* animation of OIPage v1.1.0
+* animation of OIPage v1.2.0-alpha.1
 * git+https://github.com/oi-contrib/OIPage.git
 */
 

package/web/onReady/index.js

@@ -1,5 +1,5 @@
 /*!
-* onReady of OIPage v1.1.0
+* onReady of OIPage v1.2.0-alpha.1
 * git+https://github.com/oi-contrib/OIPage.git
 */
 

package/web/style/index.js

@@ -1,5 +1,5 @@
 /*!
-* style of OIPage v1.1.0
+* style of OIPage v1.2.0-alpha.1
 * git+https://github.com/oi-contrib/OIPage.git
 */
 

package/web/throttle/index.js

@@ -1,5 +1,5 @@
 /*!
-* throttle of OIPage v1.1.0
+* throttle of OIPage v1.2.0-alpha.1
 * git+https://github.com/oi-contrib/OIPage.git
 */