Preface
Why do we want to write a component to upload to the npmmirror? We must have encountered such a scenario. There are many places in the project that are similar to a certain function. What you think is definitely to encapsulate the function into a Componentcomponent, which is convenient for us to call later. But after a while, yours Leaderasked you to develop another project. As a result, in which project you saw a similar function, what would you do then? You can also use Ctrl + c + vDafa and take the package from the previous project. Code, but if the requirements change, you have to maintain two sets of project codes, or even more projects in the future... Then you can encapsulate a function and upload it to your company's intranet npm(or your own account), so Every time you encounter a similar function, you can npm installinstall it and importimport it directly , and you can change a code when the requirements change.
Configuration Environment
The author here is using Webpackconfiguration (a bit of a dish, don’t mind), or you can install a Vue-clisimple version, which has exposed Webpackconfiguration (you have to modify your own configuration). Let’s configure the packaged component environment. Generally, development component libraries are is used umdformat that supports Es Module, CommonJs, AMDthree kinds of ways to introduce the use, mainly Webpackin the libraryand libraryTarget, if you do not understand look at this Detailed out.libraryTarget of property webpack
My Webpack version is 4. It is best to follow the plug-in version number in this chapter to install it to avoid version compatibility issues.
Project structure
|- /node_modules
|- /src
|- Tag.vue
|- main.js
|- index.html
|- webpack.config.js
|- package.json
Initialize Package.json
npm init -y
安装Webpack && Loader && Plugin
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 configuration
.cssfile and style usage - file-loader configures the use of special fonts and pictures
- vue-loader handles
.vuefile suffix - vue uses Vue syntax
- vue-template-compiler processes template syntax in
.vuefilestemplate
webpack.config.js
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"
})
]
}
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>
The above basic environment is set up, you can npx webpackrun it in the terminal .
Package components
I only make an example here, the code is not so complicated to write, everyone knows how to package it and use it, and the specific package depends on your company's needs~. The author here uses Element Uicomponents as an example, I believe most small partner companies are also using it Element Ui. If our project has the following similar functions, it can be encapsulated separately.
main.js
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
Tag.vue
<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
The webpack.config.jsinside outputmodified as follows
output: {
filename: "index.js",
library: "Modal",
libraryTarget: "umd"
}
Once you've configured you can use the npx webpackpackage, you can see there is a distdirectory, the presence of a directory index.js, the file is our package of Tag.vuefiles, you can introduce it to your project, call the file support Es Module, CommonJs, AMDthree kinds of Way to introduce.
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)
})
Published by Npm
If you don’t have an npmaccount, go to the official website to register an npmaccount here
Create a new release package project folder
Execute in the terminal to perform the npm init -yinitial package.jsonfile. The main information is the name and main fields. The former is the name of the package (that is, npm instal xxx), and the latter is the file that we have packaged Tag. By default, mainwe will find the entry file.
Note: The package name cannot contain capital letters, the package name cannot contain capital letters, and the package name cannot contain capital letters. The important things are said three times
{
"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"
}
If the Taobao mirror has been changed before, first change it back and execute the following command
npm config set registry http://registry.npmjs.org
After registering, execute npm login, fill your order 用户名, 密码,邮箱
Perform the npm publishrelease, and then wait for the progress bar to complete.
Sort out some common posting errors
This is because the mirror is set to Taobao mirror, just set it back
no_perms Private mode enable, only admin can publish this module
Generally not logged in, log in again look npm loginto
npm publish failed put 500 unexpected status code 401
If the package name is occupied, just change the package name. It is best to check on the official website to see if any package name is occupied, and then rename it
npm ERR! you do not have permission to publish “your module name”. Are you logged in as the correct user?
The email is not verified, go to the official website to verify the email
you must verify your email before publishing a new package
npm install and use
cnpm i custom-tag-waren -D
main.js
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)
})
So far, we have completed the package upload and download of a component, so that we can npm installinstall it directly when each project needs it, and when the needs change, we only need to change one file and then publish it again. Is it very convenient?
External link introduction
We don’t upload npmit, we use it directly in the form of external links, let’s take a look below
import
<template>
<div class="Tag">
<TagEl/>
</div>
</template>
<script>
import TagEl from "./index"
export default {
name: 'Tag',
data() {
return {
}
},
components: {
TagEl
},
}
</script>
<style scoped>
</style>
In the above example, we see that the index.jsfile is directly imported and the component is registered, and it can be used directly.
script introduction
<!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>
In the above example, directly use the scriptlabel to import it, and it can be used after registration. So how do we know that his name is Tag? You must specify the Name name when you use the packaged component.
export default {
name: "Tag"
}
thank
Thank you for reading this article. I hope it will be helpful to you. If you have any questions, please correct me.
I’m a frogman (✿◡‿◡), if you think it’s ok, please like it ❤.
Interested friends can join [Front-end entertainment circle exchange group] Welcome everyone to communicate and discuss
Writing is not easy, "Like" + "Watching" + "Repost" Thank you for your support❤
Good articles in the past
"Share 12 commonly used Loaders in Webpack"
"Talk about what are CommonJs and Es Module and their difference"
"Map that takes you easily to understand the data structure"
"Do you know all the JavaScript tips used in these jobs?" 》
"Do you really understand the features of ES6? 》
reference
https://blog.csdn.net/weixin_43606158/article/details/1068086