webpack5打包一个TS 库并发布到npm 一条龙实战教程（附模板代码）

文章目录

• 前言
  • 一、新建项目 package.json
  • 二、安装webpack 和 webpack-cli
  • 三、 webpack-cli init 选择配置
    • 选择语言
    • 是否使用webpack-dev-server
    • 是否创建html 在仓库里
    • 是否需要pwa
    • 选择要使用的css 预处理器
    • 你会在你的项目中使用CSS样式吗？
    • 是否使用PostCSS
    • 是否要添加全局css
    • 选择包管理器
    • 总览配置
  • 四、 webpack 生成配置预览
    • webpack.config
    • tsconfig
  • 5、ts 声明文件没有产生处理
    • 修改代码
    • 生成dist
    • 配置tsconfig 生成声明文件
  • 发布包到npm
    • 指定npm 包上传内容
    • 打包上传
  • 结尾

前言

现在的前端造轮子必然逃离不开webpack、rollup 等打包工具，webpack5 出来很长时间了，来试试吧。

文章会重零开始创建一个TS 库，并上传到npm，维度多以操作步骤顺序。

1. 新建项目 package.json
2. 安装webpack 和 webpack-cli
3. webpack-cli init 选择配置
4. webpack5 资源打包默认方案
5. ts 声明文件没有产生处理
6. 发布包到npm

注意：下文都是使用yarn npm 用户同步替换。

一、新建项目 package.json

创建新项目，这里我取名webpack5-ts-lib-boilerplate

然后通过yarn init 命令创建项目

二、安装webpack 和 webpack-cli

安装webpack 和 webpack-cli 到项目开发依赖，这里我选择的版本是最新版本。

代码语言：javascript复制

yarn add  webpack webpack-cli -D

三、 webpack-cli init 选择配置

执行下面命令：

代码语言：javascript复制

yarn webpack-cli init

这时候进入选择配置模式，一一介绍配置：

选择语言

Which of the following JS solutions do you want to use? 您希望使用以下哪种JS解决方案？

这里我们使用TS选择即可。

是否使用webpack-dev-server

Do you want to use webpack-dev-server? (Y/n) 是否使用webpack-dev-server

webpack-dev-server主要用来写例子测试，可以watch 比较方便，这里输入Y使用。

是否创建html 在仓库里

Do you want to simplify the creation of HTML files for your bundle? 是否要简化捆绑包HTML文件的创建？

HtmlWebpackPlugin会把打包好的js文件，自动绑到html 文件，交给wepack 配置。

输入y，需要

是否需要pwa

Do you want to add PWA support? 是否要添加PWA支持？

这里是一个第三发库，不需要支持

选择要使用的css 预处理器

Which of the following CSS solutions do you want to use? 选择css解决方案

我这个库用less

你会在你的项目中使用CSS样式吗？

Will you be using CSS styles along with LESS in your project? 你会在你的项目中使用CSS样式吗？

会，这里会给你loader处理

是否使用PostCSS

Will you be using PostCSS in your project? 是否使用PostCSS

postcss可以通过插件机制，预处理css，这里选择里使用。

是否要添加全局css

Do you want to extract CSS for every file? 是否要为每个文件提取CSS？

暂时没有，有的配置即可

选择包管理器

Pick a package manager 选择包管理器

用习惯了yarn

总览配置

最后覆盖下package.json

四、 webpack 生成配置预览

整体目录：

自动生成了

• tsconfig
• postcss.config
• webpack.config

重点关注webpack.config

webpack.config

代码语言：javascript复制

// Generated using webpack-cli https://github.com/webpack/webpack-cli

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const isProduction = process.env.NODE_ENV == "production";

const stylesHandler = "style-loader";

