00 0 x. Preface

After a five-chapter summary of how to write a component, publish an NPM, and generate presentation documentation for the ElementUI source Code: Building a Vue Component Library from Scratch. The next step is to analyze the code structure of the Element project and learn its engineering ideas.

πŸ‘‡ The project Engineering article series is linked below. It is recommended to read the article πŸ‘‡ in order.

1️ engineering of source analysis: project overview, packagemanager. Json, NPM script 2️ Engineering of source analysis: project construction, MD analysis 3️ engineering of source analysis: packaging configuration 4️ engineering of source analysis: release deployment, continuous integration 5️ engineering of source analysis: Subject construction, automated testing, code quality check, type declaration 6️ engineering of source analysis: project website 7️ engineering of source analysis: command diagram

Front-end development has long been from the thin Client (thin Client) architecture/central server (server-centric) architecture into the fat client (fat Client) architecture, each technology blossomed, so that people can’t take it all in full bloom, direct call to learn not to move! With the increasing complexity of project development, various issues need to be addressed: development efficiency, product quality, collaboration, etc.

What is front-end engineering?

In order to deal with the above problems, front-end engineering is to apply the methods and ideas related to software engineering to the daily development of front-end projects, and use them in the development, operation and maintenance stages of front-end projects in a systematic, standardized and measurable way. So as to improve the development efficiency, improve product quality, reduce unnecessary repetitive work time, reduce the difficulty/risk of development, reduce the cost of the enterprise (cost reduction and efficiency increase).

Nowadays, the development, construction, deployment and other main links of front-end projects involve project construction, code development, branch management, automated testing, continuous integration, project deployment, performance and other contents. How to make the development more systematic and standardized with the thought of engineering? It is mainly divided into modularization (componentization), standardization, automation and other aspects.

1 ️ ⃣ modular

The project is divided into independent modules according to its function/business, which can be run independently. Each module contains only the content related to its function. Modules are called through interfaces to reduce the coupling between modules. After modularizing a large system, each module is highly reusable. Module does not equal function, a function may contain more than one module (function > module).

Modularity facilitates dependency management, performance optimization, and maintainability. The technical implementation scheme is as follows:

  • CommonJS, AMD, CMD, UMD, ES6 Module
  • Modularity of CSS (BEM naming convention, CSS Module, CSS In JS)
  • Modularity of resources (Webpack loaders)

2 ️ ⃣ componentization

Componentization is to solve the problem of code duplication in a project by splitting it into several independent components for different functions to improve code reuse and maintainability of the system.

πŸ“ Modularity vs componentization

Both componentization and modularization are about divide and conquer, reducing the complexity of business development by breaking up a project into smaller granular units (components/modules).

Modularity and componentization are similar in terms, and as a reflection of the idea of divide and conquer, they both achieve high cohesion and low coupling. A module is generally considered to be larger than a component. Modularization of a project does not necessarily require componentization, and it can be done without regard to code reuse at all. You don’t do that. It’s not Best practice. Componentization, like UI controls, can be used across modules. Modularity is like a message list interface that references the TABLE component. Although there is no need to reuse it, we need to package it as a separate module.

3 ️ ⃣ standardization

Specifications are basic team agreements that must be strictly followed to enhance team development collaboration and improve code quality.

  • Directory structure (commonly known by convention)
  • Code specification [HTML, CSS, JS, image, naming, etc.] (esLint, prettier)
  • Front end Interface Specification (Swagger RESTful)
  • Component Documentation Specification
  • Git Flow
  • Commit Description Specification (Commitizen)
  • Design Specification (Material Design, Ant Design)

4 ️ ⃣ automation

Standardization of work flow content, full/semi-automatic completion of repetitive work through tools, reduce human operations, and achieve unified standards and high-quality delivery.

  • File build (Webpack)
  • Continuous Integration/Build/Deployment (Travis CI)
  • Automated Tests (Jasmine, Mocha+ Chai, Jest)

The following part will analyze the source code of the Element project one by one from the aspects of structure, function and source code, and learn its multi-dimensional excellent practices such as modularization, componentization, standardization and automation.

0x.01 πŸ“ Directory structure

0 x. 02 πŸ“ƒ package. Json

