Package manager

npm

npm is the package manager for JavaScript and the world's largest software registry.
a package manager for javascript
npm makes it easy for JavaScript developers to share and reuse code, and makes it easy to update the code that you’re sharing, so you can build amazing things.

install

https://nodejs.org/en/download/

how to use

$ npm install <package>
$ ls
node_modules      package-lock.json package.json

Reference from

https://github.com/npm/npm

bower

A package manager for the web

...psst! While Bower is maintained, we recommend using Yarn and Webpack for front-end projects read how to migrate!

だそうです。

install

$ npm install -g bower

how to use

$ bower install <package>
$ ls
bower.json       bower_components

Reference from

https://github.com/bower/bower

yarn

FAST, RELIABLE, AND SECURE DEPENDENCY MANAGEMENT

install

$ brew install yarn

how to use

$ yarn init
$ yarn add [package]
$ ls
node_modules package.json yarn.lock
$ yarn install

Reference from

https://github.com/yarnpkg/yarn

component

frontend package manager and build tool for modular web applications

install

$ npm install -g component

how to use

$ ls
component.json index.css      index.html     index.js

$ component install necolas/normalize.css
github remote: 54 of 60 requests remaining, resetting at Thu Oct 30 2014 00:23:36 GMT+0100 (CET)
github remote: see https://github.com/component/guide/blob/master/changelogs/1.0.0.md#required-authentication for more information.
   installed : necolas/normalize.css@3.0.2 in 283ms
     install : complete
     
$ cat component.json
{
  "name": "my-first-component",
  "dependencies": {
    "necolas/normalize.css": "^3.0.2"
  },
  "scripts": ["index.js"],
  "styles": ["index.css"]
}

$ component build
$ ls
build          component.json index.css      index.html     index.js

Reference from

https://github.com/componentjs/component

Duo

Duo is a next-generation package manager that blends the best ideas from Component, Browserify and Go to make organizing and writing front-end code quick and painless.

install

$ npm install -g duo

how to use

$ cat index.js
var uid = require('matthewmueller/uid');
var fmt = require('yields/fmt');

var msg = fmt('Your unique ID is %s!', uid());
window.alert(msg);

$ duo index.js
     building : index.js
        using : compatibility
        using : stoj
    installed : yields-fmt@0.1.0
    installed : matthewmueller-uid@0.0.2
        built : index.js
        wrote : index.js

$ ls
build      components index.js

<script src="build/index.js"></script>

Reference from

https://github.com/duojs/duo

Loader

RequireJS

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node.
A file and module loader for JavaScript

install

http://requirejs.org/docs/download.html#requirejs

how to use

project-directory/
    index.html
    scripts/
        main.js
        require.js
        helper/
            util.js

<!DOCTYPE html>
<html>
    <head>
        <title>My Sample Project</title>
        <!-- data-main attribute tells require.js to load
             scripts/main.js after require.js loads. -->
        <script data-main="scripts/main" src="scripts/require.js"></script>
    </head>
    <body>
        <h1>My Sample Project</h1>
    </body>
</html>

requirejs(["helper/util"], function(util) {
    //This function is called when scripts/helper/util.js is loaded.
    //If util.js calls define(), then this function is not fired until
    //util's dependencies have loaded, and the util argument will hold
    //the module value for "helper/util".
});

JavaScript 用のモジュール管理フレームワークの１つ。

JavaScript を実装していて、 view や model などで細かくファイルを分割していると、ファイル間の依存関係を意識して読み込む順序を注意しないといけなくなる。

ファイル数が少なかったり、個人で開発しているのであれば手動管理でも大きな問題はない。しかし、ファイル数が多くなってきたり複数人で開発していると、手動管理では限界がある。

RequireJS では、 JavaScript のコードをモジュールという単位で管理する。そして、各コードは実装の先頭で使用するモジュールを宣言する。

RequireJS は使用するモジュールの宣言を元に、各モジュール間の依存関係を調べ、適切な順序で JavaScript のコードを読み込むようにしてくれる（<script>タグが自動で HTML に埋め込まれる）。

Reference from

Browserify

Browserify lets you require('modules') in the browser by bundling up all of your dependencies.
require('modules') in the browser
モジュール間の依存解決やファイルの結合を行う

install

$ npm install -g browserify

how to use

Browsers don't have the require method defined, but Node.js does. Browserify you can write code that uses require in the same way that you would use it in Node.

var unique = require('uniq');

var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];

console.log(unique(data));

$ npm install uniq

$ ls
index.html main.js node_modules/

$ browserify main.js -o bundle.js

<script src="bundle.js"></script>

Reference from

Module bundlers

Browserify

省略

Webpack

bundle your assets(scripts, images, styles)
A bundler for javascript and friends. Packs many modules into a few bundled assets.
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.

install

$ npm install -D webpack
$ yarn add webpack --dev

how to use

  webpack-demo
  |- package.json
+ |- index.html
+ |- /src
+   |- index.js

