JSON转换类型 — quicktype按需编译

点击在线体验        github

一点废话

quicktype是一个开源的强大的数据转换工具。支持c#,ts,js,golang,java...多达18种开箱即用的语言支持，若是没有您想要要的语言，还能够在原有项目上自行实现。

quicktype主要是将json,typescript class,postman,mutiple json,json schame数据转换为typescript 的interface, golang的struct格式。方便开发人员快速生成代码。

因为quicktype官方提供的开箱工具太过庞大(3.5MB)，打算使用源码自行编译，去掉不须要的功能。
通过屡次实验，发现去掉typescript class to typescript interface功能性价比最高。一方面是去掉此功能后文件大小减至1M不到，二是此功能我的感受比较鸡肋。

quicktype已经有了vscode插件，自行在vsocde插件库搜索便可。

若是你以为官方的vscode插件很差用想要本身定制（像我同样），那么继续往下看

若是你是强迫症。追求极致，能够经过禁用你不须要的语言选项来进一步缩小代码。

一般我不建议禁用其余语言的方案来得到更小的代码体积，本人只保留了ts,js,golang三种语言，源码也只是从950K缩小到了709k,虽然少了240K，可是丧失了多达15种语言的支持，有点得不偿失。固然具体根据我的需求实现。

开干

这里使用的是webpack 4 。 其实构建库，最好的构建工具是rollup。无奈本人折腾了两天，rollup始终没法获得满意结果，(主要是import和require混用致使的)。最后回退到了webpack。不事后来发现，webpack打包后的文件，其实也就比rollup大一丢丢。可是没有那么多糟心的错误。

获取源码安装依赖

git clone https://github.com/quicktype/quicktype.git
//then
npm i
//then 
npm i -D  webpack ts-loader terser-webpack-plugin
touch webpack.config.js
复制代码

webpack配置

const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    mode: 'production',
    entry: './src/index.ts',
    // target: "node",
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'qt_lib.js',
        library: "QT",
        libraryTarget: 'umd', //umd是通用模块，可同时知足 commonjs,AMD,es模块
        globalObject: "this"  //防止global windows not defined 这类错误
    },
    //此处防止编译出现奇怪的模块找不到错误
    node: { crypto: true, stream: true, fs: 'empty', net: 'empty' },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: {
                    loader: 'ts-loader',
                    options: {
                        transpileOnly: true
                    }
                },
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    optimization: {
        minimize: true,
        minimizer: [new TerserPlugin()],
    },
};
复制代码

建立入口文件

cd src/
touch index.ts
复制代码

index.ts代码

import * as qt from "./quicktype-core";

class SSS extends qt.JSONSchemaStore {
    fetch(e: any) {
        return Promise.resolve(undefined)
    }
}

export default async function (config: any) {
    let o: any
    switch (config.sourceType) {
        case "JSON Schema":
            o = new qt.JSONSchemaInput(new SSS)
            for (const item of config.sources) {
                await o.addSource({
                    name: item.topLevelName,
                    schema: item.samples[0].source
                });
            }
            break;

        default:
            o = qt.jsonInputForTargetLanguage(config.options.lang);
            for (const item of config.sources) {
                await o.addSource({
                    name: item.topLevelName,
                    samples: item.samples.map((e: any) => e.source),
                    description: item.description
                });
            }
            break;
    }
    config.options.inputData = new qt.InputData
    config.options.inputData.addInput(o)
    return qt.quicktype(config.options)
}

复制代码

执行

node .\node_modules\webpack\bin\webpack.js
//一次基本不会成功，自行根据TS报错修复相关的地方，有些是类型不对，直接找到源头使用 any (anyscript大法好 -_-)
复制代码

使用方法
commonjs: const qt = require("qt_lib").default
esmodule: import qt from "qt_lib"
browser: script导入后，使用全局变量QT便可。

测试
建立test.js ， 代码以下

const qt = require('../dist/qt_lib.js').default;
const config = {
    "options": {
        "lang": "TypeScript",
        "inferMaps": true,
        "inferEnums": true,
        "inferUuids": true,
        "inferDateTimes": true,
        "inferIntegerStrings": true,
        "inferBooleanStrings": true,
        "combineClasses": true,
        "ignoreJsonRefs": true,
        "allPropertiesOptional": false,
        "rendererOptions": {
            "just-types": true,
            "nice-property-names": false,
            "explicit-unions": false,
            "runtime-typecheck": false,
            "acronym-style": "lowerCase",
            "converters": "all-objects"
        },
        "fixedTopLevels": false
    },
    "sourceType": "JSON",
    "sources": [
        {
            "topLevelName": "Welcome",
            "samples": [
                {
                    "name": "welcome.json",
                    "source": "{\n \"greeting\": \"Welcome to quicktype!\",\n \"instructions\": [\n \"Type or paste JSON here\",\n \"Or choose a sample above\",\n \"quicktype will generate code in your\",\n \"chosen language to parse the sample data\"\n ]\n}"
                }
            ]
        }
    ],
    "receipt": -3942854747
}


qt(config).then(rs => console.log(rs.lines.join("\n")))


复制代码

node test.js
复制代码

output:

export interface Welcome {
    greeting:     string;
    instructions: string[];
}
复制代码

大功告成。 QQ交流群号:6533416