使用rollup打包一个npm包

前言:在这个都在使用 npm install,来安装包的时代,你是否想发布一个自己的npm包,或者你工作中是否要发布一个npm包,来到你的项目中到处使用呢?(不晓得npm是什么的请移步:npm)

那么今天我们就来学习一下怎样打包一个自己的npm包

1.首先准备环境

node本地环境,vscode编辑器

2.创建两个项目

项目说明:

my-react-npm是我们准备要打包的npm的文件夹

my-react-test是我们本地测试要是用的文件夹

首先我们使用cmdmy-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
修改完,我们就能在页面中看到我们引入的内容了。
后面怎么发包,大家就自己从网上找吧。很简单的
 
 
posted @ 2024-04-19 10:15 上官靖宇 阅读(223) 评论(0) 推荐(0) 编辑
摘要: gsap 介绍: GreenSock Animation Platform (GSAP) 是一个业界知名的动画库,它被1100多万个网站使用,有超过50%的获奖的网站都是用了它。不管是在原生环境中,还是任意的框架中,你可以使用GSAP去让非常多的东西动起来。不管你是想要去让UI界面产生交互动画,还是 阅读全文
posted @ 2024-02-23 16:47 上官靖宇 阅读(526) 评论(0) 推荐(0) 编辑
摘要: 使用three.js创建第一个场景和物体 一.创建一个场景(Creating a scene) 1.场景(Scene) 场景能够让你在什么地方、摆放什么东西来交给three.js来渲染,这是你放置物体、灯光和摄像机的地方。 构造器 Scene() 创建一个新的场景对象。 文档地址:https://t 阅读全文
posted @ 2024-02-23 14:17 上官靖宇 阅读(37) 评论(0) 推荐(0) 编辑
摘要: 搭建项目 我们要学习three,那么我们势必需要在本地搭建一个自己的项目。 首先我们需要在我们自己的电脑中安装node,创建一个node环境。这个自行从网上百度,这里就不再介绍了。(简单的一批,自行百度吧,如果不会,那么也不要学习three了) Parcel 这里我们使用Parcel来打包我们的项目 阅读全文
posted @ 2024-02-22 16:23 上官靖宇 阅读(46) 评论(0) 推荐(0) 编辑
摘要: 要学习three.js首先我们要了解几个概念 什么是3d,什么是webgl,那么three.js又是什么。 下面我们来一一介绍。 首先什么是3d? 3D,全称为Three-Dimensional,即三维,是指在空间中具有三个维度(长度、宽度和高度)的概念。在现实世界中,我们所处的就是一个三维空间,物 阅读全文
posted @ 2024-02-22 15:17 上官靖宇 阅读(132) 评论(0) 推荐(0) 编辑
摘要: React4.x配置样式按需引入和自定义主题 安装所需依赖 yarn add @craco/craco babel-plugin-import craco-less 添加配置文件 在根目录创建craco.config.js文件 craco.config.js文件内容 const CracoLessP 阅读全文
posted @ 2021-09-09 11:09 上官靖宇 阅读(210) 评论(0) 推荐(0) 编辑
摘要: React中context的使用方法 App.js文件 // 引入React import React, {Component} from 'react'; // 引入样式 import './App.css'; /* * 详细说明:定义了三个组件:分别为App/AppChild/AppChildC 阅读全文
posted @ 2021-07-01 09:42 上官靖宇 阅读(1261) 评论(0) 推荐(0) 编辑
摘要: VUE “Title”修改 1.静态“Title ” vue 在public 文件夹中有一个index.html,直接修改title中的值即可。这是最low的方法。 当然你的项目如果是使用webpack或者是vue-cli创建出来的项目,那么你会在title的地方看到 <%= htmlWebpack 阅读全文
posted @ 2021-03-29 11:55 上官靖宇 阅读(12426) 评论(0) 推荐(0) 编辑
摘要: 取消 保存 1 //添加键盘事件 2 document.onkeyup = function (event){ 3 var e = event || window.event; 4 var keyword = e.keyCode || e.which; 5 switch(keyword){ 6... 阅读全文
posted @ 2016-08-09 15:47 上官靖宇 阅读(474) 评论(0) 推荐(0) 编辑
摘要: 移动端适配的方案需要根据具体的业务场景进行选择,工作中接触最多的是一些h5活动页、落地页等,这些页面在大小屏手机上的展示要求大小屏无差异,那么就针对以上要求进行项目整体的适配是最合适不过的。 如果是大屏手机展示更多的内容,并不着重于放大展示的话,外层布局使用vw,%,flex,内层直接px的混合适配 阅读全文
posted @ 2024-10-29 13:26 上官靖宇 阅读(102) 评论(0) 推荐(0) 编辑
摘要: React项目中的antd,Form和Table如何一起使用 在项目中我们可能会遇到单独的表格,单独的表单这样使用。但是稍微复杂一点,如果是表单中存在一个类似于表格的列表,我们能够动态的去增加删除。或者是表格中的每一行中的某一列或者多个列是表单信息,那么我们又应该怎么实现呢? const [toFo 阅读全文
posted @ 2024-10-21 15:56 上官靖宇 阅读(216) 评论(0) 推荐(0) 编辑
摘要: ​ # 使用create-react-app,配置proxy报错(options.allowedHosts[0] should be a non-empty string) 今天在启动项目的时候遇到一个神奇的问题,这个问题具体报错信息是: Invalid options object. Dev Se 阅读全文
posted @ 2024-04-24 16:54 上官靖宇 阅读(185) 评论(0) 推荐(0) 编辑
摘要: 使用iframe嵌入页面很方便,但必须在父页面指定iframe的高度。如果iframe页面内容的高度超过了指定高度,会出现滚动条,很难看。 如何让iframe自适应自身高度,让整个页面看起来像一个整体? 在HTML5之前,有很多使用JavaScript的Hack技巧,代码量大,而且很难通用。随着现代 阅读全文
posted @ 2024-02-26 09:40 上官靖宇 阅读(542) 评论(0) 推荐(0) 编辑
摘要: three.js-让物体动起来 三维物体(Object3D) 这是Three.js中大部分对象的基类,提供了一系列的属性和方法来对三维空间中的物体进行操纵。请注意,可以通过.add( object )方法来将对象进行组合,该方法将对象添加为子对象,但为此最好使用Group(来作为父对象)。 构造器 阅读全文
posted @ 2024-02-23 15:09 上官靖宇 阅读(199) 评论(0) 推荐(0) 编辑
摘要: 坐标轴辅助器(AxesHelper) 用于简单模拟3个坐标轴的对象.红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴. const axesHelper = new THREE.AxesHelper( 5 ); scene.add( axesHelper ); 文档地址:https://th 阅读全文
posted @ 2024-02-23 14:48 上官靖宇 阅读(168) 评论(0) 推荐(0) 编辑
摘要: 轨道控制器(OrbitControls) Orbit controls(轨道控制器)可以使得相机围绕目标进行轨道运动。要使用这一功能,就像在/examples(示例)目录中的所有文件一样, 您必须在HTML中包含这个文件。 进口 OrbitControls 是一个附加组件,必须显式导入。 See I 阅读全文
posted @ 2024-02-23 14:40 上官靖宇 阅读(650) 评论(0) 推荐(0) 编辑
点击右上角即可分享
微信分享提示