はじめに
今時のWeb開発はわからないことだらけなので、調べたことをまとめた
2016年にJavaScriptを学ぶとこんな感じ – Medium Japan – Medium
まさにこんな感じ
目次
- SourceMapとは
- npxとは
- npm run
- expressとwebpack-dev-server
- ES6とかES2015とは
- CommonJSとは
- importとrequire
- ES Moduleとは
1. SourceMapとは
// webpack.config.js module.exports = { ... devtool: 'inline-source-map' }
// tsconfig.json { "compilerOptions": { ... "sourceMap": true } }
- 上のようにすると使える
参照
2. npxとは
- ローカルのnpmパッケージを実行するコマンド
- 昔は
npx webpack
のように楽に実行できなかったらしい
参照
npm 5.2.0の新機能! 「npx」でローカルパッケージを手軽に実行しよう - Qiita
3. npm run
npm run-script
の略- package.jsonのscriptsに書いてあるコマンドを実行する
// package.json { ... "scripts": { "echo": "echo 'hoge'" } }
- 上のは
npm run echo
でecho hoge
が実行される node_modules/.bin
にパスが通っているので、モジュールを使うときは"build": "webpack"
のようにする
参照
run-script | npm Documentation
4. expressとwebpack-dev-server
- 結論としてはexpress使う
- webpack-dev-serverはhot-redeployできるのが利点らしい
- hot-redeployは自動リロードみたいなもん
- そもそもwebpack-dev-serverがexpress使ってるらしい
- webpack-dev-middlewareやwebpack-hot-middlewareを代わりに使えばいいというのもあった
- hot-redeployするならnodemon入れればよさそう
参照
node.js - Do I need webpack-dev-server if I am using a node server like express - Stack Overflow
node.js - Running a node express server using webpack-dev-server - Stack Overflow
5. ES6とかES2015とは
- ES6 == ES2015
- ESとはECMAScriptのこと
- ECMAScriptはjavascriptの標準仕様
仕様 | 実装されたもの |
---|---|
ECMAScript | javascript |
参照
先取り!未来のJavaScript - ECMAScriptとJavaScriptの関係 | CodeGrid
6. CommonJSとは
- サーバーサイドの標準API仕様だったもの
- javascriptの機能がしょぼすぎたので作られた
- しかし今後はes6がモジュールを扱えるようになるので、あんまり見なくなっていくと思われる
仕様 | 実装されたもの |
---|---|
CommonJS | Node.js |
- Node.jsはもうCommonJSのことは眼中にないみたい
参照
JavaScriptのモジュールシステムに関するまとめ - Qiita
JavaScriptのモジュール管理(CommonJSとかAMDとかBrowserifyとかwebpack) | tsuchikazu blog
Node.jsとCommonJSについて - 自分の感受性くらい
7. importとrequire
- 結論としてはimportつかう
CommonJS | es6 |
---|---|
require | import |
- es6までは標準でモジュール読み込む方法がなかったらしい
- 現時点ではまだ
require
は広くつかわれてる
参照
importとrequireどちらを使おう…。 - もっく日記
ES Modules と Node.js について - from scratch
Node.jsのES Modulesサポートの現状確認と備え - teppeis blog
8. ES Moduleとは
- es6から使える
import
でモジュールを読み込める機能 export
を書かないと他のファイルから参照できない
// hoge.js export function echoHoge() { console.log("hoge"); }
// main.js import { hoge } from './hoge.js'; echoHoge();