0 x00. Preface

The book continues. The first component of the project has been packaged and the documentation has been written. Next, you need to publish the documentation to the Internet to showcase and promote the project, using Github Pages. At the same time, the components are published on the NPM, so that they can be installed and used directly in the project.

0 x01. Making Pages

Go to the Project’s Github repo and click on the Settings option in the upper right corner.

Click the Pages option in the left menu to display the initial configuration of the project Github Pages on the right. If the source configuration item is None, this function is not enabled.

Click the Source configuration drop-down menu. There are only two options: Master (master branch/default branch) and None(disable function).

Root path

After selecting the Master branch, you can specify the path of the publishing file source. The default project root path is /(root). You can also specify the docs folder under the root path. Then click the Save button to Save and you will be prompted with the project’s publishing address andurils.github. IO /code-exampl… .

If the url fails to be parsed, wait 1-2 minutes and refresh the page again. (The readme.md file is the only one in the root directory.)

Readme. md file contents:

# Code examples

## ElementUI source code learning: build from scratch Vue component library summary

1. [0x01. Project initialization and WebPack configuration] (https://juejin.cn/post/6950905030635421710)
2. [0 x02. Babel configuration] (https://juejin.cn/post/6951215878928678948)
3. [03.ElementUI Source Code Learning: Code Style Checking and Formatting Configuration (ESlint & Prettier)] (https://juejin.cn/post/6951808773354684447)
4. [04.ElementUI source code learning: component packaging, documentation preparation] (https://juejin.cn/post/6953614014546968589)

Copy the code

Docs path

Placing distribution files under the root of a development branch can be confusing to manage. If you don’t want to maintain a new branch for static site distribution, you can use the current branchdocsThe path is changed as follows in the configuration.

Create build\webpack.docs. Js, copy the contents of build\webpack.config.js, and change the output/path property from dist to docs.

module.exports = {
  ...
  output: {
    path: path.resolve(process.cwd(), 'docs'),... },... }Copy the code

Add a new build command to NPM scripts in package.json file to package the component description document into the docs path.

."scripts": {..."build:docs": "cross-env NODE_ENV=development webpack --config build/webpack.docs.js". },...Copy the code

Upload the files under Docs to Github. Because the project path is /learning-element2/step03, you need to manually copy the docs content to the Github root directory. The latest Github Repo directory structure is as follows:

├ ─ docs ├ ─ learning - element2 ├ ─ LICENSE ├ ─ the README, mdCopy the code

Enter the address in the browser and open the page as follows:

Gh – pages branch

We should be familiar with the GH-Pages branch, according to the earlier convention static website publishing needs to create this branch, in order to use the Github Pages function. Next, I’ll show you how to quickly publish projects using GH-Pages.

Install gh-Pages plug-in and add deployment commands in NPM scripts.

// Install the plug-in
npm install -D  gh-pages 

// package.json adds the deployment command
"scripts": {  
    "deploy": "gh-pages -d dist" 
}
Copy the code

Then compile the packaged project NPM run build:dist, and finally run the deployment command NPM run deploy to publish the project document. The Published success console displays Published. “deploy”: “gh-pages -d dist”

Open the Github Pages configuration, this option appears gh-Pages, select this branch can be.

Gh-pages -d dist is equivalent to creating a GH-Pages branch and committing the dist file content to the branch. You can now specify specific branches/paths directly through configuration (you can use any branch other than master or GH-Pages).

0x02.npm publishes component packages

Webpack configuration

Install the compile progress bar plug-in

npm i -D progress-bar-webpack-plugin
Copy the code

Create build\webpack.common.js and build a full package using the commonjs2 specification.

const path = require('path');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

const config = require('./config');

module.exports = {
  mode: 'production'.entry: {
    app: ['./src/index.js'].// Entry Descriptor passes in an object./ SRC /index.js
  },
  output: {
    path: path.resolve(process.cwd(), './lib'), // Absolute path
    publicPath: '/dist/'.// Relative to service
    filename: 'me-vue-ui.common.js'.chunkFilename: '[id].js'.library: { 
      type: 'commonjs2'.// Configure how to expose the library
      export: 'default'.// Specify which export should be exposed as a library}},resolve: {
    extensions: ['.js'.'.vue'.'.json'].alias: config.alias,
    modules: ['node_modules'],},// externals: config.externals, // external extension
  performance: {
    // Controls how Webpack notifies "asset and entry point exceed specified file limits"
    hints: false.// Do not display warnings or error messages
  },
  You can specify the information you want to see in the statistics output
  stats: {
    children: false.// Whether to add information about submodules
  },
  optimization: {
    // Tell WebPack to compress bundles using TerserPlugin or other plugins defined in Optimization.minimizer
    minimize: false,},module: {
    rules: [{test: /\.(jsx? |babel|es6)$/,
        include: process.cwd(),
        exclude: config.jsexclude,
        loader: 'babel-loader'}, {test: /\.vue$/,
        loader: 'vue-loader'.options: {
          compilerOptions: {
            preserveWhitespace: false,},},}, {test: /\.css$/,
        use: ['style-loader'.'css-loader'],}, {test: /\.(svg|otf|ttf|woff2? |eot|gif|png|jpe? g)(\? \S*)? $/,
        loader: 'url-loader'.options: {
          limit: 10000.name: path.posix.join('static'.'[name].[hash:7].[ext]'),},},],},plugins: [new ProgressBarPlugin(), new VueLoaderPlugin()],
};

Copy the code

Add component packaging command in NPM scripts and generate it in lib directory.

."scripts": {..."dist": "webpack --config build/webpack.common.js ". },...Copy the code

Type the command NPM run dist to generate the component package file lib\ session vue-ui.common.js.

Replace component references in examples\main.js with ‘.. / SRC /index’ instead of ‘.. Mon/lib/me-vue-ui.com ‘.

// examples\main.js

// import MeUI from  '../src/index';
import MeUI from '.. /lib/me-vue-ui.common';
Copy the code

Run the NPM run dev command to run the project. If the project starts normally and no error occurs, components are successfully packaged.

NPM configuration

Configure the property values in the package.json file for NPM publishing.

Name: package name, which is unique. You need to go to NPM Registry to see if the name is already in use.
Version: indicates the package version number. For the version number rule, see Semantic Version 2.0.0. The version number must be changed each time you release to NPM. The version number cannot be the same as the historical version number.
Description: Describes the main functions and uses of the package.
Main: entry file. This field should point to the compiled package file of the project.
Keyword: array or string.
Author: indicates the author of the package.
Private: indicates whether to publish to NPM. Change the value to false
License: Open source agreement.
Repository: Git Repo information for a package, including type and URL.
Homepage: The url of the project’s official website.

Update package.json file contents.

{
  "name": "me-vue-ui"."version": "0.1.2"."description": "A Vue.js 2.X UI Toolkit for Web"."main": "lib/me-vue-ui.common.js"."keyword": [
    "me-vue"."vuejs"."components"."ui-kit"]."repository": {
    "type": "git"."url": "git+https://github.com/andurils/code-examples.git"
  },
  "author": "anduril"."license": "MIT"."homepage": "https://andurils.github.io/code-examples"
}

Copy the code

Add the.npmignore file to ignore the publishing file. Publish files to NPM, keep only the lib directory, package.json, readme.md.

#Ignore the directory
build/
dist/
examples/
packages/
public/
src/
test/
docs/

#Ignore the specified file 
.eslintignore
.prettierignore        
.eslintrc.js
.prettierrc.js 
babel.config.json   
Copy the code

The updated readme. md content will be published as the README Tab option content of the NPM package.

NPM release

First sign up for an account at nPMjs.com and make sure NPM is using the original image.

npm config set registry http://registry.npmjs.org 
Copy the code

Then jump to the project path in the command line window and run NPM login login authorization.

Run the NPM publish command to publish the component package.

The component package information page is displayed www.npmjs.com/package/me-… You can see the project configuration information above.

NPM install test

Use the Vue CLI to create a project that references the newly published component package. Global registration component, page introduction component, refresh the page to see the published component.

npm install me-vue-ui -S
Copy the code

The operation effect is as follows:

0 x03. Summary

It takes 5 articles from project initialization to component writing and release, and after reading it patiently, you will find that it is very simple and not as mysterious and unattainable as expected. Due to the rapid development of front-end technology, version change, a lot of plug-in configuration let head big. If it weren’t for metaphysics, why don’t you know? Or the method of use is obsolete. Therefore, the article spent a lot of space to comb the knowledge, which is also a kind of self-review. I hope you get something too!

Next, I will take a further deconstruction of the Element-UI architecture and copy its engineering, components and documentation step by step.

Sample code 0x04

Github Repo

npm demo

0x05. Link summary

Click on the links below for a quick look at other articles in this series:

ElementUI 2.X source code learning: build from scratch Vue component library summary

Column /ElementUI 2.X source code learning

0 x06. Reference

Github Pages releases configuration semantic version 2.0.0 WebPack configuration

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Github Pages&nPM Package ElementUI 2.x

0 x00. Preface

0 x01. Making Pages

Root path

Docs path

Gh – pages branch

0x02.npm publishes component packages

Webpack configuration

NPM configuration

NPM release

NPM install test

0 x03. Summary

Sample code 0x04

0x05. Link summary

0 x06. Reference

Github Pages&nPM Package ElementUI 2.x

0 x00. Preface

0 x01. Making Pages

Root path

Docs path

Gh – pages branch

0x02.npm publishes component packages

Webpack configuration

NPM configuration

NPM release

NPM install test

0 x03. Summary

Sample code 0x04

0x05. Link summary

0 x06. Reference

Related Posts

The execution timing of the JS function

Front end interview – Hand-written inheritance

Front-end code formatting –Nuxt/Vue configuration