发一个react组件到np

ggbond
71 阅读3分钟

之前开篇阐述过如何发一个npm包，总的来说，比较简单，但是并不够具体，这篇主要来讲下react组价的发布。组件内容不重要，这里不做其他概述，用没用ts不重要，都能配置，首先重要的，就是打包工具了。比如，rollup，webpack，gulp，接下来介绍下几套方案。

  1. webpack市面少比较少使用这个方案，百度到的一些博文也是19年的，比较老。但是优点很明显，纯净。后续尝试发现，其实也就是通过babel的功能来转个es5，比较简单和纯粹。

  2. rollup比较常见，也比较纯净。这里推荐下介绍会用到并且比较常见的rollup插件文章，后续也会单独讲下插件。下面是package.json的内容，这里是吧rollup的插件都列举了下，具体使用看个人需求。 package.json

{
  "name": "component-name",
  "version": "1.0.3",
  "description": "component-desc",
  "main": "lib/index.js",
  "module": "lib/index.js",
  "scripts": {
    "build": "yarn run rollup -c"
  },
  "typings": "dist/es/type/index.d.ts",
  "repository": {
    "type": "git",
    "url": "https://gitee.com/tolin/hover-select.git"
  },
  "keywords": [
    "select",
    "hover"
  ],
  "author": "tolin",
  "license": "ISC",
  "peerDependencies": {
    "@ant-design/icons": ">=4",
    "antd": ">=4",
    "react": ">=16",
    "react-dom": ">=16",
    "react-is": ">=16.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.10.0",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/plugin-proposal-decorators": "^7.10.0",
    "@babel/plugin-syntax-jsx": "^7.8.3",
    "@babel/plugin-transform-react-jsx": "^7.9.4",
    "@babel/preset-env": "^7.10.0",
    "@babel/preset-react": "^7.10.0",
    "@emotion/babel-preset-css-prop": "^11.2.0",
    "@rollup/plugin-babel": "^5.3.1",
    "@rollup/plugin-commonjs": "^22.0.1",
    "@rollup/plugin-node-resolve": "^13.3.0",
    "babel-loader": "^8.2.5",
    "babel-plugin-import": "^1.13.5",
    "eslint": "^8.19.0",
    "html-webpack-plugin": "^5.5.0",
    "less": "^4.1.3",
    "mini-css-extract-plugin": "^2.6.1",
    "rollup": "^2.77.0",
    "rollup-plugin-ascii": "^0.0.3",
    "rollup-plugin-dts": "^4.2.2",
    "rollup-plugin-includepaths": "^0.2.4",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-postcss": "^4.0.2",
    "rollup-plugin-terser": "^7.0.2",
    "rollup-plugin-typescript2": "^0.32.1"
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }
}

  1. gulp还没试过，但是基本上是作为前两者或者其他工具的基本道具。

  2. create-react-library看名字就知道，是一个集成的工具，可以直接开箱即用的，但是缺点很明显，工具比较老了，而且很久没更新了，很多新的依赖例如reactv18它都支持不了。所以这个也不再使用了。

  3. tsup这个更多是对ts的支持，从名字上也可以看出，对framework的支持有限，并且文档也比较‘朴素’，所以也不考虑了

  4. microbundle这个值得一试，但是还没试

  5. tsdx其实还是基于rollup的封装，说实话，跟rollup的配置初始配置差不多，而且需要添加的插件支持也没有，例如假如需要配置css的话，还是需要手动安装rollup-plugin-postcss，并且配置tsdx.config.js文件，希望以后能添加默认支持。另外发现，这个配置也不是很复杂，以后有机会看能不能开发出来一个类似的东西，然后再开篇吹牛。

  6. storybook（这个在我最初的映像中，不是做类似于echart的图标的吗？？？）这个应该也不错，可以一试，但是主要的问题是，它是专门用来做库的，如果要发单个组件的话，就没有那么适用或者需要（小声bb） ​ ​ ​ ​ 参考：从零开始使用tsdx封装自己的ts+react的组件库并发布到NPM

avatar
文章
阅读
粉丝