Shulou(Shulou.com)06/01 Report--

This article is about how webpack packages an on-demand vue component library. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Use the general posture of the vue component library in a project

1, through the introduction of import, and in the entry file main.js, use the Vue.use method to complete the global registration of the component, you can use it directly in any single-file component. As follows

Import Vue from "vue" import App from ". / App.vue" import mylib from "mylib" Vue.use (mylib) new Vue ({render: h = > h (App)}). $mount ("# app")

2, the above approach seems to be once and for all, but with the growing of the component library, it will appear that I introduced the entire component library code, but I only used a small part of the components in the current project, but when the project was finally packaged, all the component code in the component library was packaged into the bundle file, affecting the final code volume, which is obviously unreasonable. So there is a way to introduce component libraries on demand, here we refer to the on-demand introduction method of element-ui, as follows.

Next, if you only want to introduce some components, such as Button and Select, you need to write the following in main.js:

Import Vue from 'vue'; import {Button, Select} from' element-ui'; import App from'. / App.vue'; Vue.component (Button.name, Button); Vue.component (Select.name, Select); new Vue ({el:'# app', render: h = > h (App)})

Why can a named import component be introduced on demand? In fact, it is the babel-plugin-component plug-in that helps us complete the transformation. Inside the babel-plugin-component,

Import {Button, Select} from 'element-ui'

Convert to

Var button = require ('element-ui/lib/button') var select = require (' element-ui/lib/select') require ('element-ui/lib/theme-chalk/button/style.css') require (' element-ui/lib/theme-chalk/select/style.css')

The above element-ui is the name of the component library, and theme-chalk is the name of the folder where the component library style is located, both of which can be configured. Button and select are the component names, and lib is the folder where the babel-plugin-component plug-in looks for components by default.

Webpack implements component libraries that can be introduced on demand

First npm init creates the project, because each component is packaged separately, so each component exports a function, and then executes this function when Vue.use () to complete the global registration of the component. The project directory structure is as follows

Components/navbar/navbar.vue {{text}} export default {name: "navbar", props: {text: String}}; .header__all {background-color: # 000000; color: # FFFFFF; display: flex; justify-content: center; align-items: center; height: 50px; width: 100%;} components/navbar/index.jsimport navbar from ". / navbar.vue" Export default function (Vue) {Vue.component (navbar.name,navbar);} src/index.jsimport navbar from ". / components/navbar" function install (Vue) {Vue.use (navbar)} if (window & & window.Vue) {Vue.use (install)} export default install is then packaged using webpack

Step 1: install all the dependencies you need first

Npm I-D webpack webpack-cli babel-loader @ babel/core @ babel/preset-env babel-plugin-component clean-webpack-plugin css-loader mini-css-extract-plugin node-sass postcss postcss-loader autoprefixer cssnano sass-loader terser-webpack-plugin vue-loader vue-template-compiler

Step 2: configure webpack.config.js

Const path = require ('path') const TerserPlugin = require ("terser-webpack-plugin") Const {CleanWebpackPlugin} = require ("clean-webpack-plugin") const {VueLoaderPlugin} = require ('vue-loader') const MiniCssExtractPlugin = require (' mini-css-extract-plugin') module.exports = {mode: 'none', entry: {' navbar':'. / src/components/navbar/index.js', 'navbar.min':'. / src/components/navbar/index.js', 'test-lib':'. / src/index.js' 'test-lib.min':'. / src/index.js'}, output: {path: path.join (_ _ dirname, "/ lib"), filename:'[name] .js', libraryTarget: 'umd', library:' [name]', libraryExport: 'default'}, / / externals: [], optimization: {minimize: true Minimizer: [new TerserPlugin ({test: /\ .min\ .js $/,}),],}, module: {rules: [{test: /\ .vue $/, use: ['vue-loader']}, {test: /\ .css $/, use: [MiniCssExtractPlugin.loader,'css-loader' 'postcss-loader']}, {test: /\ .s [ac] ss$/i, use: [MiniCssExtractPlugin.loader,'css-loader','postcss-loader','sass-loader']}, {test: /\ .js $/, exclude: / node_modules/, use: {loader:' babel-loader' Options: {cacheDirectory: true}]}, plugins: [new VueLoaderPlugin (), new CleanWebpackPlugin (), new MiniCssExtractPlugin ({filename: 'lib-style/ [name] .css'})]}

Step 3: change the main field of package.json and add a packaging command to scripts

"main": ". / lib/test-lib.min.js", "scripts": {"build": "webpack-- config webpack.config.js"}

Step 4: execute the npm run build packaging component library. After success, the project has a lib folder to store the code of the packaged component library. Each file in the lib folder has a corresponding .min file, which is compressed with the terser-webpack-plugin plug-in and cssnano, respectively.

Debug component library

There are two ways to debug a local component library

Create a new test.html, and then use

Vuecli create a new test project, and then link it to the test project through npm link to use

The roughest way to show here is to build a new test.html,npm link. You can try it yourself.

Document new Vue ({el:'# app'})

Test results:

At this stage, at least it shows that there is no big problem with code construction, but the introduction of on-demand features has not been accepted yet. Then we will continue to publish the component library to npm to follow the way element-ui is used in vuecli projects to see how the implementation works.

Npm release steps are very simple, only 4 steps

Register an account on the npm official website and verify your email.

Enter npm login on the command line to complete the login.

If npm uses Taobao mirror source, you need to switch back to npm source.

Go to the project directory that needs to be published and execute the npm publish release.

When finished, then install our own component library on npm install in the test project.

Debug component library is introduced on demand

In the babel.config.js in the test project, add the babel-plugin-component configuration, and restart the project.

Babel-plugin-component basic configuration referenc

/ / babel.config.jsmodule.exports = {presets: ["@ vue/cli-plugin-babel/preset"], plugins: ['component', {libraryName:' element-ui', styleLibraryName: 'theme-chalk'},' element-ui'], ['component', {libraryName:' test-lib'] StyleLibrary: {"name": "lib-style", / / same with styleLibraryName "base": false / / if theme package has a base.css}}, 'test-lib'],]}

Using component libraries in test.vue

Element-buttonimport Vue from "vue"; import {navbar} from "juejintest-lib"; import {button} from "element-ui"; Vue.use (navbar) Vue.use (button) export default {data:function () {return {msg: 'text'}; .dg-margin-t-20 {margin-top:20px;}

Thank you for reading! This is the end of the article on "how to package an on-demand vue component library for webpack". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.