【转】从零开始开发一个vue组件打包并发布到npm (把vue组件打包成一个可以直接引用的js文件)

自己写的组件 有的也挺好的,为了方便以后用自己再用或者给别人用,把组件打包发布到npm是最好不过了,本次打包支持 支持正常的组件调用方式,也支持Vue.use, 也可以直接引用打包好的js文件, 配合vue.js 就不需要webpakc这种构建工具了,可以直接在页面内使用,下面以 ‘yyl-npm-practice’ 这个包为例

第一步:使用 vue init webpack-simple yyl-npm-practice   初始化项目

提示: 不要用 vue init webpack npm-practice 初始化项目,因为我们就开发个组件,不需要那么多配置,配置多了修改起来也麻烦,webpack-simple足够了。

初始完项目,按照提示输入项目信息即可,然后 npm install , npm run dev 让项目跑起来,如下图:

第二步:修改文件目录

1.在src目录下新建components文件夹,然后在此文件夹下建立Main.vue文件

  Main.vue 名字也可以是其他,我们写的这个组件就是放在该文件里面,之前的App.vue是用于本地开发,测试用的入口文件,也就是用于 npm run dev  的入口文件。

2.在webpack.config.js同级目录(也是该组件的根目录)下新建 index.js文件, index.js是把Main.vue文件暴露出去的出口。

修改完之后的文件目录如下,标红的就是新增的内容:

第三步:修改文件内容,配置

1.Main.vue内容如下(注意name):

<template>
  <div class="container">
    <div>{{msg}}</div>
    <div>{{propData}}</div>
  </div>
</template>

<script>
export default {
  name: ‘yyl-npm-practice‘,
  data () {
    return {
      msg: ‘Welcome to Your Vue.js App‘
    }
  },
  props: {
      propData: {
          type: String,
          default: ‘我是默认值‘
      }
  }
}
</script>

<style lang="scss">
.container{
    text-align: center;
}
</style>

2.App.vue内容如下:

<template>
  <div>
    <Main :propData=‘initData‘/>
  </div>
</template>

<script>
import Main from ‘./components/Main‘
export default {
    data(){
      return {
        initData: ‘hello 你好‘
      }
    },
    components:{
      Main
    }
}
</script>

<style>

</style>

3.index.js内容如下:

 

import Main from ‘./src/components/Main‘

// 这一步判断window.Vue是否存在,因为直接引用vue.min.js, 它会把Vue绑到Window上,我们直接引用打包好的js才能正常跑起来。

if (typeof window !== ‘undefined‘ && window.Vue) {

window.Vue.component(‘yyl-npm-practice‘, Main)

}

//这样就可以使用Vue.use进行全局安装了。

Main.install = function(Vue){

Vue.component(Main.name, Main)

}

export default Main

------ start 2019-05-06新增index.js内容改完如下, 因为使用 window.Vue.component(‘yyl-npm-practice‘, Main) 的时候 外部引用的时候 有可能会覆盖该组件,导致组件无法正常使用;使用下面的的定义方式后, 在.vue 环境下 使用方式不变, 在只引用 ys-expression.js 环境下 需在 new Vue() 之前加 window[‘ys-expression‘].default.install();

import Main from ‘./src/component/Main‘
import _Vue from ‘vue‘

Main.install = Vue => {
if (!Vue) {
window.Vue = Vue = _Vue
}
Vue.component(Main.name, Main)
}
export default Main;

------ end 2019-05-06新增

4.修改package.json

package.json需要修改private字段(private是true的时候不能发布到npm,需设置成false); 并增加main字段, main字段是require方法可以通过这个配置找到入口文件,这输入模块加载规范,具体可以参考  这里, 主要内内容截图如下:

修改完package.json如下,标红的就是新增和改变的属性。

5.修改 webpack.config.js

其实就是修改entry 和output,截图如下:

说明:入口会根据开发环境 ,生产环境切换, main.js 是npm run dev 的入口,就是App.vue, 用于调试/测试我们开发的组件;   index.js是Main.vue, 就是我们开发的组件,我们打包到生产环境打包就只是单纯的 yyl-npm-practice 组件