Next, you’ll get a quick look at the analysis project, starting with the package.json file.

Package. json is the manifest of the project, defining the various modules required by the project, as well as the project configuration information (such as metadata such as name, version, license, Git repository, etc.).

The package.json configuration information was previously mentioned in the 05. Github Pages&Npm Package article, and the attributes of the Element project are analyzed below.

The package.json of a project has a large number of properties, which can be roughly divided into the following categories:

  • Required attributes (name,version)
  • Description (description,keywords,homepage,repository,bugs)
  • NPM script (scripts)
  • Rely on (dependencies,devDependencies,peerDependencies)
  • Protocol (license) Specify the open source protocol type of the software
  • Directory file related (main,files,typings,faas,unpkg,style)

Essential attribute

The name and version attributes are required fields and form a unique identity for an NPM module. You can run the NPM view packageName command to check whether the packageName has been occupied and check some basic information

Rely on

According to the configuration information, running NPM | | yarn install command, automatically download the required modules, namely the configuration required for the project operation and development environment.

NPM script

Specifies the NPM command line abbreviation for running the script command, covering the entire project life cycle. The following will focus on ink.

Description information

Record the project profile, keywords, project home page, code warehouse, feedback issues and other meta information.

agreement

There are many open source protocols, how to choose the right one for your project? Go to choosealicense.com/ for more detailed instructions and guidelines.

For those who don’t want to bother, you can use a quick reference fromHow to choose an open source license?

Directory file related

main

The main property specifies the main entry file for the program, where the application searches for the module export when importing the package into the application. Import ElementUI from ‘element-UI ‘; In effect introducing the modules exposed in lib/element-ui.mon.js.

{
    "main": "lib/element-ui.common.js",}Copy the code

files

The files attribute describes the list of files that are pushed to the NPM server after publish. If a folder is specified, all contents in the folder are included. You can also ignore file uploads by configuring the.npmIgnore file.

{
  "files": [
    "lib"."src"."packages"."types"],}Copy the code

typings

The typings property specifies the entry to the declaration file for typescript.

{
    "main": "lib/element-ui.common.js"."typings": "types/index.d.ts",}Copy the code

See TypeScript Docs for details.

style

The style property specifies the style entry file.

{
    "style": "lib/theme-chalk/index.css",}Copy the code

unpkg

Unpkg is a common CDN commonly used on the front end, which can access any file of any package on the NPM through the URL syntax.

unpkg.com/:package@:version/:file
Copy the code

When the package is published to NPM, it can be used not only in the NodeJs environment, but also in the browser environment via unPKG, as long as it complies with the UMD specification.

{
    "unpkg": "lib/index.js",}Copy the code

The main property value lib/element-ui.common.js is the CommonJS specification, packaged and generated by build/webpack.common.js. The unpkg attribute value lib/index.js is the UMD specification and is generated by the build/webpack.conf.js package. The packaging module functionality is explained in detail later.

After setting the unpkg attribute, access unpkg.com/element-ui and automatically access unpkg.com/element-ui@… .

In the previous me-vue-UI package release, since the unpkg property was not configured, access to unpkg.com/me-vue-ui was automatically accessed using the file path defined by the main property unpkg.com/me-vue-ui@0… .

Introduced the CDN

If you need to import components into the browser environment, you only need to obtain resources from unpkg.com/element-ui and import JS and CSS files to the page. The path to the CSS file is the value of the style property; The path to the js file is the path to the package file based on the UMD specification — the unpkg attribute value.

<! -- Introduce style --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<! -- Import component library -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
Copy the code

faas

