使用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下面的