Competent
npm:
- structure of package.json
- careate own npm
- publish own npm
- Running scripts
- Scripts structure
grunt/gulp
- structure of Gruntfile.js
- structure of gulpfile.js
bower/jspm
- structrure of bower.json
- structure of .bowerrrc
- create own package
- publish own package
karma
- collect code coverage
Chrome developers tools
- emulation of different devices
- using timeline
- CPU profiling
- getting infrmation about networking
CI (teamcity/hudson/jenkins/strider)
- why do we need to use CI
- run bulds
Webpack
Typescript
- Advanced Types
- Project Configuration
- Declaration Files
Eslint
Yarn
- Installation(macOS/Windows/Linux)
- Configuration (yarn.lock and package.json)
- Managing dependencies(add/update/remove)
- Offline mirror
Docker
Webpack
Performance
Resolve
These options change how modules are resolved. webpack provides reasonable defaults, but it is possible to change the resolving in detail. Have a look at Module Resolution for more explanation of how the resolver works.
// webpack.config.js
module.exports = {
//...
resolve: {
alias: {
Utilities: path.resolve(__dirname, 'src/utilities/'),
Templates: path.resolve(__dirname, 'src/templates/')
}
}
};
Externals
The externals configuration option provides a way of excluding dependencies from the output bundles. Instead, the created bundle relies on that dependency to be present in the consumer's environment. This feature is typically most useful to library developers, however there are a variety of applications for it.
// webpack.config.js
module.exports = {
//...
externals: {
jquery: 'jQuery'
}
};
Chunks
The CommonsChunkPlugin is an opt-in feature that creates a separate file (known as a chunk), consisting of common modules shared between multiple entry points.
The CommonsChunkPlugin has been removed in webpack v4 legato. To learn how chunks are treated in the latest version, check out the SplitChunksPlugin.
By separating common modules from bundles, the resulting chunked file can be loaded once initially, and stored in cache for later use. This results in page speed optimizations as the browser can quickly serve the shared code from cache, rather than being forced to load a larger bundle whenever a new page is visited.
new webpack.optimize.CommonsChunkPlugin(options);
Hot Module Replacement – React
Caching
Shimming
The webpack compiler can understand modules written as ES2015 modules, CommonJS or AMD. However, some third party libraries may expect global dependencies (e.g. $ for jQuery). The libraries might also create globals which need to be exported. These "broken modules" are one instance where shimming comes into play.
We don't recommend using globals! The whole concept behind webpack is to allow more modular front-end development. This means writing isolated modules that are well contained and do not rely on hidden dependencies (e.g. globals). Please use these features only when necessary.
Another instance where shimming can be useful is when you want to polyfill browser functionality to support more users. In this case, you may only want to deliver those polyfills to the browsers that need patching (i.e. load them on demand).
The following article will walk through both of these use cases.
Tree shaking
Tree shaking is a form of dead code elimination. The term was popularized by Rollup, but the concept of dead code elimination has existed for some time. The concept has also found purchase in webpack, which is demonstrated in this article by way of a sample app.
The term "tree shaking" comes from the mental model of your application and its dependencies as a tree-like structure. Each node in the tree represents a dependency that provides distinct functionality for your app. In modern apps, these dependencies are brought in via static import statements like so:
// Import all the array utilities!
import arrayUtils from "array-utils";
Typescript
- Advanced Types
Project Configuration
.tsconfig.json
{
"extends": "./configs/base",
"compileOnSave": true,
"compilerOptions": {
"module": "system",
"noImplicitAny": true,
"strictNullChecks": true,
"removeComments": true,
"preserveConstEnums": true,
"outFile": "../../built/local/tsc.js",
"sourceMap": true,
"typeRoots" : ["./typings"],
"types" : ["node", "lodash", "express"]
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
Declaration Files
Eslint
using cli
eslint [options] file.js [file.js] [dir]
Basic configuration:
--no-eslintrc Disable use of configuration from .eslintrc.*
-c, --config path::String Use this configuration, overriding .eslintrc.* config options if present
--env [String] Specify environments
--ext [String] Specify JavaScript file extensions - default: .js
--global [String] Define global variables
--parser String Specify the parser to be used
--parser-options Object Specify parser options
Specifying rules and plugins:
--rulesdir [path::String] Use additional rules from this directory
--plugin [String] Specify plugins
--rule Object Specify rules
Fixing problems:
--fix Automatically fix problems
--fix-dry-run Automatically fix problems without saving the changes to the file system
--fix-type Array Specify the types of fixes to apply (problem, suggestion, layout)
Ignoring files:
--ignore-path path::String Specify path of ignore file
--no-ignore Disable use of ignore files and patterns
--ignore-pattern [String] Pattern of files to ignore (in addition to those in .eslintignore)
Using stdin:
--stdin Lint code provided on <STDIN> - default: false
--stdin-filename String Specify filename to process STDIN as
Handling warnings:
--quiet Report errors only - default: false
--max-warnings Int Number of warnings to trigger nonzero exit code - default: -1
Output:
-o, --output-file path::String Specify file to write report to
-f, --format String Use a specific output format - default: stylish
--color, --no-color Force enabling/disabling of color
Inline configuration comments:
--no-inline-config Prevent comments from changing config or rules
--report-unused-disable-directives Adds reported errors for unused eslint-disable directives
Caching:
--cache Only check changed files - default: false
--cache-file path::String Path to the cache file. Deprecated: use --cache-location - default: .eslintcache
--cache-location path::String Path to the cache file or directory
Miscellaneous:
--init Run config initialization wizard - default: false
--debug Output debugging information
-h, --help Show help
-v, --version Output the version number
--print-config path::String Print the configuration for the given file
configuring eslint and .eslintrc. structure
After running eslint --init, you’ll have a .eslintrc file in your directory. In it, you’ll see some rules configured like this:
{
"extends": "eslint:recommended",
"rules": {
"semi": ["error", "always"],
"quotes": ["error", "double"]
}
}
formatters
ESLint comes with several built-in formatters to control the appearance of the linting results, and supports third-party formatters as well.
You can specify a formatter using the --format or -f flag on the command line. For example, --format codeframe uses the codeframe formatter.
The built-in formatter options are:
- checkstyle
- codeframe
- compact
- html
- jslint-xml
- json-with-metadata
- json
- junit
- stylish
- table
- tap
- unix
- visualstudio
codeframe example
error: 'addOne' is defined but never used (no-unused-vars) at fullOfProblems.js:1:10:
> 1 | function addOne(i) {
| ^
2 | if (i != NaN) {
3 | return i ++
4 | } else {
error: Use the isNaN function to compare with NaN (use-isnan) at fullOfProblems.js:2:9:
1 | function addOne(i) {
> 2 | if (i != NaN) {
| ^
3 | return i ++
4 | } else {
5 | return
error: Unexpected space before unary operator '++' (space-unary-ops) at fullOfProblems.js:3:16:
1 | function addOne(i) {
2 | if (i != NaN) {
> 3 | return i ++
| ^
4 | } else {
5 | return
6 | }
Yarn
- Installation(macOS/Windows/Linux)
- Configuration (yarn.lock and package.json)
- Managing dependencies(add/update/remove)
Offline mirror
Set up .yarnrc
First we need to setup a directory to be our “Offline mirror” storage, we can do that with yarn config command:
$ yarn config set yarn-offline-mirror ./npm-packages-offline-cache
yarn config v0.23.2
success Set "yarn-offline-mirror" to "./npm-packages-offline-cache".
✨ Done in 0.06s.
TIP
./npm-packages-offline-cache is an example location relative to home folder where all the source.tar.gz files will be downloaded to from the registry.
Offline mirror does not come with removing tarballs. In order to keep the cache folder up to date, you need to add the following to the config file:
This feature is only available in version 0.23.0 and above.
$ yarn config set yarn-offline-mirror-pruning true
yarn config v0.23.2
success Set "yarn-offline-mirror-pruning" to "true".
✨ Done in 0.06s.
This will create a .yarnrc file in your HOME directory. Let’s move this file to the project root so that offline mirror would be used only for this project.
$ mv ~/.yarnrc ./
(In the unlikely event that yarn config didn’t update the file in your home folder, e.g. if you are running yarn config as root inside a Docker container, the file being updated might be a different one. Use yarn config list --verbose to locate the proper file.)
Docker
FROM node:9.3.0-alpine
RUN npm install -g @angular/cli@1.5.5 \
&& mkdir -p /usr/src/pintail-whoami
WORKDIR /usr/src/pintail-whoami
ADD . /usr/src/pintail-whoami
RUN npm install && ng build
EXPOSE 80
CMD node server.js $HOSTNAME
CLI
docker run [OPTIONS] IMAGE[:TAG|@DIGEST] [COMMAND] [ARG…]
docker stop [OPTIONS] CONTAINER [CONTAINER…]
docker ps [OPTIONS] [-a]
docker rm [OPTIONS] CONTAINER [CONTAINER…]
docker images [OPTIONS] [REPOSITORY[:TAG]]
docker rmi [OPTIONS] IMAGE [IMAGE...]
docker build [OPTIONS] PATH | URL | -
docker images [OPTIONS] [REPOSITORY[:TAG]]
docker images
docker login [OPTIONS] [SERVER]
docker push [OPTIONS] NAME[:TAG]
docker rmi [OPTIONS] IMAGE [IMAGE…]
Docker compose
docker-compose up [options] [ — scale SERVICE=NUM…] [SERVICE…]
docker-compose ps [options] [SERVICE…]
docker-compose logs [options] [SERVICE…]
docker-compose stop [options] [SERVICE…]
Docker compose
docker-compose.yaml
version: '2'
services:
nginx-proxy:
image: jwilder/nginx-proxy
ports:
- "80:80"
volumes:
- /var/run/docker.sock:/tmp/docker.sock:ro
pintail-whoami:
image: pintailai/pintail-whoami:0.0.1
environment:
- VIRTUAL_HOST=localhost