const config = {
  entry: "./src/index.ts",
  output: {
    path: path.resolve(__dirname, "dist"),
  },
  devServer: {
    open: true,
    host: "localhost",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "index.html",
    }),

    // Add your plugins here
    // Learn more about plugins from https://webpack.js.org/configuration/plugins/
  ],
  module: {
    rules: [
      {
        test: /.(ts|tsx)$/i,
        loader: "ts-loader",
        exclude: ["/node_modules/"],
      },
      {
        test: /.less$/i,
        use: [stylesHandler, "css-loader", "postcss-loader", "less-loader"],
      },
      {
        test: /.css$/i,
        use: [stylesHandler, "css-loader", "postcss-loader"],
      },
      {
        test: /.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
        type: "asset",
      },

      // Add your rules for custom modules here
      // Learn more about loaders from https://webpack.js.org/loaders/
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
};

module.exports = () => {
  if (isProduction) {
    config.mode = "production";
  } else {
    config.mode = "development";
  }
  return config;
};

配置内容：

• HtmlWebpackPlugin
• ts-loader
• style-loader
• css-loader
• postcss-loader
• less-loader

资源配置策略：

代码语言：javascript复制

{
        test: /.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
        type: "asset",
},

现在，webpack 将按照默认条件，自动地在 resource 和 inline 之间进行选择：小于 8kb 的文件，将会视为 inline 模块类型，否则会被视为 resource 模块类型。

tsconfig

tsconfig 只是基础配置

代码语言：javascript复制

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "allowJs": true
  },
  "files": ["src/index.ts"]
}

5、ts 声明文件没有产生处理

修改代码

代码语言：javascript复制

export interface StudentProps {
  name:string,
  class:string
}

class Student {
  name:string
  class:string
  constructor(std:StudentProps) {
    this.name = std.name
    this.class = std.class
  }
}

export default Student

生成dist

执行一下，默认生成的脚本

代码语言：javascript复制

"scripts": {
    "build": "webpack --mode=production --node-env=production",
    "build:dev": "webpack --mode=development",
    "build:prod": "webpack --mode=production --node-env=production",
    "watch": "webpack --watch",
    "serve": "webpack serve"
  }

代码语言：javascript复制

yarn build

编译完之后发现没有ts声明文件

配置tsconfig 生成声明文件

我们需要声明文件，到dist 一起发版，所以需要配置下tsconfig

代码语言：javascript复制

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/",// 打包到的目录
    "sourceMap": false,// 是否生成sourceMap（用于浏览器调试）
    "noImplicitAny": false,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "declaration": true,// 是否生成声明文件
    "declarationDir": "./dist/types/",// 声明文件打包的位置
    "declarationMap": false,// 是否生成声明文件map文件（便于调试）
    "moduleResolution": "node",
    "module": "esnext",
    "target": "es5",// 转化成的目标语言
    "baseUrl": "./",
    "types": [
      "node"
    ],
    "typeRoots": [
      "./node_modules/@types"
    ],
    "lib": [
      "dom",
      "es2015"
    ],
    "jsx": "react",
    "allowJs": false
  },
  "include": [
    "src/**/*.ts",
    "typings.d.ts",
  ],// 要打包的文件
  "exclude": [
    "node_modules",
    "*.test.ts"
  ]
}

再执行打包命令，生成结果如下：

发布包到npm

指定npm 包上传内容

修改package.json 修改main和files ，新增 types字段。

具体配置如下:

代码语言：javascript复制

{
  "name": "webpack5-ts-lib-boilerplate",
  "version": "1.0.0",
  "description": "My webpack project",
  "author": "ZY",
  "license": "MIT",
  "main": "./dist/main.js",
  "types": "./dist/types/index.d.ts",
  "files": [
    "dist"
  ],
  "devDependencies": {
    "@webpack-cli/generators": "^2.4.1",
    "autoprefixer": "^10.4.2",
    "css-loader": "^6.5.1",
    "html-webpack-plugin": "^5.5.0",
    "less": "^4.1.2",
    "less-loader": "^10.2.0",
    "postcss": "^8.4.5",
    "postcss-loader": "^6.2.1",
    "prettier": "^2.5.1",
    "style-loader": "^3.3.1",
    "ts-loader": "^9.2.6",
    "typescript": "^4.5.4",
    "webpack": "^5.66.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.7.3"
  },
  "scripts": {
    "build": "webpack --mode=production --node-env=production",
    "build:dev": "webpack --mode=development",
    "build:prod": "webpack --mode=production --node-env=production",
    "watch": "webpack --watch",
    "serve": "webpack serve"
  }
}

打包上传

npm 源切换到公有。执行npm publish 没有登录的记得登录，这个就不在这啰嗦。

发布成功可以查看地址:

https://www.npmjs.com/package/webpack5-ts-lib-boilerplate

结尾

github 代码仓库：https://github.com/Template-FE/webpack5-ts-lib-boilerplate

webpack npm css javascript 打包

0 人点赞