Used for the FAAS deploy configuration. The pub command of the NPM script was called sh build/deploy-faas.sh for the release deployment of the site element.eleme. IO, but was removed after version 2.15 (the exact usage cannot be repeated). Commit Feat: Add Change log 2.15.0 (#20692)

πŸ‘‰ NPM script ⭐

The scripts property specifies the NPM command line abbreviation for the commands that run the scripts, which can be used in combination with each other, covering the entire project lifecycle (development, testing, packaging, deployment).

Precautions for using scripts

The wildcard

Since NPM scripts are Shell scripts, Shell wildcards can be used.

"lint": "jshint *.js"
"lint": "jshint **/*.js"
Copy the code

In the above code, * represents any file name, and ** represents any level of subdirectories.

Execution order

If you need to perform multiple tasks in an NPM script, you need to be clear about the order in which they are executed. If the execution is parallel (that is, parallel execution at the same time), use the &sign.

$ npm run script1.js & npm run script2.js
Copy the code

If the execution is secondary (that is, the next task is executed only if the previous task succeeds), use the && symbol.

$ npm run script1.js && npm run script2.js
Copy the code

The Element project defines a number of scripts, roughly divided by purpose into project foundation, file build, project development, release deployment, project testing, and so on. Script commands invoke many files in the build directory to automate a lot of repetitive work, reducing human error and improving efficiency. The following will explain the function and effect of script command one by one.

For details on the /build file function, see the following article.

Project basis

npm run bootstrap

Automatically download the modules required by the project, that is, configure the running and development environment required by the project. Yarn is officially recommended.

npm run clean

Clear packages/test generated directories and files, mainly lib directory, test\unit\coverage directory (related to test code coverage, see later) and package\theme-chalk\lib directory (related to theme, see later).

The rimRAF package needs to be installed to recursively delete all files in the directory.

NPM Run ESLint code quality checks

Eslint is called to detect code specifications based on.eslintrc and.eslintignore file configurations. The –quiet parameter allows error reporting but disables warning reporting.

The project configs eslint-config-elemefe with its own wrapped rules. See the code style Check and Format configuration (ESLint & Prettier) above for details on how to configure eslint-config-Elemefe.

{
  "extends": "elemefe",}Copy the code

File to build

npm run i18n

Run build/bin/i18n.js based on the multilingual configuration of the examples/i18n/page.json page and all template files in the examples/pages/template directory. Generate web site. Vue files in zh-CN, EN-us, ES, and FR-fr languages.

npm run build:file

This command is used to automatically generate files. Multiple tasks are executed in parallel.

  • performbuild/bin/iconInit.jsgenerateexamples/icon.jsonIcon collection file.
  • performbuild/bin/build-entry.jsgeneratesrc/index.jsComponent library entry file.
  • performbuild/bin/i18n.jsGenerate multilingual website files for the official website.
  • performbuild/bin/version.jsgenerateexamples/version.jsonRecords the project version information, used for web version header navigation version switching.

npm run build:theme

This command is mainly used for theme and style generation of the project.

  1. performbuild/bin/gen-cssfilegeneratepackages/theme-chalk/index.scssStyle master entry file. When a component is fully introduced, the reference is styled as followsimport 'packages/theme-chalk/src/index.scss' .
  2. usinggulpTo style build, willpackages/theme-chalk/srcUnder thescssFile conversion tocssFile, output topackages/theme-chalk/src/libDirectory; willpackages/theme-chalk/src/fontsUnder the font file compression processing, output topackages/theme-chalk/src/lib/fontsDirectory.
  3. Will build contentpackages/theme-chalk/libCopy tolib/theme-chalkUnder. In front of thesytleProperty configuration path filelib/theme-chalk/index.cssThat’s how it’s generated.

You need to install the CP-CLI package for file and folder replication without worrying about cross-platform issues.

npm run build:utils

This command is used to Babel all the files in the SRC directory except the SRC /index.js entry file and output them to the lib folder.

You need to install the cross-env package, which is a script that runs cross-platform Settings and uses environment variables, using unique instructions for each platform, so you don’t have to worry about cross-platform issues.

npm run build:umd

The build/bin/build-locale.js command is used to Babel files in the SRC /locale/lang directory to generate umD files and export them to the lib/umd/locale directory.

Project development

npm run dev

This command is used to run the local development environment of a component library.

  1. Execute the commandnpm run bootstrapConfigure the operation and development environment required by the project.
  2. Execute the commandnpm run build:fileFor details, see the previous article, build the project official website related documents.
  3. webpack-dev-serverProvide a local service (serve) and run the project website (package rule configuration)build/webpack.demo.js); At the same time to performbuild/bin/template.jsFile start listeningexamples/pages/templateLog in to the template file. If the content of the template file changes, recreate the template file. The webpack-dev-server has the live reloading function, which reloads website content in real time.

