typescript webpack 库打包发布

本示例主要解决typescript多文件打包单文件的js和d.ts文件。

安装依赖

bash 复制代码

npm install --save-dev typescript webpack webpack-cli ts-loader

创建 TypeScript 配置文件

bash 复制代码

{
  
  "compilerOptions": {
   
    "target": "ES6",                           
    /***是否允许使用js文件并一起打包********/
    "allowJs": true,
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
 
    /* 配置打包的目标格式，CommonJS支持浏览器和Nodejs环境 */
    "module": "CommonJS",                                 
    "moduleResolution": "node",
    "esModuleInterop": true,  
    "sourceMap": false,                       
    "forceConsistentCasingInFileNames": true,             
    "outDir": "dist",    
    /* 输出d.ts的申明文件***/
    "declaration": true,
    "strict": true

  },
  
  "include":[
    "./src/**/*",
  ]
}

注:

网上有将typescript打包单一文件的方法，将其中的module配置成AMD或者System方式，并指定输出文件outFile。这个方式虽然可以正常打包，但是在使用时无法直接使用import方式导入。

创建 Webpack 配置文件

bash 复制代码

const path = require('path');

module.exports = {
  entry: './src/index.ts', //入口文件。
  mode: 'development',
  output: {
    libraryTarget: 'commonjs', //这个格式支持在其他工程使用import 方式导入，其他方式会导致用法出现问题。
    path: path.resolve(__dirname, 'dist'),
    filename: 'webcad.js',
  },
  resolve: {
    extensions: ['.ts', '.js'], // 支持的文件扩展名,使用import导入时可以忽略文件扩展名
  },
  module: {
      rules: [
          {
              test: /\.ts$/,
              use: {
                  loader: "ts-loader"     
              },
              exclude: /node_modules/
          }
      ]
  },

关于入口文件：

入口文件就是对typescript的所有文件进行导出。

bash 复制代码

export * from "./map/cadmap";
export * from "./map/commandfactory"
export * from "./mainapp"
export * from "./ltrendermode"

export * from "./cad/blocksbush"
export * from "./cad/dimension"
export * from "./cad/localfont"

在package.json文件中配置打包脚本

bash 复制代码

"scripts": {
  "build": "webpack"
}

执行打包

bash 复制代码

npm run build

合并d.ts文件

正常情况下执行打包之后每个ts文件会自动生成一个声明文件。导致在实际使用时非常麻烦，需要找很多个文件导入。本例使用api-extractor将多个d.ts文件合成一个。

bash 复制代码

npm install -g @microsoft/api-extractor

在项目根目录下添加一个api-extractor.json文件。

bash 复制代码

{
  "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
 // 主入口文件路径,这个是刚才的入口文件.
  "mainEntryPointFilePath": "./dist/index.d.ts", 
 
  "bundledPackages": [],
 
  "compiler": {
    "overrideTsconfig": {
      "compilerOptions": { "declaration": false }
    }
  },
 
  "apiReport": {
    "enabled": false
  },
 
  "docModel": {
    "enabled": false
  },
 
  "dtsRollup": {
    "enabled": true,  
    //设置合并输出的的d.ts文件名字
    "untrimmedFilePath": "./dist/webcad.d.ts",  
    "omitTrimmingComments": true  
  },
 
  "tsdocMetadata": {
    "enabled": false
  },
 
  "messages": {
    "compilerMessageReporting": {
      "default": {
        "logLevel": "warning"
      }
    },
 
    "extractorMessageReporting": {
      "default": {
        "logLevel": "warning"
      }
    },
 
    "tsdocMessageReporting": {
      "default": {
        "logLevel": "warning"
      }
    }
  }
}

新增一个脚本用于执行合并d.ts文件

bash 复制代码

  "scripts": {
    "build": "webpack --config webpack.config.cjs",
    "merge": "api-extractor run --local --verbose"
  },

结果验证

最终结果生成一份webcad.js和webcad.d.ts文件。创建一个vue3+typescript的工程

bash 复制代码

<script setup >
import { ref } from 'vue';
let canvas = ref(null);
import {CadMap } from './webcad'
 

const Alert=()=>
{
     
    //console.log(WebCAD);
    let map=new CadMap({canvas:canvas.value});
    map.loadUrl('./tt1.ms');
    map.clearLayers();
}
 

</script>

npm 发布

注册网址 npm | Home (npmjs.com)
npm登录在项目根目录下，输入命令npm login

系统将提示你输入用户名、密码和邮箱。登录成功后，你的命令行会自动保存认证信息，使得你能够发布和管理你的包

发布

bash 复制代码

NPM 发布流程
在登录成功后，我们可以将打包好的插件发布到 NPM。发布的过程包括以下几步：

准备 package.json 文件：package.json 是描述 NPM 包的核心文件。确保这个文件中包含以下必要字段：

name：插件的名称，必须唯一且没有与其他包冲突。
version：插件的版本号，遵循语义化版本规则。
description：插件的简短描述。
main：指向插件的入口文件。
keywords：插件的关键词，有助于搜索引擎发现你的包。
author 和 license：插件的作者信息和许可证。
设置 NPM 忽略文件：通过创建 .npmignore 文件，指定在发布时需要忽略的文件和文件夹。例如，node_modules、dist 等。

发布插件：确保你已经打包好插件（后续部分会详细介绍），然后运行以下命令发布插件：

npm publish

注意:

当你使用npm发布包之后，第三方依赖项会自动包含在你的包中，前提是这些依赖项是你的package.json文件中列出的依赖。发布时，npm会查看package.json中的dependencies和devDependencies字段，并下载相应的依赖项

引用资料

发布一个简单的npm包简单流程 - mounter爱学习 - 博客园

使用typescript+webpack构建一个js库的示例详解_javascript技巧_脚本之家 (jb51.net)

概念 | webpack 中文文档 | webpack中文文档 | webpack中文网 (webpackjs.com)