vue使用webpack封装组件上传到npm

最新推荐文章于 2024-07-11 21:22:30 发布
最新推荐文章于 2024-07-11 21:22:30 发布
阅读量332 收藏
点赞数 1
分类专栏： Vue Javascript 文章标签： vue webpack npm js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jwqzhn/article/details/119794806
版权

vue使用webpack封装组件上传到npm

组件上传npm，使用简易版webpack

1. 为什么使用简易版，因为好配置

vue init webpack-simple jwq-ui
//jwq-ui是名称，请选择npm里面没有的名称

2.创建components文件夹，里面放自己的组件，在跟目录下新建index.js作为入口文件

在这里插入图片描述

3.index.js文件的内容

import firstComponent from "./src/components/firstComponent"
import secondComponent from "./src/components/secondComponent"
import _Vue from 'vue'

//vue 插件模式需要暴露一个install方法
//判断是否存在vue
//Vue.use()
const components=[firstComponent,secondComponent]
const install=(Vue)=>{
  if (!Vue) {
    window.Vue = Vue = _Vue
  }
  components.forEach((elem,i)=>{
    Vue.component(elem.name, elem);
  })
}
export default install

4.package.json里面要改的

{
  "name": "jwq-ui",//自己要定义的名称
  "description": "A Vue.js components",
  "version": "1.0.0",
  "author": "jwq",//作者
  "license": "MIT",
  "private": false,//一定要设置false
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.5.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  },
  "keywords": [
    "jwq-ui" //npm搜索你的库的关键词
  ],
  "main": "dist/jwq-ui.js",//打包后的文件夹里面的js文件
  "files":[
    "dist",
    "src"
  ]
}

5.webpack.config.js要改的

var path = require('path')
var webpack = require('webpack')
const NODE_ENV = process.env.NODE_ENV;//这个是增加的
module.exports = {
  // entry: './src/main.js',
  // output: {
  //   path: path.resolve(__dirname, './dist'),
  //   publicPath: '/dist/',
  //   filename: 'build.js'
  // },
  entry: NODE_ENV == 'development' ? './src/main.js' : './index.js',//index.js是入口文件
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',//路径
    filename: 'jwq-ui.js',//打包之后的名称
    library: 'jwq-ui', // 指定的就是你使用require时的模块名
    libraryTarget: 'umd', // 指定输出格式
    umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  },

6.index.html要改的

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>jwq-ui</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- 下面的jwq-ui.js是打包后的文件   -->
    <script src="/dist/jwq-ui.js"></script>
  </body>
</html>

7.npm run build 打包

npm run build

8.npm的登录以及上传

做这个操作之前请先去注册npm账号，并验证自己邮箱的信息（验证邮箱，验证邮箱，重要的事情说三遍），要不然后面上传会出问题报403，,400的问题

