Zenn
⚾️

素振り環境を晒す2016年春

2021/07/04に公開
npm
tech

追記 161231: 続編を書きました。『素振り環境を晒す 2016 年末』

@armorik83 です。みなさん素振りしてますか。

素振りとは

この辺。

私はだいたい設計の下書きやペアプロなどでBabel replやTypeScript Playground、あとはPlunkerとJSFiddleあたりをよく使ってます。

いくつかのライブラリを組み合わせたいとき、昔は CDN から取ってこられたので簡単だったけど、最近はnpm iした方がむしろ準備が早いケースも増えてきて、組み合わせての検証や練習をする際に、素振り環境は持っておくに越したことはないです。

素振り package.json

{
  "name": "suburi",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "npm run webpack",
    "start": "superstatic --port 8080 --host 127.0.0.1",
    "webpack": "webpack ./index.js --module-bind 'js=babel-loader' --output-filename ./built/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.7.7",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-stage-3": "^6.5.0",
    "superstatic": "^4.0.2",
    "webpack": "^1.13.0"
  },
  "dependencies": {
    "babel-polyfill": "^6.7.4"
  }
}

ざっくりと。素振り中に型検証は要らないので、Babelで。stage-3を入れるのはasync/awaitを練習しておきたいとき。stage-3を外すなら、一緒にbabel-polyfillも外せる。

今は一律でwebpackと Babel を使っているが、たぶんブラウザの対応状況を見てると webpack だけにしていいはず。

gulpとかlintもなし。全部npm runでまかなう。

npm startにsuperstaticを当てているのは、HTML5 pushState をまともに扱える Node.js 実装のローカルサーバをこれしか知らなかったから。（他にもあったらすいません）Angular 2 やってるので、ルータ周りが正しく動くため重宝するし、php とか python などの他言語に依存しないので勧めやすい。

最初にやること

以下のコマンドを打って準備。skeleton のリポジトリを用意するのが好みの人もいるかと思うが、clone とか面倒なので git も使わずコピペで済ませたいということで。

mkdir ~/Desktop/suburi && cd $_
touch package.json .babelrc superstatic.json index.html

終わったら次にこれ。

npm i

関連ファイルをいくつか

各種設定ファイルなどです。

.babelrc
{
  "presets": ["es2015", "stage-3"]
}

{
  "rewrites": [
    {
      "source":"/**",
      "destination":"/index.html"
    }
  ]
}

<!DOCTYPE html>
<html lang="ja">
<head>
  <base href="/">
  <meta charset="UTF-8">
  <title>suburi</title>
</head>
<body>
  <script src="./built/index.js"></script>
</body>
</html>

Discussion