6.修改index.html的js引用路径,因为我们修改了output 的 filename,所以引用文件的名字也得变。



到此组件就开发完了,打包下看看, npm run build dist下生成了俩文件,如下:

这个.map文件怎么回事,其实就是这段代码:

生产环境的时候, 我们就不调试了,也不想要这个.map文件,那就先把这个 devtool删了,然后放在这里,看下图,只要在开发环境的时候才启用这个调试,

把dist目录下的俩文件删除,再npm run build 就不会产生.map文件了。

npm run dev 让项目跑起来,我们在App.vue里面调用该组件,并做测试,调试。


第四步: 发布到npm

1. 去 npm 官网注册个账号 https://www.npmjs.com/

2.在该组件根目录下的终端(就是 平常输入 npm run dev的地方),运行npm login,会提示输入个人信息,Email是发布成功后,自动给这个邮箱发送一个邮件,通知发布成功,输入完,登录成功。

3.最后就可以发布了, npm publish, 如下,发布成功(每次发布的时候packa.json 里面的 version不能一样,不然不能发布出去,手动改下版本就行)

去自己的npm上点击Packages ,就能看到发布的包

包的具体信息如下:

大家最好在readme 里面写上组件的使用方法, 说明等等,方便你我他。

使用方法 :

1.组件内部使用

html:

  <Main/>

js:

import Main from ‘yyl-npm-practice‘

components: {

Main

}

2. main.js 全局安装:

import Main from ‘yyl-npm-practice‘

Vue.use(Main)

然后在其他.vue文件里面,直接使用组件 <yyl-npm-practice/> 即可

3.直接引用打包后的 yyl-npm-practice.js

这种方式就不需要webpack这类的构建工具,跟jquery的方式差不多,可以直接页面引用,使用方法示例如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
</head>
<body>
<div id="app">
  <yyl-npm-practice :propData="propData"></yyl-npm-practice>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="./dist/yyl-npm-practice.js"></script>
<script>
  new Vue({
    el: ‘#app‘,
    data: function() {
      return {
        propData: ‘11111111111111111111‘
      }
    },
    methods: {
    }
  })
</script>
</body>
</html>


采坑记录:

1.在webpack.config.js里设置 resolve(比如 设置@做为根目录 ), 开发环境没问题,生产环境就用不了了,所以大家就用平常的相对路径类吧,虽然麻烦了点。

2.图片生产环境不能用,解决方法可以把图片转成base64, 可以用这个 在线图片转base64,或者把图片放在网上,引用图片的网上资源路径。

3.字体图标在生产环境也用不了,如果用到了字体图标,就别把字体图标的资源打包进去了,引用该组件的时候,需要再引用字体图标的资源。

start ====> 2019-04-17更新

    后来发现其实图片和字体图标也可一起打包到js里面,需要用到 url-loader 把limit参数设置大点就行,这样就可以把图片,字体图标也都打包到js里面了,这样使用的时候,就不用单独引用这些静态资源了, 代码如下:

  {
        test: /\.(png|jpg|gif|svg)$/,
        loader: ‘url-loader‘,
        options: {
          name: ‘[name].[ext]?[hash]‘,
          limit: 99999
        }
      },
      {
        test: /\.(svg|ttf|eot|woff|woff2)$/,
        loader: ‘url-loader‘,
        options:{
         name:‘[name].[ext]‘,
            limit: 9999999
        }
      }

end ====> 2019-04-17更新

想看源码的话,只要在自己项目里 npm install  yyl-npm-practice 就可以在 node_modules 下找到了。

原文地址:https://www.cnblogs.com/h2zZhou/p/12336222.html

时间: 2024-11-08 23:46:22

【转】从零开始开发一个vue组件打包并发布到npm (把vue组件打包成一个可以直接引用的js文件)的相关文章

vue封装插件并发布到npm上

vue封装插件并发布到npm上 项目初始化 首先,要创建项目,封装vue的插件用webpack-simple很合适,vue init webpack-simple 项目名称此命令创建我们的项目的目录,创建文件夹和文件,最后结构是这样的  然后根据需求,实现具体功能,这里我封装了一个轮播图组件mini-sliders,主要功能写在lib/slider.vue组件中 功能写好后,我们要写index.js来封装组件 import VueComment from './VueComment.vue' c

