代々木で働く19歳エンジニアのブログ

思ったこととか、技術的なこと書きます。

(随時更新) JS著名ツールなんとなくまとめ

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

how to use

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

Reference from

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

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

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

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

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 用のモジュール管理フレームワークの1つ。

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

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

Compiler

babel

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

Reference from