This is the second day of my participation in Gwen Challenge

Attached is the project address: Personal Component Library

Setting up the operating environment

The project structure

There is no scaffolding to create the Vue project, the project structure is simple, it is just a demo, the integration function can configure webpack step by step, along with a review of Webpack

The main file

  • Build: Wenpack development configuration file
  • Dist: The packaged output file, which is also referenced when using the library
  • Example: Run the debug project locally
  • Libs: Component libraries

Initialize the project

  • Create a package.json file
npm init 
Copy the code
  "name": "vue-manage-component".// NPM package name
  "version": "0.0.3".// Package version number
  "description": ""./ / description
  "main": "dist/index.js".// Focus on which file is imported when others import
Copy the code

Configuration Webpack

  • The various loaders compiled by various files will not be detailed, and you can download what you want. Here are a few differences between development and production environment

The development environment

  • newwebpack.dev.config.js

Import and export files

  • This entry file is the place to view the effects of local debugging
 entry: {
    main: path.resolve(__dirname, '.. / '.'example/main.js'),},output: {
    path: path.resolve(__dirname, '.. /dist'),
    filename: '[name].[hash:8].bundle.js'.chunkFilename: '[name].[chunkhash:8].js',},Copy the code

HTML template

/ / download
// npm install html-webpack-plugin -D

/ / use
const HtmlWebapckPlugin =require('html-webpack-plugin') 
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, '.. /public/index.html'), // The path to the template HTML
      chunks: ['libs'.'vendor'.'resource'.'main'],}),],Copy the code

devServer

devServer: {
    open: true.// Automatically open
    port: 3000./ / port
    hot: true./ / hot update
  }
Copy the code

The production environment

Import and export files

  • The entry file here is a library for others to use
 entry: path.resolve(__dirname, '.. / '.'libs/index.js'),
  output: {
    path: path.resolve(__dirname, '.. / '.'dist'),
    filename: 'index.js'.library: 'vue-manage-component'.libraryTarget: 'umd'.// Compatible with the use of import mode, import script tag, etc
    umdNamedDefine: true,},Copy the code

Package. The json configuration

Debugging commands

{
  "dev": "webpack server --config ./build/webpack.dev.config.js --hot --inline"."build": "webpack --config ./build/webpack.prod.config.js"
}
Copy the code

To realize library

Write a VUe-based component library here

Creating a component

Here we write a simple vue component printmsg.vue

</div> </template> <script> export default {name: 'print- MSG ',} </script>Copy the code

export

  • A library is made up of many components. Create oneindex.jsFile to export written components
  • You can export this component as a plug-in or as a normal component
import PrintMsg from './PrintMsg.vue'

export default {
  install(Vue) {
    Vue.component('print-msg', PrintMsg)
     / /...
     / /...
     // Multiple components continue to export}},export { PrintMsg }// Export multiple
Copy the code

Debug library

Since it’s a VUE based library, think of it as a VUE project

Create the run entry file

  • newmain.js
import Vue from 'vue'

import App from './App.vue'

// import VueManageComponent from '.. /libs/index' calls native component code written
 import VueManageComponent from '.. /dist'		// Call the compiled code for these components

// import VueManageComponent from 'vue-manage-component' // Use published packages
// // // console.log(VueManageComponent)
 Vue.use(VueManageComponent) // Test it as a plugin

new Vue({
  el: '#app'.render: (h) = > h(App),
})

Copy the code
  • newApppp.vue
<template> <div> Run vue <print-msg></print-msg> </div> </template> <script> import {PrintMsg} from Export default {components: {'print-msg': PrintMsg,},} </script>Copy the code

The effect

Release NPM package

  • Log in to NPM and sign up if you don’t have an account

Local land

  • Once you have the NPM account, run it in the projectnpm loginLog in to your account

Post to NPM website

  • First,npm run buildCompile the code
  • npm publishNPM: NPM: NPM: NPM: NPM: NPM: NPM: NPM: NPM: NPM: NPM: NPM: NPM: NPM: NPM: NPM

conclusion

The paths of several configuration entry files and output files need to be taken care of, otherwise the incorrect reference path will definitely lead to various errors

  • NPM run dev goes to the example/main.js file, which runs the entire project, mainly for debugging purposes

  • NPM run build goes into the libs/index.js file and packages the liBS file instead of the whole project. Once the packaging is complete, output dist/index.js, which is the file the user needs.

  • In the package.json file, there is a main property, which is the file you want someone to import when they import your package, in this case the dist/index.js file after compiling the LIBS