从零开始封装React UI 组件库并发布到NPM

1.新建目录wui (1)进入到 wui 目录 执行 npm init 命令初始化项目.更具提示信息填充将会生成的 package.json 文件. (2)新建 webpack.config.js 打包文件. (3)新建 README.md 项目说明文件. (4)新建 .gitignore 项目忽略文件. (5)安装webpack 用于编译 JavaScript 模块. npm install webpack webpack-cli --save-dev package.json 字段含义解释:

vue封装组件,类似elementUI组件库打包发布到npm上

封装vue组件库的两种方法和形式: 一:是建立一个webpack-simple 项目 二:是在通过vue-cli脚手架建立webpack vue项目,这种项目有点冗余,可是我们对这种项目最熟悉 下面分别介绍两种用法: 一: 1.首先先建立一个vue项目: 通过vue init webpack-simple,新建项目目录如下: 箭头指的是在项目打包后产生的文件(打包命令npm run build ) 2.在src下新建一个目录用来存放组件源码: 然后写封装的组件,比如radios/radio.vu

将 Vue 组件库发布到 npm

制作了一套自己的组件库,并发布到npm上,项目代码见 GitHub . 前期准备 有一个npm账号 安装了vue-cli 搭建项目 vue init webpack hg-vcomponents cd hg-vcomponents cnpm install 目录结构 - vue-flag-list + build + dist // 存放发布到npm的代码 - src - components // 存放组件源代码 和 README.md - arrows arrows.vue README.m

仿探探卡片滑动vue封装并发布到npm

项目初始化使用 webpack-simple 方式比较方便和容易配置,原来的方式各种坑慎入 vue init webpack-simple vue-card-slide cd vue-card-slide npm run dev 项目结构如下所示 更改webpack.config.js配置 entry: './src/lib/index.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '', filename

使用vue来开发一个下拉菜单组件(1)

一.新建demo工程 vue init webpack-simple demo 添加src/mixins/emitter.js文件(见前几篇博文) 安装font-awesome字体库: cnpm install font-awesome --save 配置webpack.config.js,引入字体文件: { test: /\.(otf|eot|ttf|woff|woff2)$/, loader: 'file-loader' } 在src/main.js中引入font-awesome: impo

从零开始:一个正式的vue+webpack项目的目录结构是怎么形成的

每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 如何从零开始一个vue+webpack前端工程工作流的搭建,首先我们先从项目的目录结构入手.一个持续可发展,不断加入新功能,方便后期维护的目录结构究竟是长什么样子的?接下来闰土大叔带你们一起手摸手学起来. 初级前端初始化目录篇 项目伊始,我们肯定是先在terminal终端命令行(以下简称terminal)cd进入<project name>根目录,然后输入 npm init 初始化

用vue开发一个app(3,三天的成果)

前言 一个vue的demo 源码说明 项目目录说明 . |-- config // 项目开发环境配置 | |-- index.js // 项目打包部署配置 |-- src // 源码目录 | |-- components // 公共组件 | |-- header.vue // 页面头部公共组件 | |-- footer.vue // 页尾头部公共组件 | |-- index.js // 加载各种公共组件 | |-- config // 路由配置和程序的基本信息配置 | |-- routes.js

【Vue 入门】使用 Vue2 开发一个展示项目列表的应用

前言 一直没有找到一个合适的展示个人项目的模板,所以自己动手使用 Vue 写了一个.该模板基于 Markdown 文件进行配置,只需要按一定规则编写 Markdown 文件,然后使用一个 在线工具 转为 JSON 文件即可.下面是该项目的在线地址和源码.本文主要记录一下项目中用到的相关知识. 在线演示    源码 效果 程序最终的效果如下图所示: 整个项目只包含两个组件:项目介绍 和 侧边导航,逻辑比较简单,十分适合入门. 环境配置 这里我们使用 Gulp 和 Webpack 用作项目构建工具.