init: init

Author: anncwb

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+.DS_Store
+dist
+es

CHANGELOG.md

@@ -0,0 +1,4 @@
+# 1.0.0-beta.1 (2020-10-27)
+
+
+

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020-present, Vben
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,217 @@
+# vite-plugin-mock
+
+Provide local and prod mocks for vite.
+
+A mock plugin for vite, developed based on mockjs. And support the local environment and production environment at the same time. Koa service middleware is used locally, mockjs is used online
+
+## Getting Started
+
+### Install (yarn or npm)
+
+**node version:** >=12.0.0
+
+`yarn add mockjs` or `yarn add mockjs -S`
+
+and
+
+`yarn add vite-plugin-mock -D` or `npm i vite-plugin-mock -D`
+
+**Run Example**
+
+```bash
+
+# ts example
+cd ./examples/ts-examples
+
+yarn install
+
+yarn serve
+
+# js example
+
+cd ./examples/js-examples
+
+yarn install
+
+yarn serve
+```
+
+## Usage
+
+**Development environment**
+
+The development environment is implemented using koa middleware。
+
+Different from the production environment, you can view the network request record in the Google Chrome console
+
+- Config plugin in vite.config.ts
+
+```ts
+import { createMockServer } from 'vite-plugin-mock';
+
+export default {
+  plugins: [
+    createMockServer({
+      ignore: /^\_/,
+      mockPath: 'mock',
+      watchFiles: true,
+      localEnabled: process.env.NODE_ENV === 'development',
+    }),
+  ],
+};
+```
+
+- createMockServer Options
+
+```ts
+{
+    mockPath?: string;
+    supportTs?: boolean;
+    ignore?: RegExp | ((fileName: string) => boolean);
+    watchFiles?: boolean;
+    localEnabled?: boolean;
+    ignoreFiles?: string[];
+    configPath?: string;
+}
+```
+
+## Option description
+
+### mockPath
+
+**default:** true
+
+Set the folder where the mock .ts file is stored
+
+If `watchFiles:true`, the file changes in the folder will be monitored. And synchronize to the request result in real time
+
+If configPath has a value, it is invalid
+
+### supportTs
+
+**default:** true
+
+After opening, the ts file module can be read. Note that you will not be able to monitor .js files after opening.
+
+### ignore
+
+**default:** undefined
+
+Ignore files in the specified format when automatically reading mock .ts files
+
+### watchFiles
+
+**default:** true
+
+Set whether to monitor changes in mock .ts files
+
+### localEnabled
+
+**default:** process.env.NODE_ENV==='developments'
+
+Set whether to enable the local mock .ts file, do not open it in the production environment
+
+### configPath
+
+**default:** vite.mock.config.ts
+
+Set the data entry that the mock reads. When the file exists and is located in the project root directory, the file will be read and used first. The configuration file returns an array
+
+### ignoreFiles
+
+**default:** []
+
+The project uses glob to read the folder set by mockPath. This parameter is used as the parameter of the glob module
+
+## Mock file example
+
+`/path/mock`
+
+```ts
+// test.ts
+
+import { MockMethod } from 'vite-plugin-mock';
+export default [
+  {
+    url: '/api/get',
+    method: 'get',
+    response: ({ query }) => {
+      return {
+        code: 0,
+        data: {
+        	name: 'vben'
+        }
+      };
+    },
+  },
+   {
+    url: '/api/post',
+    method: 'post',
+    timeout:2000,
+    response: {
+      	code: 0,
+       data: {
+        	name: 'vben'
+        }
+      };
+  },
+] as MockMethod[];
+
+
+```
+
+### MockMethod
+
+```ts
+{
+  // request url
+  url: string;
+  // request method
+  method?: MethodType;
+  // Request time in milliseconds
+  timeout?: number;
+  // response data
+  response: ((opt: { [key: string]: string; body: any; query: any }) => any) | any;
+}
+
+```
+
+## Usage in Production environment
+
+### Example
+
+Create a new mockProdServer.ts file
+
+```ts
+//  mockProdServer.ts
+
+import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer';
+
+// Import your mock .ts files one by one
+// If you use vite.mock.config.ts, just import the file directly
+import testModule from '../mock/test';
+
+export function setupProdMockServer() {
+  createProdMockServer([...testModule]);
+}
+```
+
+In mian.ts
+
+```ts
+// src/main.ts
+
+import { setupProdMockServer } from './mockProdServer';
+
+if (process.env.NODE_ENV === 'production') {
+  setupProdMockServer();
+}
+```
+
+## Note
+
+The node module cannot be used in the mock .ts file, otherwise the production environment will fail
+
+## License
+
+MIT

