JavaScript
Node.js
es6
webpack
babel

1枚のjsを開発することになったのでメモ

オーダー

  • ある1つのページだけで動作するjsを実装して欲しい
    • (あるページはjspで作成している)
  • IE11必須、Chrome最新版必須
  • 仮実装がcallbackを多用しているので、Promise中心にして欲しい
  • 今風にして欲しい
  • 好き勝手作っていい

今までのjavascriptの知識

  • jQueryでDOM操作マン

最終的に採用した技術

なるべく現時点で最新ぽい状況にしたかった。

  • node.js, nvm, npm
  • ES6
  • babel(7)
  • webpack
  • polyfill( @babel/polyfill )

ハマったところ

  • babelとES6だけで行けると思ってたけど、ブラウザで動作させるための変換が必要だった。
    • → browserifyを利用した。
  • babel7とbabelify/browserifyの組合せがうまくいかず
    • → webpackにした
    • この辺は、web上でいろんなバージョンのことを語っていたのでその組合せを雑に進めていったのがよくなかった。
  • babel-cli, babelify, browserifyそれぞれの役割の把握がわかりにくかった。
    • → 把握を頑張った。

設定系

package.json
{
  "scripts": {
    "build": "webpack --devtool=eval-source-map",
    "build-prd": "webpack"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-beta.39",
    "@babel/polyfill": "^7.0.0-beta.39",
    "@babel/preset-env": "^7.0.0-beta.39",
    "babel-loader": "^8.0.0-beta.0",
    "webpack": "^3.10.0",
    "whatwg-fetch": "^2.0.3"
  }
}
webpack.config.js
const path = require('path');

module.exports = {
  entry: ['@babel/polyfill', './src/app.js'],
  output: {
    path: path.resolve(__dirname, 'public/js'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets:
            ["@babel/preset-env"]
        }
      }
    ]
  }
}