关于前端:手把手教你写一个Vue组件发布到npm且可外链引入使用

40次阅读

共计 4993 个字符，预计需要花费 13 分钟才能阅读完成。

咱们为什么要写个组件上传到 npm 镜像上呢，咱们必定遇到过这样一个场景，我的项目中有很多中央与某个性能类似，你想到的必定是把该性能封装成 Component 组件，后续不便咱们调用。然而过了一段时间，你的 Leader 让你去开发另一个我的项目，后果你在哪个我的项目中又看见了相似的性能，你这时会怎么做? 你也能够应用 Ctrl + c + v 大法，拿过去上一个我的项目封装好的代码，然而如果需要有些变动，你得保护两套我的项目的代码，甚至当前更多的我的项目 ….，这时你就能够封装一个性能上传到你们公司内网的 npm 上(或者本人的账号上)，这样每次遇到相似的性能间接 npm install 装置import 导入进来应用就能够，需要有变动时齐全能够改变一处代码。

笔者这里应用的是 Webpack 配置 (有点菜，不要介意)，也能够装置一个Vue-cli 简略版的，它那外面有裸露 Webpack 的配置 (也得批改自行配置)，咱们来配置一下打包组件环境，个别开发组件库都是应用的umd 格局，这种格局反对 Es Module、CommonJs、AMD 三种引入形式应用，次要就是 Webpack 里的 library 和libraryTarget，如果不明确的看这里详解 webpack 的 out.libraryTarget 属性

我这里的 Webpack 版本为 4, 最好跟着本章里的插件版本号进行装置，避免出现版本兼容问题

|- /node_modules
|- /src
   |- Tag.vue
   |- main.js
|- index.html
|- webpack.config.js
|- package.json

npm init -y

cnpm i webpack webpack-cli -D
cnpm i css-loader style-loader -D
cnpm i file-loader -D
cnpm i vue-loader@15.7.0 vue vue-template-compiler -D
cnpm i html-webpack-plugin@3.2.0 -D

css-loader style-loader 配置 .css 文件及款式应用
file-loader 配置非凡字体和图片应用
vue-loader 解决 .vue 文件后缀
vue 应用 Vue 语法
vue-template-compiler 解决 .vue 文件里的 template 模板语法

const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
    mode: "development",
    entry: "./src/main.js",
    output: {filename: "index.js"},
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]  
            },
            {test: /\.(ttf|eot|woff|svg|woff2)/,
                use: "file-loader"
            },
            {
                test: /\.vue$/,
                use: "vue-loader"
            }
        ]
    },
    plugins: [new VueLoaderPlugin(),
        new HtmlWebpackPlugin({template: "./index.html"})
    ]
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</html>

以上咱们根本环境就搭建完啦，能够在终端应用 npx webpack 运行看看哦。

我这里只做一个示例哈，代码就不写那么简单，大家晓得怎么打包应用就行，具体封装成啥样看你们公司需要啦~。笔者这里应用 Element Ui 组件来做一个示例，置信大部分小伙伴公司也在应用Element Ui。如果咱们我的项目中有以下相似的性能就能够独自封装起来。

import Vue from 'vue'
import {Tag} from 'element-ui';
import 'element-ui/lib/theme-chalk/tag.css';
Vue.component(Tag.name, Tag)
export default Tag

<template>
  <div class="Tag">
    {{msg}}
    <el-tag type="success"> 标签二 </el-tag>
  </div>
</template>

<script>
export default {
 name: 'Tag',
  data() {
    return {msg: "hello 蛙人",}
  },
  created() {},
  components: {},
  watch: {},
  methods: {}}
</script>
<style scoped>

</style>

将 webpack.config.js 里的 output 批改为如下

output: {
    filename: "index.js",
    library: "Modal",
    libraryTarget: "umd"
}

配置完之后就能够应用 npx webpack 打包，能够看到有一个 dist 目录，该目录下存在一个 index.js, 这个文件就是咱们封装的Tag.vue 文件, 你能够将它引入到你的我的项目中，进行调用，该文件反对 Es Module、CommonJs、AMD 三种形式引入。

import Vue from 'vue'
import {Tag} from 'element-ui';
import 'element-ui/lib/theme-chalk/tag.css';
Vue.component(Tag.name, Tag)
import CustomTag from "./index" // 打包完的，间接引入进来
new Vue({
    el: "#app",
    render: h => h(CustomTag)
})

如果没有 npm 账号呢，先去官网注册一个 npm 账号这里

在终端执行 npm init -y，进行初始package.json 文件，次要信息就是 name 和 main 字段，前者是这个包的名称 (也就是 npm instal xxx)，后者则是咱们打包好的文件Tag 文件，默认 main 就去找这个入口文件。

留神：包名称不能蕴含大写，包名称不能蕴含大写，包名称不能蕴含大写，重要的事件说三遍

