使用rollup打包一个npm包
使用rollup打包一个npm包
前言：在这个都在使用 npm install，来安装包的时代，你是否想发布一个自己的npm包，或者你工作中是否要发布一个npm包，来到你的项目中到处使用呢？(不晓得npm是什么的请移步：npm)
那么今天我们就来学习一下怎样打包一个自己的npm包
1.首先准备环境
node本地环境，vscode编辑器
2.创建两个项目
项目说明：
my-react-npm是我们准备要打包的npm的文件夹
my-react-test是我们本地测试要是用的文件夹
首先我们使用cmd在my-react-npm文件夹下执行npm init -y
执行成功之后我们会看到一个package.json文件，下面我们来再此文件夹下，依次创建src和lib目录
src存在内容；lib存放打包之后的内容
在src下添加下面的文件
文件内容Button.js
import React from "react";
const Button = () => {
return (
<div>
我是一个btn
</div>
)
}
export default Button;index.js
import Button from './components/Button'
export { Button }现在我们需要安装我们需要的依赖了
当然你也可以一起安装 npm install @babel/core @babel/preset-env @babel/preset-react rollup @rollup/plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve -D
依赖请参阅npm上的具体内容说明，这里不具体说明。
然后我们在my-react-npm
下面创建rollup.config.js（注意这里有坑），后面会说
import { babel } from '@rollup/plugin-babel';
import commonjs from "@rollup/plugin-commonjs";
import resolve from '@rollup/plugin-node-resolve';
export default {
input: './src/index.js',
output: {
file: './lib/bundle.js',
format: 'es',
},
plugins: [
resolve(),
babel({
exclude: 'node_modules/**', // 只编译我们的源代码
presets: ['@babel/preset-env', '@babel/preset-react'],
}),
commonjs(),
],
// 设置react为外部引用，可避免打包时打进去，否则警告(!) Unresolved dependencies
external: ['react'],
};上面是具体的配置内容
然后我们在package.json中添加如下配置：
"scripts": {
"build": "rollup -c",
"dev": "rollup -c -w"
}
一切都OK了，现在我们执行npm run build
然后你就上当了：
怎么解决这个问题呢？
两种方式：
第一种在package.json文件中添加type: "module"
第二种：直接把rollup.config.js改为rollup.config.mjs
记得去掉package.json中第一种加的配置。
我们看一下我们打包好的东西：
上面我们已经完成了我们要打包的npm包的过程，现在我们要测试这个包。
测试包
测试包我们就需要我们创建的另外一个文件夹了（my-react-test），在另外一个文件夹下cmd执行npx create-react-app my-react-app
创建出来一个react项目，在这个项目中我们引入我们刚才打包好的东西。
首先我们在my-react-npm 目录下执行npm link （注意这里有坑）
我们会看到添加了一个包。
然后我们在我们刚才创建好的项目下执行cmd：npm link my-react-npm
这样我们就link到我们本地的包了，在项目中引用这个包就行了。
启动项目引用之后，我们会发现报错了
找不到。还记得我们前面提到过的坑吗？
当然我们忘记修改打包之后的main指向了
看我们之前配置的是什么，这个当然找不到Button了，我们应该把这个地方修改为lib下面的
lib/bundle.js