function component() {
  var element = document.createElement('div');

  // Lodash, currently included via a script, is required for this line to work
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

<html>
  <head>
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

外部のライブラリに依存していることが見かけ上はわからない
- It is not immediately apparent that the script depends on an external library.
依存関係が考慮されていない
- If a dependency is missing, or included in the wrong order, the application will not function properly.
依存関係が含まれていたとしても、使われておらず、browserは余計なコードをダウンロードしてしまう
- If a dependency is included but not used, the browser will be forced to download unnecessary code.

Creating a Bundle

  webpack-demo
  |- package.json
+ |- /dist
+   |- index.html
- |- index.html
  |- /src
    |- index.js

To bundle the lodash dependency with index.js, we'll need to install the library locally...

$ npm install --save lodash

src/index.js

+ import _ from 'lodash';
+
  function component() {
    var element = document.createElement('div');

-   // Lodash, currently included via a script, is required for this line to work
+   // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
  }

  document.body.appendChild(component());

dist/index.html

  <html>
   <head>
     <title>Getting Started</title>
-    <script src="https://unpkg.com/lodash@4.16.6"></script>
   </head>
   <body>
-    <script src="./src/index.js"></script>
+    <script src="bundle.js"></script>
   </body>
  </html>

The npx command, which ships with Node 8.2 or higher, runs the webpack binary (./node_modules/.bin/webpack) of the webpack package we installed in the beginning:

$ npx webpack src/index.js dist/bundle.js
Hash: 80992cf8fa2cd6324ca0
Version: webpack 3.10.0
Time: 391ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  544 kB       0  [emitted]  [big]  main
   [0] ./src/index.js 267 bytes {0} [built]
   [2] (webpack)/buildin/global.js 509 bytes {0} [built]
   [3] (webpack)/buildin/module.js 517 bytes {0} [built]
    + 1 hidden module

Using a Configuration

Most projects will need a more complex setup, which is why webpack supports a configuration file.

  webpack-demo
  |- package.json
+ |- webpack.config.js
  |- /dist
    |- index.html
  |- /src
    |- index.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

$ npx webpack --config webpack.config.js

Hash: 857f878815ce63ad5b4f
Version: webpack 3.9.1
Time: 298ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  544 kB       0  [emitted]  [big]  main
   [0] ./src/index.js 222 bytes {0} [built]
   [2] (webpack)/buildin/global.js 509 bytes {0} [built]
   [3] (webpack)/buildin/module.js 517 bytes {0} [built]
    + 1 hidden module

webpack-demo
|- package.json
|- webpack.config.js
|- /dist
  |- bundle.js
  |- index.html
|- /src
  |- index.js
|- /node_modules

Reference from

Parcel

Blazing fast, zero configuration web application bundler

install

$ npm install -g parcel-bundler
$ yarn global add parcel-bundler

how to use

<html>
<body>
  <script src="./index.js"></script>
</body>
</html>

$ parcel index.html

$ cat package.json
{
  "name": "parcel-sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "parcel-bundler": "^1.3.1"
  },
  "devDependencies": {},
  "scripts": {
     "start": "parcel index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Bundler Time	---
browserify	22.98s
webpack	20.71s
parcel	9.98s
parcel - with cache	2.64s

https://github.com/parcel-bundler/parcel#benchmarks

Parcel — Small to medium sized projects (<15k lines of code) Webpack — Large to enterprise sized projects. Rollup — For NPM packages.

Reference from

Task runners

Gulp

Automate and enhance your workflow
The streaming build system

install

$ npm install gulp-cli -g
$ npm install gulp -D

how to use

$ ls
gulpfile.js       node_modules      package-lock.json package.json

$ cat package.json
{
  "name": "gulp-sample",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "dependencies": {},
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-sass": "^3.1.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

$ npm install -D gulp gulp-sass

$ cat gulpfile.js
const gulp = require('gulp');
const sass = require('gulp-sass');

gulp.task('default', function () {
  gulp.src('css/style.scss')
    .pipe(sass())
    .pipe(gulp.dest('css'));
});

$ npx gulp
[16:42:47] Using gulpfile ~/src/local/frontend/gulp-sample/gulpfile.js
[16:42:47] Starting 'default'...
[16:42:47] Finished 'default' after 7.99 ms

onst gulp = require('gulp');
const sass = require('gulp-sass');

gulp.task('default', function () {
  gulp.watch('css/style.scss', function () {
    gulp.src('css/style.scss')
      .pipe(sass({
        outputStyle: 'expanded'
      })
      .on('error', sass.logError))
      .pipe(gulp.dest('css'));
  });
});

$ npx gulp

Reference from

Grunt

JavaScript Task Runner

install

$ npm install grunt -D
$ npm install grunt-cli -D

how to use

$ ls 
Gruntfile.js      node_modules      package-lock.json package.json
$ cat package.json
{
  "name": "grunt-sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-cli": "^1.2.0",
    "grunt-contrib-cssmin": "^2.2.1",
    "grunt-contrib-watch": "^1.0.0",
    "grunt-init": "^0.3.2"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

$ cat Gruntfile.js
module.exports = function(grunt) {
  grunt.initConfig({
    cssmin: {
      minify: {
        files: {
          'css/style.min.css':'css/style.css'
        }
      }
    },
    watch: {
      files: ['css/style.css'],
      tasks: ['cssmin']
    }
  });

  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-watch');
};

$ grunt watch
Running "watch" task
Waiting...

Reference from

https://github.com/gruntjs/grunt

Compiler

babel

Babel is a JavaScript compiler.

install

ES2015 and beyond

$ npm install -D babel-cli babel-preset-env
$ echo '{ "presets": ["env"] }' > .babelrc

Polyfill

$ npm install -D babel-polyfill

how to use

$ babel example.js --out-file compiled.js

import "babel-polyfill";

https://babeljs.io/docs/usage/polyfill/

Reference from

まとめ

何よりやっているなのは、依存管理。package間、file間とかで依存管理をするtoolとかが多い。ということは依存管理というのはみんな苦労しているということか。

---	github star count	stable version
npm	14935	5.6.0
bower	15286	1.8.2
yarn	29386	1.3.2
component	4635	1.1.0
duo	3553	0.15.7
RequireJS	11230	2.3.5
Browserify	11635	14.5.0
Webpack	35301	3.10.0
Parcel	13451	1.3.1
Gulp	28273	CLI:2.0.0/Local version:3.9.1
Grunt	11694	CLI:1.2.0/Local version:1.0.1
Babel	24910	6.26.0
golang/go	35647	1.9.2