In my previous work, components were all encapsulated in the project. Recently, I always wanted to make a component to be published on NPM and used by everyone, so I made it by referring to some articles. Vue-cli-service build –target lib. At the end of the article, I will explain the source code under the lib customization output umD mode. Min.js does not need to output redundant files

My project address

  • Github.com/HeJinG90/al… Welcome star, an image upload component that uploads images to aliOSS
  • Object storage OSS official website help.aliyun.com/document_de… You can see a wave

I. Technology stack

vuecli3

Second, the effect demonstration

Create a project

Create an initialization project with Vuecli3. See the website for details. Cli.vuejs.org/zh/guide/cr…

Fourth, adjust the project structure

We need a folder for components, a folder for example, and modify the directory as follows.

  • Examples // Change the SRC directory to examples to show examples
  • Packages // Add Packages for writing storage components, as shown in my project structure

Configure the project to support the new directory structure

The SRC directory was renamed to examples, causing the project to fail to run

  • Note: Vue.config. js is an optional configuration file that will be automatically loaded by @vue/cli-service if it exists in the root directory of the project (the same as package.json).

  • Reconfigure the entry and modify the Pages option in the configuration

  • The new Vue CLI supports building a multi-page application using the Pages option in vue.config.js.

  • Here use pages to modify the entry to examples and set CSS not to be extracted separately.

module.exports = {
  // Change the SRC directory to examples
  pages: {
    index: {
      entry: 'examples/main.js'.template: 'public/index.html'.filename: 'index.html'}},css: { extract: false}}Copy the code

Write components

Now that we’ve configured support for the new directory schema, let’s try writing components. Let’s take a small plug-in that has been published to NPM as an example. Specific code can see my project source code, I roughly say the idea:

  • In the Packages directory, all individual components are stored as folders, so create a folder called UploadPictures
  • Create a SRC folder under uploadPictures to store the component’s source code
  • Create an index.js file in the/uploadPictures folder to provide references to the component.
  • Modify/packages/uploadpictures/index. The js file, provide reference.
  • Create a unified entry file for components /packages/index.js, export components, which is similar to elementui and can also be modified to import on demand.
  • Tip: Of course my component has message and Loading components that reference elementui framework. Thanks to the decoupling of team component framework, I extracted them and used them. Loading message utils three folders were created.
  • And then there’s the quote
import Vue from 'vue'
import Loading from '.. /.. /loading/index'
Vue.use(Loading)
import Message from '.. /.. /message/index'
Vue.prototype.$message = Message;
import '.. /.. /loading/src/loading.css';
import '.. /.. /message/src/message.css';
Copy the code

Write sample code

Write in the examples folder

<template> <div id="app"> <uploadPictures @change = "getimg" :imgs = imgs :ossconfig = ossconfig :quality = 1 :dir = dir :size = 200 :num = 3 ></uploadPictures> </div> </template> <script> import Vue from 'Vue' import uploadPictures  from '.. Use (uploadPictures) export default {name: uploadPictures export default {name: uploadPictures 'app', data(){return{imgs:[], ossConfig :{accessKeyId: ", accessKeySecret: ", bucket: ", region:" 'oss-CN-beijing'}, dir:'/images/' // directory folder}}, methods:{getimg(e){this.imgs = e; }, } } </script>Copy the code

Publish to NPM for direct reference in projects

  • Now that we have a complete component developed, we are ready to release it to NPM for later use.

  • Add a command to compile as a library in package.json

  • Tip: In library mode, Vue is external, which means that even if Vue is introduced in code, the packaged file does not contain Vue.

  • Vue Cli3 build target: library

  • The official document: cli.vuejs.org/zh/guide/bu…

  • Let’s add a new command NPM run lib to scripts

–target: build target, default is app. Here change to lib to enable library mode. –dest: output directory, default dist. So let’s change this to lib

  • The last parameter is the entry file, which defaults to SRC/app.vue. Here we specify compile packages/ component library directory.
"scripts": {
    "lib": "vue-cli-service build --target lib --name alioss-uploadpictures --dest lib ./packages/index.js"
}
Copy the code

Execute the compile library command

$ yarn lib
Copy the code
  • It’s a packed file
  • In package.json, the main field only needs to be in umd.min.js, so I’m going to go to the source code to modify the generated extra files. Go to the node_modules folder and find the @vue/ CLI-service dependency package.
  • So let’s go to index.js and change it,
  • Then we go to resolvelibconfig.js to modify the following code, of course, read the source code is not possible, there is a need to look at the source code, change the good.
  • The end result, of course, is that only two files are generated, and since sourcemap is enabled by default, a corresponding.map file is generated

There are a few important fields in the configuration package.json file published to NPM that I’ll mention

  • Name: package name, which is unique. Search for the name on the NPM website, or change the name if it exists.
  • Version: indicates the version number. The version number must be changed each time you release data to NPM. The version number cannot be the same as the historical version number.
  • Main: entry file, this field should point to our final compiled package file.
  • Private: indicates whether to publish to NPM. Change the value to false
  • License: Open source agreement
  • You can refer to my package.json file, and I’ll focus on the peerDependencies property. This property tells you which package the component depends on. If you need to add a dependency to your dependencies, you need to add it to your dependencies file. If you need to add a dependency to your dependencies, you need to add it to your dependencies file.
  • One more point, according to vuecli’s website: When building a library or Web Component using the Vue CLI, it is recommended to pass useBuiltIns to @vue/babel-preset-env: False option. This ensures that your libraries or components do not contain unnecessary polyfills. In general, packing polyfills should be the responsibility of the application that ultimately uses your library. So we set babel.config.js, which will reduce the size of the generated file.
module.exports = {
  presets: [['@vue/cli-plugin-babel/preset', {
      "useBuiltIns": false}}]]Copy the code

Add the.npmignore file to ignore the publishing file

  • When we publish to NPM, only the compiled lib, examples, package.json, readme. md folders need to be published. So we need to set ignore directories and files.
# ignore directory packages/ public/ # ignore specified file vue.config.js babel.config.jsCopy the code

Log in to the NPM

First of all, you need to register an account on the official website of NPM. This is not the focus of this article.

$ npm login
Copy the code

Published to the NPM

Execute the publish command to publish the component to NPM

$ npm publish
Copy the code

Release success

After a few minutes, you can search for it on NPM’s official website. Below is alioss- UploadPictures just submitted

Use the newly released component library

The installation

yarn add alioss-uploadpictures
Copy the code

use

import Vue from 'vue'
import uploadPictures from 'alioss-uploadpictures'
Vue.use(uploadPictures)
Copy the code

example

Ix. Project Address

Github address: github.com/HeJinG90/al…

NPM address: www.npmjs.com/package/ali…