🔥 基本实现功能

.gitignore

@@ -0,0 +1,38 @@
+# compiled output
+/dist
+/node_modules
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# OS
+.DS_Store
+
+# Tests
+/coverage
+/.nyc_output
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+.cache
+dist
+asset

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all"
+}

README.md

@@ -0,0 +1,4 @@
+#
+## 问题
+
+使用 svelte https://github.com/DeMoorJasper/parcel-plugin-svelte 通过这个插件使用 parcel 然后报 new 的错 需要限制 编译的版本，在package.json browserslist 字段限制一下版本就好

nest-cli.json

@@ -0,0 +1,4 @@
+{
+  "collection": "@nestjs/schematics",
+  "sourceRoot": "src"
+}

package.json

@@ -0,0 +1,73 @@
+{
+  "name": "webfont",
+  "version": "0.0.1",
+  "description": "",
+  "author": "",
+  "license": "MIT",
+  "scripts": {
+    "prebuild": "rimraf dist",
+    "build": "nest build",
+    "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
+    "start:web": "parcel ./static/index.html",
+    "start": "nest start",
+    "start:dev": "nest start --watch",
+    "start:debug": "nest start --debug --watch",
+    "start:prod": "node dist/main",
+    "lint": "tslint -p tsconfig.json -c tslint.json",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:cov": "jest --coverage",
+    "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
+    "test:e2e": "jest --config ./test/jest-e2e.json"
+  },
+  "dependencies": {
+    "@babel/polyfill": "^7.8.7",
+    "@nestjs/common": "^6.7.2",
+    "@nestjs/core": "^6.7.2",
+    "@nestjs/platform-express": "^6.7.2",
+    "@nestjs/serve-static": "^2.1.0",
+    "font-spider": "^1.3.5",
+    "fontmin": "^0.9.8",
+    "parcel-bundler": "^1.12.4",
+    "reflect-metadata": "^0.1.13",
+    "rimraf": "^3.0.0",
+    "rxjs": "^6.5.3",
+    "svelte": "^3.20.1",
+    "tailwindcss": "^1.2.0"
+  },
+  "devDependencies": {
+    "@nestjs/cli": "^6.9.0",
+    "@nestjs/schematics": "^6.7.0",
+    "@nestjs/testing": "^6.7.1",
+    "@types/express": "^4.17.1",
+    "@types/jest": "^24.0.18",
+    "@types/node": "^12.7.5",
+    "@types/supertest": "^2.0.8",
+    "cssnano": "^4.1.10",
+    "jest": "^24.9.0",
+    "parcel-plugin-svelte": "^4.0.6",
+    "prettier": "^1.18.2",
+    "supertest": "^4.0.2",
+    "ts-jest": "^24.1.0",
+    "ts-loader": "^6.1.1",
+    "ts-node": "^8.4.1",
+    "tsconfig-paths": "^3.9.0",
+    "tslint": "^5.20.0",
+    "typescript": "^3.6.3"
+  },
+  "jest": {
+    "moduleFileExtensions": [
+      "js",
+      "json",
+      "ts"
+    ],
+    "rootDir": "src",
+    "testRegex": ".spec.ts$",
+    "transform": {
+      "^.+\\.(t|j)s$": "ts-jest"
+    },
+    "coverageDirectory": "../coverage",
+    "testEnvironment": "node"
+  },
+  "browserslist": "last 10 chrome versions"
+}

src/app.controller.spec.ts

@@ -0,0 +1,22 @@
+import { Test, TestingModule } from '@nestjs/testing';
+import { AppController } from './app.controller';
+import { AppService } from './app.service';
+
+describe('AppController', () => {
+  let appController: AppController;
+
+  beforeEach(async () => {
+    const app: TestingModule = await Test.createTestingModule({
+      controllers: [AppController],
+      providers: [AppService],
+    }).compile();
+
+    appController = app.get<AppController>(AppController);
+  });
+
+  describe('root', () => {
+    it('should return "Hello World!"', () => {
+      expect(appController.getHello()).toBe('Hello World!');
+    });
+  });
+});

src/app.controller.ts

@@ -0,0 +1,35 @@
+import {
+  Controller,
+  Get,
+  Param,
+  Query,
+  Response,
+  Res,
+  Req,
+  Request,
+} from '@nestjs/common';
+import { AppService } from './app.service';
+import { join } from 'path';
+import { promises as fs  } from "fs";
+@Controller()
+export class AppController {
+  constructor(private readonly appService: AppService) {}
+
+  // @Get()
+  // getHello(): string {
+  //   return this.appService.getHello();
+  // }
+
+  /** 压缩字体 */
+  @Get('fontmin')
+  font_min(@Query('text') text, @Query('font') font) {
+    return this.appService.font_min(text, font);
+  }
+  /** 返回字体列表 */
+  @Get('font_list')
+  font_list() {
+    const font_dir= join(__dirname, '../../src/font')
+    return fs.readdir(font_dir)
+  }
+
+}

