# kui-configs

**Repository Path**: Kinyx/kui-configs

## Basic Information

- **Project Name**: kui-configs
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-12-24
- **Last Updated**: 2025-01-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# dependencies

> `kui-configs`项目实现依赖以下包

```bash
npm install @babel/cli @babel/core @babel/preset-env @babel/preset-typescript babel-loader clean-css copy-webpack-plugin html-minifier ts-loader typescript webpack webpack-cli webpack-dev-server jsdom --save-dev
```

# using

## 一、`setup`

> 本项目下载完成后，直接运行`package.json`中配置的`scripts`中的`npmi`命令，即可在下载所有依赖项，并安装了当前项目的最新版。

## 二、`init`

> `setup`命令成功执行后，运行`package.json`中配置的`scripts`中的`init`命令。（需要先配置该命令的参数`name=项目名`）

> 将在`kui-configs`同级目录中创建指定名称的新项目，并初始化项目结构。

> 因为需要创建**符号链接**，因此需要**以管理员身份运行**如下命令。

```bash
cd ${'kui-configs'-project-dir}
node run.mjs cmd=init name=${project-name}
```

> 也可以手动创建新项目，并创建**符号链接**来使用本项目。

### `node_modules`

> 在其它项目的根目录中创建符号链接`node_modules`目录到`kui-configs`项目的`node_modules`目录。

```bash
mklink /D "${project-dir}\node_modules" "${'kui-configs'-project-dir}\node_modules"
```

## 三、`dev`

> 到已经创建好的项目目录中进行实际项目开发。

## 四、`run` & `pack`

> 一些项目需要的运行和打包命令都已经在`package.json`中配置。

> 命令全部封装在`run.mjs`脚本文件中。通过`node`命令执行该脚本文件。

> 命令执行需要处理项目信息，因此`node`命令需要编写到`npm`脚本中。

> 常用`npm`脚本配置如下。

```json
  "scripts": {
    "______tsc______": "node node_modules/kui-configs/run.mjs cmd=tsc                      include= exclude=",
    "______run______": "node node_modules/kui-configs/run.mjs cmd=run                      include= exclude=",
    "____webpack____": "node node_modules/kui-configs/run.mjs cmd=webpack                  include= exclude=       mode=production  babel=true",
    "____server_____": "node node_modules/kui-configs/run.mjs cmd=server                   include= exclude=       mode=development babel=false",
    "pack_package___": "node node_modules/kui-configs/run.mjs cmd=pack     type=package    include= exclude=test-*",
    "pack_webpackage": "node node_modules/kui-configs/run.mjs cmd=pack     type=webpackage include= exclude=test-* mode=production  babel=true",
    "pack_webnext___": "node node_modules/kui-configs/run.mjs cmd=pack     type=webnext    include= exclude=test-* mode=production",
    "__restoreBuild_": "node node_modules/kui-configs/run.mjs cmd=restoreBuild"
  }
```

### `scripts` 说明

> `______tsc______`: 对`ts`文件编译，并解析`ES6`模块化的`import`后缀。
> `______run______`: 将入口文件直接在`NodeJS`环境下运行。
> `____webpack____`: 浏览器环境代码。
> `____server_____`: 浏览器环境打开入口页面。
> `pack_package___`: 打包成用于其它项目依赖的工具类包。
> `pack_webpackage`: 打包成用于服务器部署的`web`包，模块化等被消除。
> `pack_webnext___`: 打包成用于服务器部署的`web`包，保留模块化等源码。
> `__restoreBuild_`: 还原上一次打包的提交状态。

> 命令中的`${args}`参数配置如下。

