Front End Development

by Scott, Revised on May 15, 2018 (Web DevelopmentScriptingJavaScriptOpen Source)

Node.js

Change global install path:

mkdir ~/nodejs
npm config set prefix=$HOME/nodejs
echo  'export PATH="$HOME/nodejs/bin:$PATH"' >> ~/.bashrc
source .bashrc
npm config get prefix

Create package.json per project (second command uses defaults):

npm init
npm init -y

Webpack

Install globally (-g) or locally, indicating dev (-D) or production (-S) dependencies:

npm install -g webpack webpack-cli
npm install -D webpack webpack-cli
npm install -S foundation-sites

ES6

Babel

Install:

npm install babel-cli
npm install babel-preset-env

Within package.json:

"scripts": {
  "build": "babel src --out-dir dist"
},

Within .babelrc:

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions"]
      }
    }]
  ]
}

Sass

Foundation

The docs do not mention Webpack, but to allow the @import 'foundation' to work, install and provide an includePaths option to the sass-loader in the webpack.config.js file.

npm install foundation-sites --save

loader: 'sass-loader',
options: { includePaths: [path.resolve(__dirname, 'node_modules/foundation-sites/scss')] }

Tags: Web DevelopmentScriptingJavaScriptOpen Source