src/app.module.ts

@@ -0,0 +1,21 @@
+import { Module } from '@nestjs/common';
+import { AppController } from './app.controller';
+import { AppService } from './app.service';
+import { ServeStaticModule } from '@nestjs/serve-static';
+import { join } from 'path';
+console.log( join(__dirname, '..'));
+
+@Module({
+  imports: [
+    ServeStaticModule.forRoot({
+      rootPath: join(__dirname, '..'),
+    }),
+    ServeStaticModule.forRoot({
+      rootPath:  join(__dirname, '../../asset'),
+      serveRoot: '/asset',
+    }),
+  ],
+  controllers: [AppController],
+  providers: [AppService],
+})
+export class AppModule {}

src/app.service.ts

@@ -0,0 +1,47 @@
+import { Injectable } from '@nestjs/common';
+import Fontmin from 'fontmin';
+
+@Injectable()
+export class AppService {
+  getHello(): string {
+    return 'Hello World!';
+  }
+
+  font_min(text:string,font:string) {
+    const srcPath = `./src/font/${font}.ttf`; // 字体源文件
+    const outPath = `asset/font/${Date.now()}/`;
+    const destPath = `./${outPath}`; // 输出路径
+    // 初始化
+    const fontmin = new Fontmin()
+      .src(srcPath) // 输入配置
+      .use(
+        Fontmin.glyph({
+          text, // 所需文字
+        }),
+      )
+      .use(Fontmin.ttf2eot()) // eot 转换插件
+      .use(Fontmin.ttf2woff()) // woff 转换插件
+      .use(Fontmin.ttf2svg()) // svg 转换插件
+      .use(Fontmin.css({ fontPath: `http://127.0.0.1:3000/${outPath}` })) // css 生成插件
+      .dest(destPath); // 输出配置
+
+    // 执行
+    return new Promise((resolve, reject) => {
+      fontmin.run(function(err, files, stream) {
+        if (err) {
+          // 异常捕捉
+          reject(err);
+        } else {
+          const css = files
+            .filter(f =>
+              (f.history[f.history.length - 1] as string).endsWith('.css'),
+            )
+            .map(f => f._contents.toString());
+          // resolve({code:0,fil:files.map(f=>f._contents.toString())}); // 成功
+          // resolve({code:0,files}); // 成功
+          resolve(css); // 成功
+        }
+      });
+    });
+  }
+}

src/main.ts

@@ -0,0 +1,13 @@
+import { NestFactory } from '@nestjs/core';
+import { AppModule } from './app.module';
+import serveStatic from 'serve-static';
+import { Response } from 'express';
+
+async function bootstrap() {
+  const app = await NestFactory.create(AppModule);
+
+
+  await app.listen(3000);
+}
+bootstrap();
+

static/App.svelte