{
  "name": "custom-tag-waren",
  "version": "1.0.0",
  "description": "这是 xxxx",
  "main": "index.js",
  "scripts": {"test": "echo \"Error: no test specified\"&& exit 1"},
  "keywords": [],
  "author": "WaRen",
  "license": "ISC"
}

如果淘宝镜像之前被更改，先改回来执行以下命令

npm config set registry http://registry.npmjs.org

注册完之后，执行 npm login, 顺次填写你的 用户名 、 明码 、 邮箱

执行 npm publish 公布，而后期待进度条实现即可。

这是因为镜像设置成淘宝镜像了，设置回来即可

no_perms Private mode enable, only admin can publish this module

个别是没有登录，从新登录一下 npm login 即可

npm publish failed put 500 unexpected status code 401

包名被占用，改个包名即可，最好在官网查一下是否有包名被占用，之后再重命名

npm ERR! you do not have permission to publish“your module name”. Are you logged in as the correct user?

邮箱未验证，去官网验证一下邮箱

you must verify your email before publishing a new package

cnpm i custom-tag-waren -D

import Vue from 'vue'
import {Tag} from 'element-ui';
import 'element-ui/lib/theme-chalk/tag.css';
import customTagWaren from "custom-tag-waren"  // 下载完引入进来
Vue.component(Tag.name, Tag)
new Vue({
    el: "#app",
    render: h => h(customTagWaren)
})

到此为止就实现了一个组件的打包上传下载，这样咱们在每个我的项目须要的时候间接 npm install 装置就行，当需要改变的时候只改一个文件而后再次公布就行。是不是很不便啦。

咱们也不上传 npm 上，间接应用外链的模式应用，上面咱们来看看

<template>
  <div class="Tag">
    <TagEl/>
  </div>
</template>

<script>
import TagEl from "./index"
export default {
 name: 'Tag',
  data() {return {}
  },
  components: {TagEl},
}
</script>
<style scoped>

</style>

下面 example 中，咱们看到间接引入了 index.js 文件并进行注册组件，间接就能够应用啦。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <Tag/>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
    <script type="text/javascript" src="./dist/index.js"></script>
</body>
<script>
    new Vue({
        el: "#app",
        components: {Tag: Tag.default}
    })
</script>
</html>

下面 example 中，间接应用 script 标签引入进来，也是注册完应用就能够。那么咱们怎么晓得他名字是 Tag，这个你在封装组件的应用，必须指定 Name 名称。

export default {name: "Tag"}

谢谢你读完本篇文章，心愿对你能有所帮忙，如有问题欢送各位斧正。

我是蛙人(✿◡‿◡)，如果感觉写得能够的话，请点个赞吧❤。

感兴趣的小伙伴能够退出前端娱乐圈交换群欢送大家一起来交换探讨

写作不易，「点赞」+「在看」+「转发」 谢谢反对❤

《分享 12 个 Webpack 中罕用的 Loader》

《聊聊什么是 CommonJs 和 Es Module 及它们的区别》

《带你轻松了解数据结构之 Map》

《这些工作中用到的 JavaScript 小技巧你都晓得吗？》

《【倡议珍藏】分享一些工作中罕用的 Git 命令及非凡问题场景怎么解决》

《你真的理解 ES6 中的函数个性么？》

https://blog.csdn.net/weixin_…

正文完

前端

发表至：前端

2021-03-27

0

关于前端:从产品经理的角度如何提升项目的交付质量

关于前端:微信小程序常见网络请求失败问题总结及解决方案

关于前端:一个有意思的方案不借助后台和-JS-只用-CSS-让一个列表编号倒序你会怎么做

关于前端:Twig-模板渲染前端基本使用

关于java:如何解决spring-aop无法代理手动new的对象问题

关于前端:手把手教你写一个Vue组件发布到npm且可外链引入使用

前言

配置环境

我的项目构造

初始化 Package.json

装置 Webpack && Loader && Plugin

webpack.config.js

index.html

封装组件

main.js

Tag.vue

Webpack.config.js

Npm 公布

新建一个公布包我的项目文件夹

整顿一些常见的公布谬误

npm 装置应用

main.js

外链引入

import 引入

script 引入

感激

往期好文

参考

Just My Socks（注册教程内含优惠码）

关于前端:手把手教你写一个Vue组件发布到npm且可外链引入使用

前言

配置环境

我的项目构造

初始化 Package.json

装置 Webpack && Loader && Plugin

webpack.config.js

index.html

封装组件

main.js

Tag.vue

Webpack.config.js

Npm 公布

新建一个公布包我的项目文件夹

整顿一些常见的公布谬误

npm 装置应用

main.js

外链引入

import 引入

script 引入

感激

往期好文

参考

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）