Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

DIST.17「こんなに変わる!npmとwebpackを使ってWEB開発をもっとラクに。」2017.08.25

1,926 views

Published on

webpackとは、サイト上で読み込む必要のあるJavaScriptやCSS、imageファイルといった複数のファイルを、1つないしは複数のファイルにまとめることができるツールですが、npmと掛け合わせて利用していくことで、開発チーム内で、統一された開発環境をwebpackを使って容易に構築することが可能です。

Published in: Technology
  • Be the first to comment

DIST.17「こんなに変わる!npmとwebpackを使ってWEB開発をもっとラクに。」2017.08.25

  1. 1. こ ん な に 変 わ る ! n p m と w e b p a c k を 使 っ て W E B 開 発 を も っ と ラ ク に 。
  2. 2. 株 式 会 社 ス パ イ ラ ル エ ッ ジ 代 表 取 締 役 W E B デ ザ イ ナ ー / W E B プ ロ グ ラ マ ー フ ロ ン エ ン ド か ら バ ッ ク エ ン ド ま で 、 多 種 多 様 な W E B サ イ ト や i O S / A n d r oi d ア プ リ を 作 っ て い ま す ! 渡 辺 知 規 簡 単 に 自 己 紹 介
  3. 3. 現 場 で こ ん な 悩 み 、 な い で す か ? 社 内 開 発 環 境 が 統 一 さ れ て い な い 。 ( 主 に 、 マ ー ク ア ッ プ エ ン ジ ニ ア や フ ロ ン ト エ ン ド エ ン ジ ニ ア ) 例 え ば 、 S a s s を 使 う に も 、 人 に よ っ て コ ン パ イ ル 環 境 が マ チ マ チ … 。 ・ ・ ・
  4. 4. 現 場 で こ ん な 悩 み 、 な い で す か ? チ ー ム ワ ー ク で 動 い て い る の に 、 ひ と り ひ と り 開 発 手 法 が 違 う と 色 々 面 倒 … ( 体 験 済 み ) 時 間 を 掛 け ず に 、 チ ー ム の 開 発 環 境 を 統 一 し た い …
  5. 5. そ ん な と き は 、 こ れ が 便 利 で す 。 [ n p m ] [ w e b p a c k ] × し か も 、 開 発 自 体 の 効 率 を あ げ た り 、 サ イ ト 自 体 を 最 適 化 す る こ と が で き ま す 。
  6. 6. n p m と は ? ・ パ ッ ケ ー ジ マ ネ ー ジ ャ ー ・ ラ イ ブ ラ リ や パ ッ ケ ー ジ の 一 元 管 理 を す る も の ・ そ れ ら の 追 加 や 削 除 が で き 、 依 存 す る フ ァ イ ル も ま と め て イ ン ス ト ー ル ・ 「 p a c k a g e.j s o n 」 を 使 っ て 管 理 ・ 1 つ の プ ロ ジ ェ ク ト に 1 つ の 「 p a c k a g e.j s o n 」 ラ イ ブ ラ リ や パ ッ ケ ー ジ っ て ど ん な の ? 例 え ば 、j Q u e r y や A n g ul a r J S 、 w e b p a c k も そ の ひ と つ
  7. 7. w e b p a c k と は ? ・ モ ジ ュ ー ル バ ン ド ラ ー ・ J a v a S c ri pt や C S S 、 画 像 を 1 つ の J S ( 又 は 複 数 フ ァ イ ル ) に ま と め る ・ 画 像 は C S S で 読 み 込 ま れ て い る フ ァ イ ル を D at a U RI に 変 換 し て 取 り 込 む ・ 1 つ の プ ロ ジ ェ ク ト に 1 つ の 「 w e b p a c k. c o n fi g.j s 」 を 使 っ て 挙 動 を 設 定 ・ S a s s や C o ff e e S c ri pt 、 T y p e S c ri pt な ど の コ ン パ イ ル も 可 能 フ ァ イ ル を ま と め る こ と で ど ん な メ リ ッ ト が あ る の ? H T M L 内 に 大 量 の C S S や J S な ど を 読 み 込 む 必 要 が な く な る 、 な ど
  8. 8. 設 定 フ ァ イ ル を 共 有 す る だ け で ・ n p m の 「 p a c k a g e.j s o n 」 ・ w e b p a c k の 「 w e b p a c k. c o n fi g.j s 」 の 2 つ を プ ロ ジ ェ ク ト ご と に 作 成 し 、 チ ー ム に 共 有 す る だ け で 、 [ n p m ] [ w e b p a c k ] × 同 じ 開 発 環 境 を 構 築 す る こ と が で き る !
  9. 9. n p m の 簡 単 な 導 入 方 法 1 . N o d e.j s の イ ン ス ト ー ル ( こ れ で n p m も 使 え る ) 2. 「 p a c k a g e.j s o n 」 の 作 成 3 . い く つ か の 質 問 に 答 え る ( p a c k a g e n a m e や v e r si o n な ど ) 4. 「 p a c k a g e.j s o n 」 が 生 成 さ れ る c d < 移 動 す る デ ィ レ ク ト リ パ ス > タ ー ミ ナ ル や コ マ ン ド プ ロ ン プ ト で 、 「 p a c k a g e.j s o n 」 を 作 成 し た フ ォ ル ダ に 移 動 n p m i nit n p m コ マ ン ド を 使 っ て …
  10. 10. ラ イ ブ ラ リ ・ パ ッ ケ ー ジ の 削 除 ・ 「 p a c k a g e.j s o n 」 に 追 加 さ れ た パ ッ ケ ー ジ が 記 載 さ れ て い く こ う す る こ と で … ・ 「 n o d e _ m o d ul e s 」 に 実 際 に イ ン ス ト ー ル さ れ て い く n p m i n st all パ ッ ケ ー ジ 名 ( 例 :j q u e r y ) 「 p a c k a g e.j s o n 」 が あ る デ ィ レ ク ト リ で … ラ イ ブ ラ リ ・ パ ッ ケ ー ジ の 追 加 n p m u ni n st all パ ッ ケ ー ジ 名 ( 例 :j q u e r y ) 「 p a c k a g e.j s o n 」 が あ る デ ィ レ ク ト リ で … パ ッ ケ ー ジ の 簡 単 な 管 理 方 法
  11. 11. 「 p a c k a g e.j s o n 」 に 記 載 さ れ た パ ッ ケ ー ジ が 一 括 で イ ン ス ト ー ル さ れ る こ う す る こ と で … n p m i n st all 「 p a c k a g e.j s o n 」 が あ る デ ィ レ ク ト リ で … 「 p a c k a g e.j s o n 」 を 渡 さ れ た 人 は … p a c k a g e.j s o n か ら の イ ン ス ト ー ル
  12. 12. ※ 「- g 」 は グ ロ ー バ ル イ ン ス ト ー ル ( 他 の プ ロ ジ ェ ク ト で も 利 用 す る ) と い う 意 味 。 ※ 「-- s a v e- d e v 」 は 「 開 発 者 の み が 利 用 す る パ ッ ケ ー ジ で す よ 」 、 と い う 意 味 。 n p m i n st all - g w e b p a c k -- s a v e- d e v n p m の 「 p a c k a g e.j s o n 」 が あ る デ ィ レ ク ト リ で … w e b p a c k の イ ン ス ト ー ル w e b p a c k の 簡 単 な 導 入 方 法
  13. 13. こ れ を 「 p a c k a g e.j s o n 」 と 同 じ デ ィ レ ク ト リ に 保 存 し て お く 。 m o d ul e. e x p o rt s = { e nt r y:  '. / ● ● / ● ●.j s',   / / エ ン ト リ ー ポ イ ン ト o ut p ut: { fil e n a m e:  ' ● ● ●.j s',  / / 出 力 先 フ ァ イ ル 名   p at h:   _ _ di r n a m e + ' / ● ●’ / / 出 力 先 デ ィ レ ク ト リ } }; w e b p a c k. c o n fi g.j s は 手 動 で 作 成 w e b p a c k. c o n fi g.j s の 作 成 複 数 の 場 合 は 配 列 指 定
  14. 14. w e b p a c k -- w at c h 「 w e b p a c k. c o n fi g.j s 」 が あ る デ ィ レ ク ト リ で … エ ン ト リ ー ポ イ ン ト に 指 定 し た フ ァ イ ル に 変 更 が あ っ た 場 合 、 自 動 で w e b p a c k の ビ ル ド が 走 る よ う に す る フ ァ イ ル の 変 更 監 視 & 自 動 ビ ル ド
  15. 15. こ う す る こ と で 、 w e b p a c k が ビ ル ド し た J S フ ァ イ ル に j Q u e r y を 一 緒 に フ ァ イ ル の 中 に 取 り 込 ん で く れ る 。 v a r $ = r e q ui r e("j q u e r y"); エ ン ト リ ー ポ イ ン ト で 指 定 し た J S フ ァ イ ル に … n p m で 追 加 し た ラ イ ブ ラ リ の 利 用 ※j Q u e r y の 場 合
  16. 16. ・ S a a s や C o ff e e S c ri pt の コ ン パ イ ル 設 定 ( ロ ー ダ ー ) ・ ま と め る フ ァ イ ル を 複 数 に 分 け た り 、 そ れ ら の 出 力 先 の 設 定 ・ ロ ー カ ル サ ー バ ー の 起 動 ( w e b p a c k- d e v- s e r v e r ) ・ C S S 内 画 像 の フ ァ イ ル へ の 取 り 込 み 設 定 ・ ま と め た フ ァ イ ル の 圧 縮 設 定 な ど な ど そ の 他 設 定 で き る こ と
  17. 17. こ の よ う に 、 各 プ ロ ジ ェ ク ト ご と に 設 定 を 行 っ た り 、 開 発 の テ ン プ レ ー ト と し て 、 n p m の 「 p a c k a g e.j s o n 」 と w e b p a c k の 「 w e b p a c k. c o n fi g.j s 」 を 、 組 み 合 わ せ て 作 成 し て 、 チ ー ム に 共 有 す る こ と に よ り 、 統 一 さ れ た 開 発 環 境 と 、 効 率 的 な 開 発 を 行 う こ と が で き る よ う に な り ま す 。 是 非 参 考 に し て み て く だ さ い ! ま と め [ n p m ] [ w e b p a c k ] ×

×