フロントエンド开発の３ステップ（苍辫尘事始め）
- 2. フロントエンド やりたい
- 3. 入門記事でいきなり 重いのが見つかる 例：「gulp + browserify + reactやってみる」
- 4. npm?
- 7. 情报量おおすぎ
- 10. npm
- 11. 覚える机能は3つだけ
- 12. 1. npm init 2. npm install 3. npm run
- 13. npm init (1)
- 17. package.jsonの中身 { "name": "hello", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo "Error: no test speci?ed" && exit 1" }, "author": "", "license": "ISC" }
- 18. npm install (2)
- 19. npm install jquery ?save パッケージ名 「jquery」をネットから持ってくる
- 20. npm i jquery -S 省略形でも書ける
- 22. package.json { "name": "hello", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo "Error: no test speci?ed" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "jquery": "^2.1.3" } }
- 23. { "name": "hello", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo "Error: no test speci?ed" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "jquery": "^2.1.3" } } 以後、dependencies内は npm install だけで、自動インストール
- 24. browserify ? node_modules下にインストールされたライブラリ を、jsから参照できるようにするツール ? 普通の言語なら当たり前の機能だけど、ブラウザ上 では今までできなかった
- 25. <script src=/slideshow/ss-46539932/46539932/"assets/js/jquery.min.js"></script> var $ = require("jquery"); browserify使うとこう書ける
- 27. browserifyは 「npm install -g browserify」 でインストールできます。 npm install -gについては後述
- 28. npm run (3)
- 29. タスク実行机能
- 30. "scripts": { "build": browserify src/main.js > build/bundle.js } $ npm run build $ browserify src/main.js > build/bundle.js package.json内に下記のように書いておく とすると、npmは下記のコマンドを実行する
- 32. しぬほどシンプル
- 33. npm runでタスク一覧
- 34. 例えば npm run build npm run watch npm run serve などを書いておくと、 他人に引き継ぎやすくなる
- 36. 便利機能 というよりはお作法
- 37. 自動リロードとか は???？
- 38. npm install -g wtch
- 39. サーバ立てたい
- 40. npm install -g http-server
- 42. タスク自分書くの 面倒くさい
- 44. の プロダクトです
- 45. npm is fun
- 46. end