ra:frontend
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
ra:frontend [2018/10/05 15:49] koubel [Webpack, Typesript configuration] |
— (current) | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | Most of new front ends are single page applications based on React, Mobx. | ||
| - | |||
| - | ====== Typical workflow ====== | ||
| - | Typical workflow | ||
| - | |||
| - | * clone package | ||
| - | * ''%%npm install%%'' by package.json | ||
| - | * ''%%npm run dev%%'' mostly by webconfig | ||
| - | |||
| - | %%run%% and %%dev%% are npm scripts defined in package.json | ||
| - | |||
| - | There can be many other task e.g. for running test, pritty prints for source code etc. | ||
| - | |||
| - | ====== Minimum NPM ====== | ||
| - | |||
| - | Install package node_modules and add into package.json as dependency. | ||
| - | |||
| - | > npm i package-name | ||
| - | |||
| - | Install package node_modules and add into package.json as developer dependency | ||
| - | |||
| - | > npm i --save-dev package-name | ||
| - | | ||
| - | Install package in particular version | ||
| - | |||
| - | > npm i --save-dev package-name@^3.2.1 | ||
| - | | ||
| - | Uninstall package | ||
| - | |||
| - | > npm un package-name | ||
| - | | ||
| - | Show version of installed package | ||
| - | |||
| - | > npm ls package-name | ||
| - | | ||
| - | For semantic versionning see [[https://docs.npmjs.com/misc/semver|npm documentation]] | ||
| - | | ||
| - | For run project local scripts from %%node_modules%% dir, use %%npx%% e.g. | ||
| - | |||
| - | Runs webpack from project local node_modules for building the project | ||
| - | |||
| - | > npx webpack | ||
| - | |||
| - | Runs jest from project local node_modules for running test suite | ||
| - | |||
| - | > npx jest | ||
| - | | ||
| - | ====== Webpack, Typesript configuration ====== | ||
| - | |||
| - | Webpack is responsible for module loading. Modules are essential concept of modern javascript. Module systems | ||
| - | |||
| - | * [[https://eloquentjavascript.net/10_modules.html#h_N33QHgUxbG|CommonJs]] used by Node.js | ||
| - | * [[http://ccoenraets.github.io/es6-tutorial/modules/|Ecmascript modules]] or es6 modules, used by Babel, modern browsers. | ||
| - | * [[https://www.typescriptlang.org/docs/handbook/modules.html|Typescript modules]] used by typescript, mostly same with es6 modules. | ||
| - | |||
| - | Webpack uses modules for loading files via loaders and bundling these with plugins. | ||
| - | |||
| - | Typescript is superset of javascript, which is compiled into real javascript e.g. es5 - 'classic' javascript without classes, es6 - classes, const variables, esnext - arrow functions, rest parameters | ||
| - | |||
| - | Configuration for loaders | ||
| - | |||
| - | |||
ra/frontend.1538747390.txt.gz ยท Last modified: 2018/10/05 15:49 by koubel
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
