Prefacio
¿Por qué queremos escribir un componente para cargarlo en el npmespejo? Debemos habernos encontrado con un escenario así. Hay muchos lugares en el proyecto que son similares a una función determinada. Lo que piensas es definitivamente encapsular la función en un Componentcomponente, lo cual es conveniente para nosotros llamar más tarde. Pero después de un tiempo, el tuyo Leaderte pidió que desarrollaras otro proyecto. Como resultado, en qué proyecto viste una función similar, ¿qué harías entonces? También puedes usar Ctrl + c + vDafa y tomar el paquete del proyecto anterior. Código, pero si los requisitos cambian, debe mantener dos conjuntos de códigos de proyecto, o incluso más proyectos en el futuro ... Luego puede encapsular una función y cargarla en la intranet de su empresa npm(o su propia cuenta), por lo que cada vez que encuentre un función similar, puede npm installinstalarlo e importimportarlo directamente , y puede cambiar un código cuando cambien los requisitos.
Entorno de configuración
El autor aquí está usando la Webpackconfiguración (un poco Vue-clicomplicado , no te preocupes), o puedes instalar una versión simple, que tiene una Webpackconfiguración expuesta (tienes que modificar tu propia configuración). Configuremos el entorno de componentes empaquetados. Generalmente, bibliotecas de componentes de desarrollo se se utiliza umdformato que admita Es Module, CommonJs, AMDtres tipos de formas de introducir el uso, sobre todo Webpacken el libraryy libraryTarget, si usted no entiende vistazo a este out.libraryTarget detallada de la propiedad webpack
Mi versión de Webpack es 4. Es mejor seguir el número de versión del complemento en este capítulo para instalarlo y evitar problemas de compatibilidad de versiones.
Estructura del proyecto
|- /node_modules
|- /src
|- Tag.vue
|- main.js
|- index.html
|- webpack.config.js
|- package.json
Inicializar 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
.cssarchivo de configuración y uso de estilo - file-loader configura el uso de fuentes e imágenes especiales
- vue-loader maneja
.vueel sufijo del archivo - vue usa la sintaxis de Vue
- vue-template-compiler procesa la sintaxis de la plantilla en
.vuearchivostemplate
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>
El entorno básico anterior está configurado, puede npx webpackejecutarlo en la terminal .
Componentes del paquete
Aquí solo hago un ejemplo, el código no es tan complicado de escribir, todos saben cómo empaquetarlo y usarlo, y el paquete específico depende de las necesidades de su empresa ~. El autor aquí usa Element Uicomponentes como ejemplo, creo que la mayoría de las pequeñas empresas asociadas también lo están usando Element Ui. Si nuestro proyecto tiene las siguientes funciones similares, se puede encapsular por separado.
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
El webpack.config.jsinterior outputmodificado de la siguiente manera
output: {
filename: "index.js",
library: "Modal",
libraryTarget: "umd"
}
Una vez que haya configurado se puede utilizar el npx webpackpaquete, se puede ver que es un distdirectorio, la presencia de un directorio index.js, el archivo es nuestro paquete de Tag.vuearchivos, puede introducirlo a su proyecto, llame al soporte de archivos Es Module, CommonJs, AMDtres tipos de Manera de presentar.
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)
})
Publicado por Npm
Si no tiene una npmcuenta, vaya al sitio web oficial para registrar una npmcuenta aquí.
Crear una nueva carpeta de proyecto de paquete de lanzamiento
Ejecutar en la terminal para realizar el archivo npm init -yinicial package.json. La información principal es el nombre y los campos principales. El primero es el nombre del paquete (es decir, npm instal xxx), y el segundo es el archivo que hemos empaquetado Tag. Por defecto , mainencontraremos el archivo de entrada.
Nota: El nombre del paquete no puede contener letras mayúsculas, el nombre del paquete no puede contener letras mayúsculas y el nombre del paquete no puede contener letras mayúsculas. Las cosas importantes se dicen tres veces
{
"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"
}
Si el espejo de Taobao se ha cambiado antes, primero cámbielo y ejecute el siguiente comando
npm config set registry http://registry.npmjs.org
Después de registrar, ejecutar npm login, cumplir con su orden 用户名, 密码,邮箱
Realice la npm publishliberación y luego espere a que se complete la barra de progreso.
Solucione algunos errores comunes de publicación
Esto se debe a que el espejo está configurado en el espejo Taobao, simplemente regréselo
no_perms Private mode enable, only admin can publish this module
Generalmente no ha iniciado sesión, vuelva npm logina iniciar sesión, busque
npm publish failed put 500 unexpected status code 401
Si el nombre del paquete está ocupado, simplemente cambie el nombre del paquete. Es mejor verificar si algún nombre del paquete está ocupado en el sitio web oficial y luego cambiarle el nombre.
npm ERR! you do not have permission to publish “your module name”. Are you logged in as the correct user?
El correo electrónico no está verificado, vaya al sitio web oficial para verificar el correo electrónico
you must verify your email before publishing a new package
npm instalar y usar
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)
})
Hasta ahora, hemos completado la carga y descarga del paquete de un componente, para que podamos npm installinstalarlo directamente cuando cada proyecto lo necesite , y cuando las necesidades cambien, solo necesitamos cambiar un archivo y luego publicarlo nuevamente. ¿Es muy conveniente?
Introducción al enlace externo
No lo cargamos npm, lo usamos directamente en forma de enlaces externos, echemos un vistazo a continuación.
importar
<template>
<div class="Tag">
<TagEl/>
</div>
</template>
<script>
import TagEl from "./index"
export default {
name: 'Tag',
data() {
return {
}
},
components: {
TagEl
},
}
</script>
<style scoped>
</style>
En lo anterior example, vemos que el index.jsarchivo se importa directamente y el componente está registrado, y se puede usar directamente.
introducción al guion
<!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>
En lo anterior example, use directamente la scriptetiqueta para importarla, y se puede usar después del registro. Entonces, ¿cómo sabemos que su nombre es Etiqueta? Debe especificar el nombre Nombre cuando utilice el componente empaquetado.
export default {
name: "Tag"
}
agradecer
Gracias por leer este artículo. Espero que te sea útil. Si tienes alguna pregunta, corrígeme.
Soy un hombre rana (✿◡‿◡), si crees que está bien, dale me gusta ❤.
Los amigos interesados pueden unirse [grupo de intercambio de círculo de entretenimiento de front-end] Invitamos a todos a comunicarse y discutir
Escribir no es fácil, "Me gusta" + "Viendo" + " Volver a publicar " Gracias por su apoyo❤
Buenos artículos en el pasado
"Comparta 12 cargadores de uso común en Webpack"
"Hable sobre qué son CommonJs y Es Module y su diferencia"
"Mapa que lo lleva a comprender fácilmente la estructura de datos"
"¿Conoce todos los consejos de JavaScript que se utilizan en estos trabajos?" 》
"¿Realmente comprende las características de ES6? 》
referencia
https://blog.csdn.net/weixin_43606158/article/details/1068086