### `args.cmd`
`cmd`: <必填项> 执行命令类型
  + `cmd=npmi`: 【仅在当前项目中生效的命令，不提供给实际开发的项目使用。】，因项目对`npm install`逻辑做了修改，当在`package.json`中增加依赖项时，需要通过本命令间接执行`npm install`命令以保留已经通过本项目安装的项目包。
  + `cmd=init`: 初始化项目结构。
  + `cmd=tsc`: 执行`tsc`编译`ts`文件，`js`文件直接复制。仅编译，与`webpack`无关。非`web`包，且保留模块代码。模块导入代码的路径将被解析为最终`.js`文件。
  + `cmd=run`: `NodeJS`环境下运行`${projectDir}/src/js`目录中的脚本文件（非递归）。首先经过`tsc`编译，后增加模拟器环境代码，最终实际执行的脚本文件在`tmp`目录中。
  + `cmd=webpack`: 执行`webpack`打包项目。可以直接部署的`web`包，模块代码将被集成到入口文件中。
  + `cmd=server`: 启动`web服务器`，并在`浏览器`中打开`${projectDir}/src/html`目录中的页面文件（非递归）。模块代码将被集成到入口文件中。
  + `cmd=pack`: 打包项目。
  + `cmd=restoreBuild`: 还原上一次打包的提交状态。

### `args.others`
+ `clear`: 是否保留已安装的项目包。
    + `clear=true`: 不保留已安装的项目包。等同于直接直接`npm install`命令。【慎用】
    + `clear=false`: 保留已安装的项目包，并安装新增的其它依赖项。
+ `name`：指定项目名
+ `include`：指定需要**包含**的`${projectDir}/src/js`目录中的脚本文件（非递归）。使用[`,`]作为分隔符，支持通配符。已支持后缀名处理（省略后缀名，或支持的脚本文件后缀名。）。
+ `exclude`: 指定需要**排除**的`${projectDir}/src/js`目录中的脚本文件（非递归）。使用[`,`]作为分隔符，支持通配符。已支持后缀名处理（省略后缀名，或支持的脚本文件后缀名。）。
+ `mode`: 执行`webpack`命令的参数，同时也是控制打包结果文件状态的重要参数。
    + `mode=development`: 打包为开发环境使用。代码文件不压缩。`js`文件将使用调试代码。
    + `mode=production`: 打包为生产环境使用。`html`、`css`、`js`等代码文件都将进行压缩处理。
+ `babel`: 是否使用`babel`对脚本文件进行编译处理。
    + `babel=true`: `js`代码使用`babel-loader`进行代码降级处理。
    + `babel=false`: `js`代码使用源码。
+ `type`: 打包结果类型。
    + `package`: 非`web`包，工具类包，仅编译，保留模块代码，项目依赖用。内置执行的是`tsc`命令。
    + `webpackage`: `web`包，可直接用于部署到服务器上的结果。内置执行的是`webpack`命令。
    + `webnext`: `web`包，可直接用于部署到服务器上的结果（保留模块化功能，有浏览器兼容问题。）。非脚本文件内置执行的是`webpack`命令，脚本文件内置执行的是`tsc`命令。

### `args.cmd` & `args.others` 对照关系
+ `cmd=npmi`
  + `clear`
+ `cmd=init`
  + `name`
+ `cmd=tsc` | `cmd=run` | `cmd=pack type=package`
  + `include`
  + `exclude`
+ `cmd=webpack` | `cmd=server` | `cmd=pack type=webpackage` | `cmd=pack type=webnext`
  + `include`
  + `exclude`
  + `mode`
+ `cmd=webpack` | `cmd=server` | `cmd=pack type=webpackage`
  + `babel`
+ `cmd=pack`
  + `type`
+ `cmd=restoreBuild`

# update

> 需要升级时，修改项目中`package.json`中的`version`，运行`cmd=pack`命令即可。
> 因为使用的是符号链接`node_modules`，因此使用`cmd=pack`命令重新打包后，项目就已经使用的是最新的功能。

# instructions

## `ES6`的`import`路径问题

> 标准语法是需要写全路径名。

```javascript
import {} from './modules/module.js';
```

> 在`ts`中则可以省略后缀名。

```javascript
import {} from './modules/module';
```

> 本项目在各命令的处理中都做了统一实现的处理，都可以写全称，也可以省略后缀名，甚至是后缀名写错，都会进行修正，匹配正确的脚本文件后缀。

```javascript
import {} from './modules/module';
import {} from './modules/module.js';
import {} from './modules/module.ts';
```

# demo

> 使用示例参见项目 [kui-configs-demo](https://gitee.com/Kinyx/kui-configs-demo)