ZZOpenLibs改造

ZZOpenLibs改造问题

问题

1. 在vue文件的ts写法中，使用require引入libs里面的js,如下

const ZZAPP = require('@zz-vc/zz-open-libs/lib/libs/adapter');

由于js为esModule,所以引入的属性、方法会通过default传递，虽然不影响我们使用，但是并不是我们期望的应用方式。
2.在vue文件的ts写法中，使用import引入libs里面的js,如下

import ZZAPP from '@zz-vc/zz-open-libs/lib/libs/adapter';

image.png

悲剧了没有ts的.d.ts声明文件,引入不了。

解决

1.曝露方法的聚合，留到下面第3点一起写
2.自己写？...懒得写，找点自动生成的吧,找个cli-->dtsmake,
使用如下

npm i dtsmake -g   // 先全局安装dtsmake

dtsmake -s ./xx.js  // 在对应的文件生产文件

坑:dtsmake需要依赖一个包 tern，安装到目标文件xx.js的父目录，
生成的.d.ts文件也会有点问题，手动删处了一条报错代码，

image.png

别问我为啥删...我也不知道,反正我删了文件就能用了～～～
理想情况：如果我引入的adapter不是一个js而是一个包，我觉的会好很多，例如 vue-property-decorator这个包

image.png
3.核心改造--->
步骤一，node包聚合，

//导出部分
const ZZAPP = require('./lib/libs/adapter').default
exports.ZZAPP = ZZAPP

//导入部分
const libs = require('@zz-vc/zz-open-libs')

第一步成功。
第二步，加入esModule支持，

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});
const ZZAPP = require('./lib/libs/adapter').default
//node模块支持
exports.ZZAPP =ZZAPP
//es模块支持
exports.default ={ZZAPP}

//导入
import ZZAPP from '@zz-vc/zz-open-libs';

第二步成功，在module.exports里面和default里面都曝露出想要都内容。
第三步，ts支持，编写index.d.ts声明文件,我了去这个生成不了只能自己写

//导出
import ZZAPP = require('./lib/libs/adapter');
declare module 'ZZAPP' {
  export = ZZAPP;
}

//导入
import libs from '@zz-vc/zz-open-libs';

但是下面写法不行～～～

import {ZZAPP} from '@zz-vc/zz-open-libs';

改为

//导出
import ZZAPP = require('./lib/libs/adapter');
declare module 'ZZAPP' {
  export = ZZAPP;
}
export {ZZAPP};

现在import {ZZAPP} 也已经支持了。