网上很少有自制npm包的教程，而且很多难点，因此我做了这期博客这样大家就不用去二次爬坑了。 自制前端插件并发布到npm一般都需要打包工具，因为npm本身是运行在node里的，而node不支持es6的import语法，而前端包一般都使用import语法来模块化，所以我们需要用打包工具+babel。
系列文章：
npm（五）：组件发布npm包全流程 (使用rollup打包工具)
目录
2.2 使用rollup-plugin-babel在rollup打包时对es语法编译成es5
2.6 为什么是要将核心依赖写入 devDependencies、peerDependencies ？
3. 配置 rolup rollup.js 中文文档 | rollup.js 中文网
4.1 使用 styled-jsx 实现 css 作用域隔离
初学者的 npm
如果你觉得本文节奏太快，不太适应，可以先去看看这几篇
npm（一）：从npm CLI说起_五虎战画戟-CSDN博客
npm（二）：剖析 package.json_五虎战画戟-CSDN博客
npm（三）：npm包发布、更新、废弃_五虎战画戟-CSDN博客
它以新手友好的方式详细介绍了npm 命令行、package.json、基本的npm发包流程，看完这几篇文章，相信你再看这篇文章会清晰很多！
1. 新建项目
mkdir my-first-npm-lib
cd my-first-npm-lib
npm init -y项目目录结构
创建如下项目目录
├── lib # 编译打包后的输出目录
├── src # 源码
│ │── Image # 组件
│ │ │── index.css # css
│ │ └── index.jsx # 组件
├── .babelrc # babel配置文件
├── .gitignore # 忽略文件
├── CHANGELOG.md # 包的迭代日志记录文档
├── package.json # 项目配置文件
├── package-lock.json # package.json 锁定版本文件
└── README.md # 项目说明文档2. 安装依赖 Rollup打包工具+babel
2.1 用rollup打包
yarn add rollup -D2.2 使用rollup-plugin-babel在rollup打包时对es语法编译成es5
yarn add @rollup/plugin-babel -D2.3 安装babel
yarn add @babel/core @babel/preset-env @babel/preset-react -D2.4 react
这里不用将 react 安装，因为我们会将其视为外部依赖，并在peerDependencies依赖他。
在package.json中写入peerDependencies依赖
{
"peerDependencies": {
"react": ">=16.9.0"
}
}2.5 核心依赖版本
为什么会是 react@">=16.9.0" ？因为我要用HOOK，并且也会用到 Antd，因此根据你的需求选择版本
2.6 为什么是要将核心依赖写入 devDependencies、peerDependencies ？
因为核心依赖一般需要使用外部依赖，即宿主。
- 放在devDependencies是因为我想要在开发环境使用本地的，发布包组件后使用外部依赖。
- 放在 peerDependencies 是因为需要宿主环境安装核心依赖
3. 配置 rolup rollup.js 中文文档 | rollup.js 中文网
3.1 在根目录下新建 rollup.config.js
touch rollup.config.js3.2 可以在rollup 文档中查看到它的配置
配置文件 | rollup.js 中文文档 | rollup.js 中文网
核心功能 | rollup.js 中文文档 | rollup.js 中文网
我们这里只需要配置必填项配置核心功能即可
import { babel } from '@rollup/plugin-babel'
export default {
input: './src/Image/index.jsx', // 入口文件
output: {
file: './lib/bundle.js', // 出口文件
name: 'bundle', // 出口文件
format: 'umd' // 输出的模块语法格式
},
plugins: [babel({ babelHelpers: 'bundled' })]
}
同步的，你需要把你的 package.json 的 main 修改为出口文件路径
{
"main": "lib/bundle.js"
}3.3 开始打包、优化配置
在 Image 组件写点代码试一下
// Image/index.jsx
import React from 'react'
export default () => {
return(
<h1>Image组件</h1>
)
}
使用 rollup 打包测试一下
yarn run rollup -c会发现报错了
这是因为我们没有配置 babel ，导致rollup无法理解 jsx 语法，配置一下 babel 就好了
// .babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}再次执行打包命令
yarn run rollup -c
可以看到打包成功，看一下 lib 下也已经有了bundle.js
但是看到这里有警告，按照提示修复一下就好了 Troubleshooting | rollup.js 中文文档 | rollup.js 中文网
// rollup.config.js
import { babel } from '@rollup/plugin-babel'
export default {
input: './src/Image/index.jsx', // 入口文件
output: {
file: './lib/bundle.js', // 出口文件
name: 'bundle', // 出口文件
format: 'umd', // 输出的模块语法格式
globals: { // 全局模块 用于umd/iife包
react: 'react'
}
},
plugins: [babel({ babelHelpers: 'bundled' })],
external: ['react'] // 将[模块]视为外部依赖项
}重新运行打包命令
yarn run rollup -c
看到没有警告了。下面我们简化一下打包脚本配置，package.json:
"scripts": {
"start": "yarn run rollup -c -w",
"build": "yarn run rollup -c"
}3.4 调试
使用 npm link 本地全局链接包 npm link_五虎战画戟-CSDN博客
npm link在一个其他项目中安装并使用这个本地链接包
npm link my-first-npm-libimport React from 'react'
import Image from 'my-first-npm-lib'
export default () => {
return(
<Image />
)
}
看到我们的组件可以正常显示
4. 组件编写与调试
4.1 使用 styled-jsx 实现 css 作用域隔离
styled-jsx - npm你可以看下 styled-jsx 使用方法 styled-jsx - npm
styled-jsx 先使用与你测试项目相同的版本号，因为不同版本styled-jsx对react是有不同版本要求的
yarn add styled-jsx@version在babel的 plugins 中配置 styled-jsx/babel
{
"plugins": [
"styled-jsx/babel"
]
}在我们的组件上写一点样式
import React from 'react'
export default () => {
return(
<>
<h1>Image组件</h1>
<style jsx>{`
h1 {
color: #1890ff;
}
`}</style>
</>
)
}
npm run start，样式已经变化，并且 css 作用域隔离 
那下面我们就可以正常的实现我们的组件了？什么组件？图片上传预览组件！
import React, { useState } from 'react'
export default () => {
const [filesUrlList, setFilesUrlList] = useState([])
const uploadFile = (e) => {
const files = e.target.files;
const setFilesUrl = []
for (const item of files) {
setFilesUrl.push(window.URL.createObjectURL(item))
}
setFilesUrlList(setFilesUrl)
}
return(
<>
<input type="file" multiple="multiple" accept="image/*" id='upload-file' onChange={uploadFile} />
<div>
{
filesUrlList.map((item, index) => <img key={index} alt='' className='preview-img' src={item} />)
}
</div>
<style jsx>{`
#upload-file {
color: #1890ff;
}
.preview-img {
width: 200px;
height:200px;
object-fit: contain;
}
`}</style>
</>
)
}
4.2 使用第三方组件库Antd
"peerDependencies": {
"react": ">=16.9.0",
"antd": "^4.15.6"
},
- antd 放入devDependencies为开发环境使用，组件包发布后将antd视为外部资源，在使用组件时，将会使用宿主环境的 antd
- 同时将antd放入peerDependencies 让宿主去安装
将antd、@ant-design/icons作为外部依赖
import { babel } from '@rollup/plugin-babel'
export default {
input: './src/Image/index.jsx', // 入口文件
output: {
file: './lib/bundle.js', // 出口文件
name: 'bundle', // 出口文件
format: 'umd', // 输出的模块语法格式
globals: {
react: 'react',
antd: 'antd',
'@ant-design/icons': '@ant-design/icons',
}
},
plugins: [babel({ babelHelpers: 'bundled' })],
external: ['react', 'antd', '@ant-design/icons'] // 将[模块]视为外部依赖项
}
引入antd Image、Icon
import React, { useState } from 'react'
import { Image } from 'antd'
import Icon, { UploadOutlined } from '@ant-design/icons'
export default (props) => {
const [filesUrlList, setFilesUrlList] = useState([])
const [visible, setVisible] = useState(false)
const uploadFile = (e) => {
const files = e.target.files
const setFilesUrl = []
for (const item of files) {
setFilesUrl.push(window.URL.createObjectURL(item))
}
setFilesUrlList(setFilesUrl)
}
return (
<>
<button type='dashed' className='upload-file-btn'>
<Icon style={{ marginRight: 4 }} component={UploadOutlined} />
<input type='file' multiple='multiple' className='upload-file' accept='image/*' onChange={uploadFile} />选择文件
</button>
<Image.PreviewGroup preview={{ visible, onVisibleChange: vis => setVisible(vis) }}>
{
filesUrlList.map((item, index) => {
return (
<Image
{ ...props }
key={index}
className='preview-img'
width={200}
src={item}
/>
)
})
}
</Image.PreviewGroup>
<style jsx>{`
.upload-file-btn {
display: flex;
align-items: center;
justify-content: center;
position: relative;
background: #1890ff;
border: none;
border-radius: 2px;
padding: 4px 15px;
overflow: hidden;
color: #ffffff;
text-decoration: none;
text-indent: 0;
line-height: 20px;
transition: all 0.3s;
white-space: nowrap;
height: 32px;
font-size: 14px;
}
.upload-file-btn .upload-file {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
cursor: pointer;
height: 100%;
}
.upload-file-btn:hover {
opacity: 0.8;
}
`}</style>
</>
)
}
5. 修改 package.json
package.json的知识本篇文章不多赘述，这篇文章已经讲解的比较详细了npm（二）：剖析 package.json_五虎战画戟-CSDN博客
6. 发布
yarn publish
发布成功，查看 npm 搜索一下我们的包
找个项目安装测试下
yarn add my-first-npm-lib在项目的 node_modules 下你可以看到我们的包了
引入使用 组件 Image ，可以正常使用！
发布成功！ 恭喜你！
欢迎 关注、点赞、评论！━(*｀∀´*)ノ亻!
230
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
