发布一个npm组件库包

Webpack 配置 (webpack.config.js)

js 复制代码
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  entry: './src/index.js', // 入口文件
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-library.js', // 输出文件
    library: 'MyLibrary', // 库名称
    libraryTarget: 'umd', // 支持多种模块化格式
    globalObject: 'this', // 解决 UMD 在浏览器和 Node.js 环境下的兼容性问题
  },
  externals: {
    react: 'react', // 不打包 React,使用外部的 React
    'react-dom': 'react-dom', // 不打包 ReactDOM
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        type: 'asset/resource',
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        type: 'asset/resource',
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'my-library.css',
    }),
  ],
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin(), // 压缩 JavaScript
      new CssMinimizerPlugin(), // 压缩 CSS
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'], // 解析这些扩展名的文件
  },
};
  • 外部依赖:在 externals 中配置不打包的依赖(例如 React 和 ReactDOM),并在 peerDependencies 中声明它们,以确保用户在使用你的库时会安装这些依赖。

Package.json 配置

js 复制代码
{
  "name": "my-library",
  "version": "1.0.0",
  "main": "dist/my-library.js", // CommonJS 入口
  "module": "dist/my-library.esm.js", // ESModule 入口
  "files": [
    "dist"
  ],
  "scripts": {
    "build": "webpack --mode production"
  },
  "dependencies": {
    // 需要打包的依赖
  },
  "peerDependencies": {
    "react": "^17.0.0", // 作为 peer dependency
    "react-dom": "^17.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.0",
    "css-loader": "^6.0.0",
    "mini-css-extract-plugin": "^2.0.0",
    "terser-webpack-plugin": "^5.0.0",
    "css-minimizer-webpack-plugin": "^3.0.0",
    "webpack": "^5.0.0",
    "webpack-cli": "^4.0.0"
  }
}
  • main:
相关推荐
爱吃的强哥11 分钟前
vue3 使用 vite 管理多个项目,实现各子项目独立运行,独立打包
前端·javascript·vue.js
谈不譚网安20 分钟前
CSRF请求伪造
前端·网络安全·csrf
TT模板25 分钟前
苹果cmsV10主题 MXonePro二开优化修复开源版
前端·html5
拖孩26 分钟前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
去伪存真32 分钟前
不用动脑,手把手跟着我做,就能掌握Gitlab+Jenkins提交代码自动构部署
前端·jenkins
叱咤少帅(少帅)1 小时前
Node.js 开发项目
node.js
天天扭码1 小时前
深入解析 JavaScript 中的每一类函数:从语法到对比,全面掌握适用场景
前端·javascript·面试
小希爸爸1 小时前
4、中医基础入门和养生
前端·后端
kooboo china.2 小时前
Tailwind CSS 实战:基于 Kooboo 构建企业官网页面(一)
前端·css·编辑器
uhakadotcom2 小时前
Fluid:云原生数据加速与管理的简单入门与实战
前端