Configuration
The @leanup stack
contains coordinated and preconfigured tools for developing, building, formatting, linting and testing Single-Web-Applications.
General
Extends configurations
The @leanup stack
provides minimal default configurations for all included tools. And it enables the configuration files to be adapted or expanded to suit the specifics of the project.
For example, add an additional webpack plugin: Copy Webpack Plugin
TypeScript
The hole stack is focused on TypeScript
with the following tsconfig.json
:
{
"compilerOptions": {
"experimentalDecorators": true,
"pretty": true,
"target": "esnext",
"module": "esnext",
"preserveConstEnums": true,
"sourceMap": true,
"moduleResolution": "node",
"lib": ["es2017", "dom"],
"types": ["mocha", "node"],
"typeRoots": ["node_modules/@types", "src/types"],
"noUnusedLocals": true,
"resolveJsonModule": true,
"noEmit": true,
"skipLibCheck": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"forceConsistentCasingInFileNames": true,
"importHelpers": true,
"removeComments": true,
"strict": true
},
"include": ["src/**/*", "tests/**/*", "node_modules/@leanup/**/*"],
"exclude": ["node_modules/@leanup/**/template/**/*"]
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Bundler
The main legacy bundler is webpack
. In addition to webpack
, we have expanded the @leanup stack
to include the alternatives vite
and snowpack
.
List:
Transpiler
The main transpiler is esbuild
. In addition to esbuild
, we have provide a babel
transpiler package for the @leanup stack
. It is needed by AngularJS
and Inferno
.
List:
At work
Develop
To develop an application, there must be an entry file main.ts
in the src
directory.
For example, if you develop a React application the content of the main.ts
looks like:
import 'react.tsx';
Build
The main legacy bundler is webpack
. In addition to webpack
, we have expanded the @leanup stack
to include the alternatives vite
and snowpack
.
List:
- Snowpack
- Vite
- Webpack
Format
We chose prettier
for the code formatting with the following configuration:
module.exports = {
printWidth: 120,
singleQuote: true,
};
2
3
4
Lint
We chose primary eslint
for the static code checking. In addition to eslint
, we provide a tsc
command.
ESLint
/**
* https://www.npmjs.com/package/eslint
*/
module.exports = {
root: false,
env: {
browser: true,
es6: true,
node: true,
},
extends: ['eslint:recommended'],
overrides: [
/**
* - https://www.npmjs.com/package/@typescript-eslint/eslint-plugin
* - https://www.npmjs.com/package/@typescript-eslint/parser
*/
{
extends: [
'plugin:@typescript-eslint/recommended',
'plugin:@typescript-eslint/recommended-requiring-type-checking',
],
files: ['**/*.ts', '**/*.tsx'],
parserOptions: {
ecmaVersion: 2018,
project: './tsconfig.json',
extraFileExtensions: ['.vue'],
sourceType: 'module',
},
plugins: ['@typescript-eslint'],
rules: {
'@typescript-eslint/ban-types': 'off',
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/no-empty-function': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-unused-vars': 'off',
'@typescript-eslint/no-var-requires': 'off',
'@typescript-eslint/explicit-member-accessibility': ['warn'],
},
},
/**
* - https://www.npmjs.com/package/eslint-plugin-html
*/
{
files: ['**/*.html'],
plugins: ['html'],
},
/**
* - https://www.npmjs.com/package/eslint-plugin-json
*/
{
extends: ['plugin:json/recommended'],
files: ['**/*.json'],
plugins: ['json'],
},
{
env: {
mocha: true,
},
files: ['tests/**/*', '**/*.spec.*', '**/*.test.*'],
},
],
parser: '@typescript-eslint/parser',
rules: {
'no-empty': 'off',
'no-prototype-builtins': 'off',
'space-before-function-paren': 'off',
},
};
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
TSC
If you want you can execute a addition test with tsc -p tsconfig.json
.
Test
Our test strategy focuses on unit- and e2e-testing.
Unit-Test
The unit test framework is moche
in addition with chai
and sinon
.
E2E-Test
The unit test framework is nightwatch.js
in addition with cucumber
.