This gists is just a compendium of usefull NPM commands commonly used in different languages.
This will ask you a bunch of questions, and then write a package.json for you.
It attempts to make reasonable guesses about what you want things to be set to, and then writes a package.json file with the options you've selected.
If you already have a package.json file, it'll read that first, and default to the options in there.
It is strictly additive, so it does not delete options from your package.json without a really good reason to do so.
npm init
If you invoke it with -f, --force, -y, or --yes, it will use only defaults and not prompt you for any options
npm init -y.
For naming ralated, try avoiding blank spaces and not defining your proyect as "React".
Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
npm i webpack
Webpack CLI encapsulates all code related to CLI handling. It captures options and sends them to webpack compiler. You can also find functionality for initializing a project and migrating between versions.
npm i webpack-cli
[Development only] This commmand will install a webpack deverloper server that provides live reloading.
Should be installed under --save-dev
npm i webpack-dev-server -D
The css-loader interprets @import and url() like import/require() and will resolve them.
Should be installed under --save-dev
npm i css-loader -D
Adds CSS to the DOM by injecting a <style> tag
It's recommended to combine style-loader with the css-loader
Should be installed under --save-dev
npm i style-loader -D
Instructs webpack to emit the required object as file and to return its public URL.
Should be installed under --save-dev
npm i file-loader -D
Loads files as base64 encoded URL.
Should be installed under --save-dev
npm i url-loader -D
Plugin that simplifies creation of HTML files to serve your bundles.
Should be installed under --save-dev
npm i html-webpack-plugin -D
Awesome-typescript-loader loader was created mostly to speed-up compilation.
Should be installed under --save-dev
npm i awesome-typescript-loader -D
This plugin extract CSS into separate files. It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS and SourceMaps.
It builds on top of a new webpack v4 feature (module types) and requires webpack 4 to work.
Should be installed under --save-dev
npm i mini-css-extract-plugin -D
TypeScript is a language for application-scale JavaScript. TypeScript adds optional types, classes, and modules to JavaScript. TypeScript supports tools for large-scale JavaScript applications for any browser, for any host, on any OS. TypeScript compiles to readable, standards-based JavaScript. Try it out at the playground, and stay up to date via our blog and Twitter account.
Should be installed under --save-dev
npm i typescript -D
Babel compiler core
Should be installed under --save-dev
npm i babel-core -D
A Babel preset that compiles ES2015+ down to ES5 by automatically determining the Babel plugins and polyfills you need based on your targeted browser or runtime environments.
Should be installed under --save-dev
npm i babel-preset-env -D
Sleek, intuitive, and powerful front-end framework for faster and easier web development
Should be installed for production matters under -dev
npm i bootstrap -P
An npm package to get you immediate access to React, without also requiring the JSX transformer. This is especially useful for cases where you want to browserify your module using React.
By default, React will be in development mode. The development version includes extra warnings about common mistakes, whereas the production version includes extra performance optimizations and strips all error messages. To use React in production mode, set the environment variable NODE_ENV to production. A minifier that performs dead-code elimination such as UglifyJS is recommended to completely remove the extra code present in development mode.
npm i react -P
This package serves as the entry point of the DOM-related rendering paths. It is intended to be paired with the isomorphic React, which will be shipped as react to npm.
npm i react-dom -P
This package contains type definitions for React (http://facebook.github.io/react/).
npm i @types/react -P
This package contains type definitions for React (react-dom) (http://facebook.github.io/react/).
npm i @types/react-dom -P
Package router for React
npm i react-router-dom -P
This package contains type definitions for React Router (https://github.com/ReactTraining/react-router).
npm i @types/react-router-dom -D