介绍

主要封装一个 dts bundle 插件，依赖 dts-bundle, 主要作用是将多个 d.ts 根据引用关系合成一个 d.ts

项目源码

• 自建 gitlab 地址: https://gitlab.qiushaocloud.top/qiushaocloud/webpack-qplugins
• github 地址: https://github.com/qiushaocloud/webpack-qplugins

npm 包

• 安装 npm 包: npm install --save-dev @qiushaocloud/webpack-dts-bundle-plugin

插件 TS 定义

1declare module '@qiushaocloud/webpack-dts-bundle-plugin' {
2    import { Compiler } from 'webpack';
3
4    /**
5        var dtsBundleOptions = {
6            // Required
7        
8            // name of module likein package.json
9            // - used to declare module & import/require
10            name: 'cool-project',
11            // path to entry-point (generated .d.ts file for main module)
12            // if you want to load all .d.ts files from a path recursively you can use "path/project\/**\/*.d.ts"
13            //  ^ *** Experimental, TEST NEEDED, see "All .d.ts files" section 
14            // - either relative or absolute
15            main: 'build/index.d.ts',
16        
17            // Optional
18        
19            // base directory to be used for discovering type declarations (i.e. from this project itself)
20            // - default: dirname of main
21            baseDir: 'build',
22            // path of output file. Is relative from baseDir but you can use absolute paths. 
23            // if starts with "~/" then is relative to current path. See https://github.com/TypeStrong/dts-bundle/issues/26
24            //  ^ *** Experimental, TEST NEEDED    
25            // - default: "<baseDir>/<name>.d.ts"
26            out: 'dist/cool-project.d.ts',
27            // include typings outside of the 'baseDir' (i.e. like node.d.ts)
28            // - default: false
29            externals: false,
30            // reference external modules as <reference path="..." /> tags *** Experimental, TEST NEEDED
31            // - default: false
32            referenceExternals: false,
33            // filter to exclude typings, either a RegExp or a callback. match path relative to opts.baseDir
34            // - RegExp: a match excludes the file
35            // - function: (file:String, external:Boolean) return true to exclude, false to allow
36            // - always use forward-slashes (even on Windows)
37            // - default: *pass*
38            exclude: /^defs\/$/,
39            // delete all source typings (i.e. "<baseDir>\/**\/*.d.ts")
40            // - default: false
41            removeSource: false,
42            // newline to use in output file
43            newline: os.EOL,
44            // indentation to use in output file
45            // - default 4 spaces
46            indent: '	',
47            // prefix for rewriting module names
48            // - default ''
49            prefix: '__',
50            // separator for rewriting module 'path' names
51            // - default: forward slash (like sub-modules)
52            separator: '/',
53            // enable verbose mode, prints detailed info about all references and includes/excludes
54            // - default: false
55            verbose: false,
56            // emit although included files not found. See "Files not found" section. 
57            // *** Experimental, TEST NEEDED
58            // - default: false 
59            emitOnIncludedFileNotFound: false,
60            // emit although no included files not found. See "Files not found" section. 
61            // *** Experimental, TEST NEEDED
62            // - default: false     
63            emitOnNoIncludedFileNotFound: false,    
64            // output d.ts as designed for module folder. (no declare modules)
65            outputAsModuleFolder: false,
66            // path to file that contains the header
67            // // insert a header in output file. i.e.: http://definitelytyped.org/guides/contributing.html#header
68            // - default: null
69            headerPath: "path/to/header/file",
70            // text of the the header
71            // doesn't work with headerPath
72            // // insert a header in output file. i.e.: http://definitelytyped.org/guides/contributing.html#header
73            // - default: ''
74            headerTex: "" 
75        };
76    */
77    export type IDtsBundleOptions = {
78        name: string;
79        main: string;
80        baseDir?: string | undefined;
81        out?: string | undefined;
82        externals?: boolean | undefined;
83        referenceExternals?: boolean | undefined;
84        exclude?: RegExp | ((file: string, external: boolean) => boolean) | undefined;
85        removeSource?: boolean | undefined;
86        newLine?: string | undefined;
87        indent?: string | undefined;
88        prefix?: string | undefined;
89        separator?: string | undefined;
90        verbose?: boolean | undefined;
91        emitOnIncludedFileNotFound?: boolean | undefined;
92        emitOnNoIncludedFileNotFound?: boolean | undefined;
93        outputAsModuleFolder?: boolean | undefined;
94        headerPath?: string | undefined;
95        headerText?: string | undefined;
96    };
97
98
99    export class WebpackDtsBundlePlugin {
100        constructor(
101            dtsBundleOptions?: IDtsBundleOptions,
102            beforeCallback?: (dtsBundleOptions?: IDtsBundleOptions, ...args: any[]) => void,
103            afterCallback?: (dtsBundleOptions?: IDtsBundleOptions, ...args: any[]) => void,
104            applyCompiler?: (compiler: Compiler, dtsBundleOptions?: IDtsBundleOptions) => void
105        );
106
107        apply(compiler: Compiler): void;
108    }
109}

插件使用示例

1// 使用方式1: 不使用回调
2module.exports = {
3  plugins:[
4    // 传入插件实例
5    new WebpackDtsBundlePlugin({
6      name: '@qiushaocloud/xxxxxx',
7      main: path.resolve(__dirname, './dist-dts/main.d.ts'),
8      out: path.resolve(__dirname, './dist/xxxxxx.d.ts')
9    }),
10  ]
11};
12
13// 使用方式2: 使用回调
14module.exports = {
15  plugins:[
16    // 传入插件实例
17    new WebpackDtsBundlePlugin(
18      {
19        name: '@qiushaocloud/xxxxxx',
20        main: path.resolve(__dirname, './dist-dts/main.d.ts'),
21        out: path.resolve(__dirname, './dist/xxxxxx.d.ts')
22      }, (options, ...args) => {
23        // beforeCallback handle code ...
24      }, (options, ...args) => {
25        // afterCallback handle code ...
26      }
27      // , (compiler, options) => {
28      //   // applyCompiler handle code ...
29      // }
30    ),
31  ]
32};

开源不易，如果对您有帮助，请您动一动您的小手，给作者点 Star，也请您多多关注分享者「邱少羽梦」

• 分享者邮箱: qiushaocloud@126.com
• 分享者博客
• 分享者自己搭建的 gitlab
• 分享者 gitee
• 分享者 github