npm login //npm 登录
npm publish //npm 发布包
npm version patch //更新版本号
npm publish //重新上传
npm unpublish jwq-ui@1.0.2 //撤销某个版本
npm init -y //初始化package
拢手点烟丶
关注
专栏目录
Webpack5+Vue
一醉千秋的专栏
06-21 642
webpack5+Vue
vue 插件发布到 npm 具体步骤详解
aibujin的博客
12-06 1015
创建项目 借助脚手架创建项目 vue init webpack ； 在 src 创建 plugin 文件夹； 在 plugin 文件夹自定义 button 和 msg 组件，； 在 plugin 文件夹创建 index.js 文件，注册自定义组件； 在 main.js 引入； 小编这里只做个简单的演示，实际工作中大家可根据需求自定义插件，到此插件封装步骤完成！ 修改 package.json 的配置 { "name": "vue-component-start", "version
webpack打包library发布到npm
彭世瑜的博客
05-16 922
webpack打包library发布到npm 项目结构 $ tree . ├── package.json ├── src │ └── index.js └── webpack.config.js 入口文件 index.js // src/index.js export function echo(message) { console.log(message); } 依赖配置 package.json { "name": "more-echo", "version": "1.0.0",
前端性能优化五十八：从零开始开发一个vue组件打包并发布到npm
wanmeijuhao的博客
12-27 361
因为只涉及到js,所以去掉一些配置,以下供参考。
webpack打包按需加载组件库
跬步
11-15 2232
开发的时候遇到一个特别坑的问题，就是在单独打包组件的配置文件中，使用了webpack的merge，相当于在base中写了一个loader，merge之后又写了一个不一样的loader，我以为后面写的loader会覆盖通用的loader。但是它没有，打包也不报错，就是死活打不出css文件，js文件在引用时也有问题，各种报错。查找百度也是找不出具体的问题，一次机缘巧合之前，删除了merge，瞬间，整个世界的开朗了。还是自己对于基础配置的使用不熟悉导致的奇奇怪怪的问题。
从项目搭建到发布插件到npm
qq_42002487的博客
09-15 237
前言 在我们平时的开发工作中，我们可以把很多可以公用的组件和方法抽离出来，以npm插件的形式发布在npm或者自己的npm私库上，以达到复用效果。 本文会以一个react插件为例，经历开发工程搭建—插件编写—npm打包发布等一系列步骤，和小伙伴们一起开发一个npm插件。 工程搭建 项目工程以为webpack5+、react17+、less、TypeScript为主体进行搭建。 项目结构 |-- demo |-- .babelrc |-- .gitignore |-- package.j
vue封装组件并发布到npm上的全过程
u013994400的博客
04-20 2204
vue3封装组件发布到npm上
Vue 组件封装 并使用 NPM 发布的教程
10-17
Vue 组件封装与使用 NPM 发布的过程是将开发的Vue组件库通过NPM进行管理和分发的标准流程。本文将详细介绍如何封装一个Vue组件，并将其发布至NPM，以便其他开发者能够方便地通过包管理工具引入和使用这些组件。 ...
vue3+webpack+vue-router封装路由
05-21
vue3+webpack+vue-router封装路由，资源内容包含了vue3+webpack+vue-router，并且代码对vue-router路由进行了封装，资源下载下来之后项目代码需要先：npm install，之后就可以运行启动项目了，代码结构清晰，没有...
Vue组件库发布到npm详解
11-26
制作了一套自己的组件库，并发布到npm上，项目代码见https://github.com/hamger/hg-vcomponents 前期准备 有一个npm账号 安装了vue-cli 搭建项目 vue init webpack hg-vcomponents cd hg-vcomponents cnpm ...
vue3+webpack+vue-router路由封装+axios封装+vuex封装
05-23
下载资源中包括了vue3+webpack+vue-router路由封装+axios封装+vuex封装的相关代码，分别对vue-router路由进行了封装，对axios进行了封装，对vuex进行了封装，资源代码需要先：npm install 安装下依赖组件之后就可以...
webpack基本使用5
dear_mRZhou_的博客
08-25 803
本章节我们学习一下webpack中的babel-polyfill，libraryTarget和library，purgecss-webpack-plugin，CDN。 babel-polyfill 有些浏览器对一些es6的新特性不支持，例如promise在ie浏览器中，使用babel-polyfill就可以解决这个问题。 安装： cnpm i babel-polyfill -S 使用方式，在入口文件引入： //第一种 import "babel-polyfill"; //第二种 require('b
基于webpack创建plugin并发布npm包
最新发布
weixin_58017233的博客
07-11 831
基于webpack发布npm包！！！
Webpack5梳理
Caristop3_走在前端这条大道上
11-29 403
1. 工程化发展 npm scripts -> Grunt -> Gulp -> Fis3 -> webpack(RollUp&vite) 2. 起步webpack 1. webpack已经发布到5了，但整体配置思路没变化，新建空文件夹 "执行npm init -y" 初始化npm info 生成package.json文件 "npm i webpack webpack-cli -D" 开箱情况下： webpack默认入口文件读取当前目录下的src
webpack5 之 基础构建打包
weixin_43845137的博客
08-30 517
webpack5 之 基础构建打包
webpack5 打包工具 详解
共勉
05-29 1445
webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。 在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。
Webpack5 核心打包流程概览
发果叁
10-08 1225
webpack在前端工程领域起到了中流砥柱的作用，理解它的内部实现机制会对你的工程建设提供很大的帮助（不论是定制功能还是优化打包）。下面我们基于 webpack5 源码结构，对整个打包流程进行简单梳理并进行实现，便与思考和理解每个阶段所做的事情，为今后扩展和定制工程化能力打下基础。整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
自己开发的vue组件打包并发布到npm，并在项目中使用
qq_47530527的博客
10-27 4114
自己开发的vue组件打包并发布到npm，并在项目中使用
前端开发必备技能知识笔记-自定义工具函数库，并上传npm
花姐夫JUN的博客
06-30 1001
前言项目中我们常常需要编写一些函数，用来处理 一些简单的逻辑，不同的项目中用到的工具函数大部门都是一样的，所以每个项目都要重复的添加这些函数，为了减少这部分重复劳动，我们可以创建一个工具函数库将复用率比较高的函数添加到这个库里面，还可以上传到npm，简化添加使用的步骤。1、创建工具函数库项目自己创建一个项目文件夹“user-defined-utils”（文件夹名称不要用中文的，不然后面的操作会报错...
Vue组件封装与NPM发布实战指南
这篇教程主要指导开发者如何将自定义的Vue组件封装并发布到NPM，以便于其他开发者在他们的项目中便捷地引用和使用这些组件。遵循Vue插件开发规范，我们可以创建一个支持`import`、`require`或直接通过`script`标签...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值