babel, gulp, webpack 簡介

Babel 簡介：JS compiler

Babel is JS complier。

gulp 簡介：task manager

在愈來愈多任務與其他工具的時候，gulp 讓我們可以把各種 task 寫在一起，方便管理 task，gulp 是 task manager。

Webpack 簡介：module bundler？

Webpack is module bundle.

node.js 的 require 只有在 node.js 才可以用，瀏覽器則不行

不同模組化的規範：CommonJS, AMD, UMD

目的是一樣的，但用法不一樣，不同規範間可能無法相容，CommonJS, AMD, UMD 都不是官方規範。

CommonJS

引入時 require，輸出時 exports

// index.js
const utils = require('./utils')

const utils = {
  first: function(str) {
    return str[0]
  },

  last: function(str) {
    return str[str.length - 1]
  }
}

module.exports = Utils

瀏覽器原生支援： ES Modules

import, export

export function first(str) {
  return str[0]
}

// index.js
import { first } form './utils.js'

Webpack 在瀏覽器上實作 require 的功能 (重要)

webpack 的重點 bundle，是 bundler
gulp 是 task manager

webpack 做不到 task manager
gulp 做不到 bundle

--save-dev 是什麼意思？

放在 dependency，代表在開發時會用到，打包出去用不到

做 module 給別人用時比較有感