This is the seventh day of my participation in the First Challenge 2022. For details: First Challenge 2022.

Written in the beginning

After learning from the previous articles, we now have our own ElementUI project starting to take shape. Of course, it’s not enough. (￣▽￣)

In this chapter, we will talk about importing components on demand. In the previous chapter, we put the project into a local NPM package through the NPM Pack. When we download and use the package in a new project, we import it in the following way:

// main.js
import juejinElementUI from 'juejin-element-ui';
import 'juejin-element-ui/lib/theme-chalk/index.css';
Vue.use(juejinElementUI);
Copy the code

This will allow us to import the entire component library, we can see the import of the component library through the console source-webpack :// -. -node_modules – component library name.

According to the need to introduce

To implement on-demand functionality, it’s actually not that difficult. There are only two steps. We need to use webPack’s packaging capabilities to package each component into a separate file. We then use the babel-plugin-component plug-in to help us import only the required component files.

1. Package components into separate files

Next, let’s implement a separate package for the components in the project. Create a new webPack.ponents. Js configuration file in our ElementUI project build folder:

The content of the webpack.common.js configuration file is similar to the one we used in the first article.

// webpack.components.js const path = require('path'); const VueLoaderPlugin = require('vue-loader/lib/plugin'); const Components = require('.. /components.json'); Const webpackConfig = {mode: 'production', entry: Components, // {'button': './packages/button/index.js'} output: { path: path.resolve(process.cwd(), './lib'), filename: '[name].js', // Component name libraryTarget: 'commonjs2'}, module: {rules: [{test: /\. Vue $/, loader: 'vue-loader', options: { compilerOptions: { preserveWhitespace: false } } }, ] }, plugins: [ new VueLoaderPlugin() ] }; module.exports = webpackConfig;Copy the code

The main change above is the Entry option. The value corresponding to the entry option is replaced with the content of the component configuration file components.json, which is actually replaced with an object. Webpack allows multiple entry packages, which can receive an object.

As well as the packaged output file, we use dynamic component names to define the file names, as you can see here.

After writing the configuration file, let’s configure the commands:

"scripts": {
  "dev": "webpack-dev-server --config build/webpack.common.js",
  "build": "webpack --config build/webpack.common.js && webpack --config build/webpack.component.js",
  "build:theme": "gulp build --gulpfile packages/theme-chalk/gulpfile.js && cp-cli packages/theme-chalk/lib lib/theme-chalk",
  "gen": "node build/bin/gen-cssfile.js",
  "new": "node build/bin/new.js",
  "build:entry": "node build/bin/build-entry.js"
},
Copy the code

We also add the configuration file command to the build command. When we execute the NPM run build command, we will generate not only the total file of the packaged project, but also the individual component files that are imported as needed.

Execute this command directly and see that the project is ready to generate a separate file for the component:

2. Import components on demand through plug-ins

Next, we will go into the on-demand import functionality of the test component, but before we do that, we must remember to re-nPM pack the project and then re-nPM install the full path where the TGZ package is placed locally to download the package for our project.

NPM install babel-plugin-component -d: NPM install babel-plugin-component -d

You need to create a new.babelrc file in the root directory of your test project.

{
  "presets": [["@babel/preset-env", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "juejin-element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}
Copy the code

This is the official use of Element-UI, just follow it.

We changed the original way of use:

// main.js // import juejinElementUI from 'juejin-element-ui'; // import 'juejin-element-ui/lib/theme-chalk/index.css'; // Vue.use(juejinElementUI); import {Button} from 'juejin-element-ui'; Vue.use(Button); // Vue.component(button.name, Button);Copy the code

Try using just the
tag on the page to see if the component is working properly, and you can see if the console introduction is successfully introduced on demand.

When we add another component to the use:

// main.js
import {Button, Divider} from 'juejin-element-ui';
Vue.use(Button);
Vue.use(Divider);
Copy the code

Test code:

<template> <div id="app"> <img Alt ="Vue logo" SRC ="./assets/logo.png"> <el-button></el-button> <div> <span> Youth is a short dream, When you wake up, it's gone. </span> < el-Divider ></ el-Divider >< span> A small amount of evil is enough to cancel out all the noble qualities and give someone a bad name. </span> < el-Divider content-position="left"> </ el-Divider > <span> </span> < el-Divider ></ el-Divider >< span> For the value that cannot be calculated </span> < el-Divider content-position="right"> Ali Cloud </ el-Divider > </div> </div> </template>Copy the code

conclusion

Now that we are done with the on-demand import functionality of the component, let’s walk through the process behind these two lines of code.

import {Button} from 'juejin-element-ui';
Vue.use(Button);
Copy the code

  • import {Button} from 'juejin-element-ui';

    This code relies on these exports in the index.js project entry file, as well as the babel-plugin-component plug-in and.babelrc file. I won’t dig into what the babel-plugin-component plug-in does, but remember that you need to export the entry file before you can do anything else, and use it with the right name.

  • The Vue. Use (Button); It depends on each component’s index.js file, which we mentioned in the first article, if you remember.




Content of the past

  • ElementUI source code series 1 – Building project architecture from scratch, project preparation, project packaging, project testing process
  • ElementUI source code series 2 – introducing SCSS, using GULp to convert SCSS to CSS and complete and compress, using CP – CLI to move directories and files
  • ElementUI source code series 3 – Learn the gen-cssfile.js file for automatically creating component. SCSS files and generating the contents of index.scss files
  • ElementUI source code series 4 – Learn how to automatically create component directory structure and generate components. Json file contents in new.js
  • ElementUI source code series 5 – Learn the contents of the build-entry.js file that automatically generates the master entry file index.js
  • ElementUI source code series six – summary
  • ElementUI source code series 7 – Components introduced on demand




At this point, this article is finished, sa Hua Sa hua.

I hope this article has been helpful to you. If you have any questions, I am looking forward to your comments. Same old, likes + comments = you know it, favorites = you know it.