0 x. 00 📢 preface

This article covers topic building, automated testing, code quality checks, and type declarations for your project.

Project engineering series of articles mainly through the analysis of element project source code, from the structure, function, source code one by one analysis, learning its modularization, componentization, standardization, automation and other multidimensional excellent practices. The main content includes project structure, NPM Script, project build, document parsing, packaging configuration, release deployment, etc.

👇 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

0 x. 01 🎨 theme

– chalk 📁 packages/theme

Theme – Chalk is an independent project that is built and generated through gulp packaging and can be published separately. ElementUI/ theme-Chalk warehouse address

There are font files, SCSS related variables, mixins and common style Settings, and SCSS files for each UI component. The project directory structure is 👇 :

@ mixins with @ include

The @mixin directive allows us to define a style that can be reused throughout the stylesheet.

The @include directive can introduce mixins into a document.

Mixins are defined by the @mixin directive. Create a mixin named “important-text” :

The @include directive can be used to include an important-text mix as follows:

Subject to build

1️ Generates an entry file

Build /bin/gen-cssfile Find components.json and find component-name. SCSS in the packages/ theme-Chalk/SRC directory for each component. With @import “./component-name. SCSS “, write Packages /theme-chalk/index. SCSS file – style master entry file. If a component’s corresponding style does not exist, the missing style file is automatically created.

2️ Build topics

Gulp is a stream-based automated build tool. Gulpfile.js defines two tasks:

  • willpackages/theme-chalk/srcThe SCSS file in the directory is converted into a CSS file and output topackages/theme-chalk/src/libDirectory;
  • willpackages/theme-chalk/src/fontsDirectory of font icon file compression processing, output topackages/theme-chalk/src/lib/fontsDirectory.

3️ copy to lib/ theme-Chalk

Use cp-CLI to copy files in packages/ theme-Chalk/SRC /lib to the lib/ theme-Chalk directory.

0 x. 02 test

test\ssr\require.test.js

Run the node test/ SSR /require.test.js command in build\release.sh file.

const path = require('path');

try {
  process.env.VUE_ENV = 'server';
  require(path.join(process.env.PWD, './lib/index'));
  console.log('SSR require test PASS');
} catch (e) {
  console.error('SSR require test error');
  throw Error(e);
}
Copy the code

📁 test/unit Unit tests

The project runs unit tests by executing NPM Run test NPM Run test: Watch using the following techniques:

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

The directory structure is 👇 :

Karma. Conf. js test configuration information.

Js test entry file. By default, unit tests test all files except main.js in the SRC directory. Adjust the test scope as required.

The test script is named as [component name].spec.js and stored in the test/unit/specs/ directory. The syntax structure is 👇.

If the test is successful, the terminal outputs a test coverage overview 👇.

Also, karma-coverage generates an overview of the test coverage results in the test/unit/ Coverage folder lcov.info and the web page lcov-report/**.

The web site for generating test coverage results is opened in Browse and reads 👇 :

0X.03 Code quality check

Element uses ESLint for code style detection to assist code specification execution, effectively control code quality, and achieve a unified project code style. Write the extended rule configuration that esLint publishes — eslint-config-Elemefe.

Eslint has very limited formatting capabilities; Prettier, on the other hand, has the advantage of formatting code. An prettier can be integrated for formatting restrictions, automatic formatting, code style checking, and formatting configuration (ESlint & prettier).

0X.04 Type declaration

The types directory holds the component TypeScript declaration file, ending with the.d.ts suffix. Improving the experience of introducing component libraries into typescript projects requires specifying the value of the typing property in package.json for the declared entry file to take effect.

{
    "typings": "types/index.d.ts",}Copy the code

0x.05 🔖 Link summary

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