@@ -0,0 +1,67 @@
+<script>
+  import { writable } from 'svelte/store';
+  import { get_font,get_font_list } from './req';
+  /** 可用的字体列表  {id:number,name:string:selected:undefined | boolen,css:undefined|string}*/
+  $: font_list =[  ]
+  get_font_list().then(r=>{
+    font_list=r.map(ttf=>({name:ttf.replace(/\.ttf$/,'')}))
+  })
+  /** 选择的文字 */
+  let text = '';
+  $: selected_font = font_list.filter(font => font.selected);
+  function generate_font() {
+    selected_font.forEach(font => {
+      get_font(font.name, text)
+        .then(r => {
+          const family = r.match(/font-family: "(.*)"/)[1]
+          font.css = r;
+          font.family=family
+          /** 因为要触发其他更新则必须对这个变量重新赋值 */
+          font_list=font_list
+        })
+        .catch(e => {
+          console.log(e);
+        });
+    });
+  }
+</script>
+
+<style>
+  .c-label {
+    @apply border m-1 rounded-md px-1 items-center h-6 text-sm;
+  }
+  .c-label-selected {
+    @apply bg-red-600 text-white;
+  }
+</style>
+
+<div class=" flex justify-evenly">
+  <textarea
+    bind:value={text}
+    class="border flex-1 m-1"
+    placeholder="在此输入需要提取的文字"
+    cols="40"
+    rows="3" />
+  <div class="flex-1 m-1 flex flex-wrap">
+    {#each font_list as font, i}
+      <div
+        on:click={e => (font.selected = !font.selected)}
+        class="c-label {font.selected ? 'c-label-selected' : ''}">
+        {font.name}
+      </div>
+    {/each}
+  </div>
+</div>
+
+<div on:click={generate_font}>生成字体</div>
+
+{#each selected_font as font, i}
+  <div class={font.name}>
+    <div style="font-family:{font.family};font-size:2rem">{text}</div>
+    <div style="font-size:.6rem;text-align: right;">{font.name}</div>
+  </div>
+{/each}
+
+{#each font_list as font, i}
+  {@html `<style>${font.css}</style>`}
+{/each}

static/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

static/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>web font</title>
+    <link rel="stylesheet" href="./index.css">
+</head>
+
+<body class="p-4">
+
+    <div class="c-app"></div>
+
+    <!-- This script tag points to the source of the JS file we want to load and bundle -->
+    <script src="index.js"></script>
+</body>
+
+</html>

static/index.js

@@ -0,0 +1,6 @@
+// import '@babel/polyfill';
+import App from './App.svelte';
+
+new App({
+  target: document.querySelector('.c-app'),
+});

static/postcss.config.js

@@ -0,0 +1,5 @@
+const tailwindcss = require("tailwindcss");
+
+module.exports = {
+  plugins: [tailwindcss],
+};

static/req.ts

@@ -0,0 +1,35 @@
+const server="http://127.0.0.1:3000"
+export function get_font(font:string, text:string) {
+  return new Promise((rs, re) => {
+    var xhr = new XMLHttpRequest();
+    xhr.addEventListener('readystatechange', function() {
+      if (this.readyState === 4) {
+        rs(JSON.parse(this.responseText)[0]);
+      }
+    });
+    xhr.open(
+      'GET',
+      `${server}/fontmin?font=${encodeURIComponent(
+        font,
+      )}&text=${encodeURIComponent(text)}`,
+    );
+    xhr.onerror=re
+    xhr.send();
+  })
+}
+export function get_font_list(font:string, text:string) {
+  return new Promise((rs, re) => {
+    var xhr = new XMLHttpRequest();
+    xhr.addEventListener('readystatechange', function() {
+      if (this.readyState === 4) {
+        rs(JSON.parse(this.responseText));
+      }
+    });
+    xhr.open(
+      'GET',
+      `${server}/font_list`,
+    );
+    xhr.onerror=re
+    xhr.send();
+  })
+}

static/tailwind.config.js

@@ -0,0 +1,19 @@
+module.exports = {
+  theme: {
+    extend: {
+      textColor: {
+        "rgb-999": "#999",
+        "rgb-666": "#666",
+        "rgb-333": "#333",
+      },
+      backgroundColor: {
+        "rgb-F5": "#F5F5F5",
+      },
+      placeholderColor: {
+        "rgb-B3": "#B3B3B3",
+      },
+    },
+  },
+  variants: {},
+  plugins: [],
+};

test/app.e2e-spec.ts

@@ -0,0 +1,24 @@
+import { Test, TestingModule } from '@nestjs/testing';
+import { INestApplication } from '@nestjs/common';
+import * as request from 'supertest';
+import { AppModule } from './../src/app.module';
+
+describe('AppController (e2e)', () => {
+  let app: INestApplication;
+
+  beforeEach(async () => {
+    const moduleFixture: TestingModule = await Test.createTestingModule({
+      imports: [AppModule],
+    }).compile();
+
+    app = moduleFixture.createNestApplication();
+    await app.init();
+  });
+
+  it('/ (GET)', () => {
+    return request(app.getHttpServer())
+      .get('/')
+      .expect(200)
+      .expect('Hello World!');
+  });
+});

test/jest-e2e.json

@@ -0,0 +1,9 @@
+{
+  "moduleFileExtensions": ["js", "json", "ts"],
+  "rootDir": ".",
+  "testEnvironment": "node",
+  "testRegex": ".e2e-spec.ts$",
+  "transform": {
+    "^.+\\.(t|j)s$": "ts-jest"
+  }
+}

tsconfig.build.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules", "test", "dist", "**/*spec.ts"]
+}

tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "declaration": true,
+    "removeComments": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "target": "es2017",
+    "sourceMap": true,
+    "outDir": "./dist",
+    "esModuleInterop": true,
+    "baseUrl": "./",
+    "incremental": true
+  },
+  "exclude": ["node_modules", "dist"]
+}

tslint.json

@@ -0,0 +1,18 @@
+{
+  "defaultSeverity": "error",
+  "extends": ["tslint:recommended"],
+  "jsRules": {
+    "no-unused-expression": true
+  },
+  "rules": {
+    "quotemark": [true, "single"],
+    "member-access": [false],
+    "ordered-imports": [false],
+    "max-line-length": [true, 150],
+    "member-ordering": [false],
+    "interface-name": [false],
+    "arrow-parens": false,
+    "object-literal-sort-keys": false
+  },
+  "rulesDirectory": []
+}