package.json

@@ -0,0 +1,47 @@
+{
+  "name": "vite-plugin-html",
+  "version": "1.0.0-beta.1",
+  "description": "A simple vite plugin. It is developed based on lodash template",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "rimraf dist && rimraf es && tsc -w --p tsconfig.json ",
+    "build": "rimraf dist && rimraf es && tsc -p tsconfig.json",
+    "prepublishOnly": "yarn build",
+    "log": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
+  },
+  "keywords": [
+    "vite",
+    "html",
+    "hmr"
+  ],
+  "author": "Vben",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/anncwb/vite-plugin-html"
+  },
+  "bugs": {
+    "url": "https://github.com/anncwb/vite-plugin-html/issues"
+  },
+  "homepage": "https://github.com/anncwb/vite-plugin-html/tree/master/#readme",
+  "dependencies": {
+    "html-minifier-terser": "^5.1.1",
+    "lodash": "^4.17.20"
+  },
+  "peerDependencies": {
+    "vite": ">=1.0.0-rc.8"
+  },
+  "devDependencies": {
+    "@types/html-minifier-terser": "^5.1.1",
+    "@types/lodash": "^4.14.162",
+    "@types/node": "^14.0.3",
+    "conventional-changelog-cli": "^2.1.0",
+    "prettier": "^2.1.2",
+    "rimraf": "^3.0.2",
+    "typescript": "^4.0.3",
+    "vite": "^1.0.0-rc.8"
+  }
+}

prettier.config.js

@@ -0,0 +1,28 @@
+module.exports = {
+  printWidth: 100,
+  tabWidth: 2,
+  useTabs: false,
+  semi: true,
+  vueIndentScriptAndStyle: true,
+  singleQuote: true,
+  quoteProps: 'as-needed',
+  bracketSpacing: true,
+  trailingComma: 'es5',
+  jsxBracketSameLine: false,
+  jsxSingleQuote: false,
+  arrowParens: 'always',
+  insertPragma: false,
+  requirePragma: false,
+  proseWrap: 'never',
+  htmlWhitespaceSensitivity: 'strict',
+  endOfLine: 'lf',
+  rangeStart: 0,
+  overrides: [
+    {
+      files: '*.md',
+      options: {
+        tabWidth: 2,
+      },
+    },
+  ],
+};

src/index.ts

@@ -0,0 +1,60 @@
+import { Plugin } from 'vite';
+import { VitePluginHtml } from './types';
+import { template, isBoolean } from 'lodash';
+import { injectTitle } from './utils';
+import { minify as HtmlMinify, Options } from 'html-minifier-terser';
+
+const defaultMinifyOptions: Options = {
+  minifyCSS: true,
+  minifyJS: true,
+  minifyURLs: true,
+  removeAttributeQuotes: true,
+  trimCustomFragments: true,
+  collapseWhitespace: true,
+};
+
+export default (opt: VitePluginHtml = {}): Plugin => {
+  return {
+    indexHtmlTransforms: [
+      {
+        apply: 'pre',
+        transform: ({ code }) => {
+          const { options = {} } = opt;
+          try {
+            const compiled = template(code);
+            return compiled({
+              viteHtmlPluginOptions: options,
+            });
+          } catch (error) {
+            console.warn('[vite-plugin-html:pre]:Template Compiled Faild\n' + error);
+            return code;
+          }
+        },
+      },
+      {
+        apply: 'post',
+        transform: ({ code }) => {
+          const { title = '', minify } = opt;
+          try {
+            let processCode = injectTitle(code, title);
+            if (!minify) {
+              return processCode;
+            }
+            if (isBoolean(minify)) {
+              return HtmlMinify(processCode, defaultMinifyOptions);
+            }
+            return HtmlMinify(processCode, {
+              ...defaultMinifyOptions,
+              ...minify,
+            });
+          } catch (error) {
+            console.warn('[vite-plugin-html:post]:Template Compiled Faild\n' + error);
+            return code;
+          }
+        },
+      },
+    ],
+  };
+};
+
+export * from './types';

src/types.ts

@@ -0,0 +1,9 @@
+import { Options } from 'html-minifier-terser';
+
+export interface VitePluginHtml {
+  title?: string;
+  minify?: boolean | Options;
+  options?: {
+    [key: string]: any;
+  };
+}