npm run dev:play

This command is used to display functions in component library development. The following figure shows the running effect.

  1. Execute the commandnpm run build:fileFor details, see the previous article, build the project official website related documents.
  2. The following environment variables are configuredNODE_ENV=development PLAY_ENV=true, can be inbuild/webpack.demo.jsThe entry file is seen in the package fileexamples/play.js.play.jsreferenceexamples/play/index.vue, you can introduce any component of the component library for function display.

Release deployment

npm run deploy:build

This command is used to package the content of the project website to prepare for the website deployment.

  1. Execute the commandnpm run build:fileFor details, see the previous article, build the project official website related documents.
  2. webpack --config build/webpack.demo.jsBased on theproductionPattern to package generated content output toexamples/element-ui/Directory.
  3. echo element.eleme.io>>examples/element-ui/CNAME εΎ€examples/element-ui/CNAMEWrite to fileelement.eleme.io 。Github Docs / Managing a custom domain for your GitHub Pages site

npm run deploy:extension

This command is used to package the chrome plug-in project for building the Theme editor. Output generated content based on production mode to examples/ Extension directory.

The plug-in allows you to customize global variables and all design tags for components, preview new themes in real time and generate complete style packs based on them for direct download

πŸ‘‰ npm run dist ⭐

This command is used to build a component library.

  1. Execute the commandnpm run clean, see above;
  2. Execute the commandnpm run build:file, see above;
  3. Execute the commandnpm run lint, see above;
  4. Perform packagingwebpack --config build/webpack.conf.js, entry filesrc/index.js δ»₯ umdFormat output tolib/index.js;
  5. Perform packagingwebpack --config build/webpack.common.js, entry filesrc/index.js δ»₯commonjs2Format output tolib/element-ui.common.js;
  6. Perform packagingwebpack --config build/webpack.component.js, entry filecomponents.jsonThat will bepackagesDirectory of components tocommonjs2The format is output tolibDirectory for on-demand introduction;
  7. Execute the commandnpm run build:utils , see above;
  8. Execute the commandnpm run build:umd , see above;
  9. Execute the commandnpm run build:theme, see above.

πŸ‘‰ npm run pub ⭐

This command is used to publish component libraries and manage code.

  1. Execute the commandnpm run bootstrap, see above;
  2. Running a shell scriptsh build/git-release.sh To check the codedevWhether there is a conflict of branches (No conflicts);
  3. Running a shell scriptsh build/release.shMerge dev branch to Master branch, update version number, release topic, push code to remote repository, publish component library to NPM
  4. Executable filesnode build/bin/gen-indices.jsTo providealgoliasearchSearch function, need to putexamples/docsdirectory.mdFormat the file and upload italgolia, please see the following figure πŸ‘‡.

πŸ’β™‚οΈ In version 2.15.x, the pub command removes the last task command, sh build/deploy-faas.sh, for the faAS deploy of the site element.eleme. IO.

test

Realize project automation test.

  • Karma Test Execution Process management tool (Test Runner).
  • Mocha is a featureless JavaScript testing framework that runs on Node.js and browsers.
  • Chai is a BDD/TDD assertion library for Node.js and browsers that can be easily paired with any JavaScript testing framework.
  • Sinon.js is used to test the Spy, stub, and mock against JavaScript isolation. Works with any unit testing framework.

The test script is named as [component name].spec.js and stored in the test/unit/specs/ directory. If the test is successful, karma-Coverage generates a web page with test coverage results in the Test/Unit/Coverage folder.

npm run test

This command is used to start a project test, and karma will automatically stop after a single test with the –single-run parameter set.

npm run test:watch

This command is used to start the project test. After the execution, the system will continue to monitor whether the file is changed. If the file is changed, the system will execute the test again.

πŸ‘‹πŸ‘‹ Limited by space, this article is over! Future articles will continue to analyze learning engineering practices.

0x.03 πŸ”– Summary of links

For a quick look at the other articles in this series, click the following links:

ElementUI source learning: build Vue component library summary from scratch

Column /Element 2.x source learning

0 x. 04 πŸ“š reference

Zhuanlan.zhihu.com/p/359734011 www.ruanyifeng.com/blog/2016/1…