回答編集履歴
1
追加の質問についての回答を追記
answer
CHANGED
|
@@ -12,4 +12,62 @@
|
|
|
12
12
|
Webpackerが自動生成する[hello_vue.js](https://github.com/rails/webpacker/blob/fb9118ec6291a99605d30c3c887e48df1b3491a1/lib/install/examples/vue/hello_vue.js)によると、
|
|
13
13
|
`$mount(要素ID)`以外でVueのコンポーネントを使う場合は、`vue/dist/vue.esm`の方を使う必要があるように読み取れます。
|
|
14
14
|
|
|
15
|
-
`config/webpack/shared.js`は必ずしも必要ではありません。
|
|
15
|
+
`config/webpack/shared.js`は必ずしも必要ではありません。
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
追記(2018/01/05)
|
|
20
|
+
|
|
21
|
+
## config/webpack/shared.js について
|
|
22
|
+
こちらについては、
|
|
23
|
+
Webpacker 2系でデフォルトで生成される設定ファイルだったようです。
|
|
24
|
+
各バージョンで、自動生成されるconfigファイルは下記の通りとなります。
|
|
25
|
+
|
|
26
|
+
2系 => [https://github.com/rails/webpacker/tree/v2.0.0/lib/install/config/webpack](https://github.com/rails/webpacker/tree/v2.0.0/lib/install/config/webpack)
|
|
27
|
+
3系 => [https://github.com/rails/webpacker/tree/v3.0.0/lib/install/config/webpack](https://github.com/rails/webpacker/tree/v3.0.0/lib/install/config/webpack)
|
|
28
|
+
|
|
29
|
+
Webpackerは、3系からWebpackの設定をYAMLに隠蔽して、JavaScriptを意識せずに使えるようにする大きな変更が加わっているので、
|
|
30
|
+
shared.jsに触れている記事は、情報が古い可能性が高く、あまり参考にされない方が良いかも知れません。
|
|
31
|
+
|
|
32
|
+
ただし、development.jsとproduction.jsの間で共通で使う設定について、
|
|
33
|
+
shared.jsと言うファイルに切り出して読み込むようにするのはありだと思います。（必ずしも必要ではないと言ったのは、こちらの意図でした）
|
|
34
|
+
|
|
35
|
+
Webpackerの設定ファイルの使い方に関しては、公式のドキュメントに様々なパターンが紹介されているので、こちらを参考にしていただければと思います。
|
|
36
|
+
[https://github.com/rails/webpacker/blob/v3.2.0/docs/webpack.md](https://github.com/rails/webpacker/blob/v3.2.0/docs/webpack.md)
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
## vue/dist/vue.esm について
|
|
41
|
+
ファイルの実体としては、プロジェクト配下の、
|
|
42
|
+
node_modules/vue/dist/vue.esm.js
|
|
43
|
+
を探していただければ見つかると思います。
|
|
44
|
+
|
|
45
|
+
Webpackのバンドル対象のスクリプト中でimport文を使用した場合、
|
|
46
|
+
プロジェクトのpackage.jsonに書かれたモジュール情報を元に、
|
|
47
|
+
node_modulesディレクトリ配下のパッケージを探索しに行きます。
|
|
48
|
+
|
|
49
|
+
`import Vue from 'vue';`
|
|
50
|
+
とした時は、
|
|
51
|
+
node_modules/vue/package.jsonで"main"として指定されている、
|
|
52
|
+
node_modules/vue/dist/vue.runtime.common.js
|
|
53
|
+
がデフォルトで読み込まれます。
|
|
54
|
+
|
|
55
|
+
一方、
|
|
56
|
+
`import Vue from 'vue/dist/vue.esm';`
|
|
57
|
+
とした場合は、
|
|
58
|
+
読み込むファイルを明示的に示しているので、
|
|
59
|
+
指定のパスから読み込まれます。
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
詳しくは、
|
|
63
|
+
node_modules => Node.jsのモジュールシステム(CommonJS)
|
|
64
|
+
import / export => ES2015のモジュールシステム / Webpack
|
|
65
|
+
をそれぞれ調べていただければと思います。
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
いくつかリンクを貼っておきます
|
|
69
|
+
Webpackの入門記事 => [https://qiita.com/soarflat/items/28bf799f7e0335b68186](https://qiita.com/soarflat/items/28bf799f7e0335b68186)
|
|
70
|
+
Node.jsの入門記事 => [https://qiita.com/nextfactory/items/476c5150268e2c7db4ec](https://qiita.com/nextfactory/items/476c5150268e2c7db4ec)
|
|
71
|
+
ES2015のmodulesについて
|
|
72
|
+
・import => [https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import)
|
|
73
|
+
・export => [https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/export](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/export)
|