webpacker 5.1.0 → 6.0.0.beta.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (167) hide show
  1. checksums.yaml +4 -4
  2. data/.eslintrc.js +8 -8
  3. data/.github/workflows/jest.yml +38 -0
  4. data/.github/workflows/js-lint.yml +39 -0
  5. data/.github/workflows/rubocop.yml +39 -0
  6. data/.github/workflows/ruby.yml +70 -0
  7. data/.gitignore +2 -0
  8. data/.node-version +1 -1
  9. data/.rubocop.yml +11 -16
  10. data/6_0_upgrade.md +43 -0
  11. data/CHANGELOG.md +42 -2
  12. data/CONTRIBUTING.md +1 -1
  13. data/Gemfile.lock +91 -85
  14. data/README.md +226 -113
  15. data/lib/install/config/webpack/base.js +3 -0
  16. data/lib/install/config/webpack/development.js +2 -2
  17. data/lib/install/config/webpack/production.js +2 -2
  18. data/lib/install/config/webpack/test.js +2 -2
  19. data/lib/install/config/webpacker.yml +9 -38
  20. data/lib/install/javascript/packs/application.css +9 -0
  21. data/lib/install/javascript/packs/application.js +3 -1
  22. data/lib/install/template.rb +33 -19
  23. data/lib/tasks/webpacker.rake +2 -11
  24. data/lib/tasks/webpacker/binstubs.rake +6 -4
  25. data/lib/tasks/webpacker/check_binstubs.rake +4 -4
  26. data/lib/tasks/webpacker/check_node.rake +1 -1
  27. data/lib/tasks/webpacker/check_yarn.rake +2 -3
  28. data/lib/tasks/webpacker/compile.rake +4 -2
  29. data/lib/tasks/webpacker/info.rake +12 -10
  30. data/lib/tasks/webpacker/install.rake +6 -4
  31. data/lib/tasks/webpacker/verify_install.rake +2 -1
  32. data/lib/tasks/webpacker/yarn_install.rake +9 -1
  33. data/lib/webpacker/commands.rb +1 -1
  34. data/lib/webpacker/compiler.rb +20 -8
  35. data/lib/webpacker/configuration.rb +7 -23
  36. data/lib/webpacker/dev_server_runner.rb +23 -4
  37. data/lib/webpacker/helper.rb +51 -42
  38. data/lib/webpacker/manifest.rb +1 -1
  39. data/lib/webpacker/runner.rb +1 -0
  40. data/lib/webpacker/version.rb +1 -1
  41. data/lib/webpacker/webpack_runner.rb +7 -2
  42. data/package.json +27 -43
  43. data/package/__tests__/config.js +6 -27
  44. data/package/__tests__/development.js +18 -7
  45. data/package/__tests__/env.js +12 -4
  46. data/package/__tests__/production.js +6 -6
  47. data/package/__tests__/staging.js +7 -6
  48. data/package/__tests__/test.js +4 -5
  49. data/package/babel/preset.js +55 -0
  50. data/package/config.js +4 -9
  51. data/package/configPath.js +3 -0
  52. data/package/env.js +9 -4
  53. data/package/environments/__tests__/base.js +21 -36
  54. data/package/environments/base.js +63 -127
  55. data/package/environments/development.js +46 -39
  56. data/package/environments/production.js +63 -70
  57. data/package/environments/test.js +2 -2
  58. data/package/index.js +13 -8
  59. data/package/rules/babel.js +19 -10
  60. data/package/rules/coffee.js +6 -0
  61. data/package/rules/erb.js +15 -0
  62. data/package/rules/file.js +17 -18
  63. data/package/rules/index.js +16 -18
  64. data/package/rules/less.js +22 -0
  65. data/package/rules/raw.js +5 -0
  66. data/package/rules/sass.js +13 -10
  67. data/package/rules/svg.js +20 -0
  68. data/package/utils/get_style_rule.js +26 -36
  69. data/package/utils/helpers.js +26 -35
  70. data/test/compiler_test.rb +4 -11
  71. data/test/configuration_test.rb +2 -32
  72. data/test/dev_server_runner_test.rb +25 -6
  73. data/test/engine_rake_tasks_test.rb +39 -0
  74. data/test/helper_test.rb +18 -9
  75. data/test/mounted_app/Rakefile +4 -0
  76. data/test/mounted_app/test/dummy/Rakefile +3 -0
  77. data/test/mounted_app/test/dummy/bin/rails +3 -0
  78. data/test/mounted_app/test/dummy/bin/rake +3 -0
  79. data/test/mounted_app/test/dummy/config.ru +5 -0
  80. data/test/mounted_app/test/dummy/config/application.rb +10 -0
  81. data/test/mounted_app/test/dummy/config/environment.rb +3 -0
  82. data/test/mounted_app/test/dummy/config/webpacker.yml +75 -0
  83. data/test/mounted_app/test/dummy/package.json +7 -0
  84. data/test/rake_tasks_test.rb +1 -10
  85. data/test/test_app/config/webpacker.yml +3 -21
  86. data/test/test_app/config/webpacker_public_root.yml +0 -1
  87. data/test/test_app/public/packs/manifest.json +18 -13
  88. data/test/test_app/some.config.js +0 -0
  89. data/test/webpack_runner_test.rb +10 -4
  90. data/webpacker.gemspec +1 -1
  91. data/yarn.lock +2657 -6224
  92. metadata +50 -89
  93. data/.travis.yml +0 -43
  94. data/docs/assets.md +0 -119
  95. data/docs/cloud9.md +0 -310
  96. data/docs/css.md +0 -253
  97. data/docs/deployment.md +0 -130
  98. data/docs/docker.md +0 -68
  99. data/docs/engines.md +0 -213
  100. data/docs/env.md +0 -63
  101. data/docs/es6.md +0 -72
  102. data/docs/folder-structure.md +0 -66
  103. data/docs/integrations.md +0 -220
  104. data/docs/misc.md +0 -23
  105. data/docs/props.md +0 -223
  106. data/docs/testing.md +0 -136
  107. data/docs/troubleshooting.md +0 -156
  108. data/docs/typescript.md +0 -109
  109. data/docs/v4-upgrade.md +0 -142
  110. data/docs/webpack-dev-server.md +0 -92
  111. data/docs/webpack.md +0 -364
  112. data/docs/yarn.md +0 -23
  113. data/lib/install/angular.rb +0 -23
  114. data/lib/install/coffee.rb +0 -25
  115. data/lib/install/config/.browserslistrc +0 -1
  116. data/lib/install/config/babel.config.js +0 -72
  117. data/lib/install/config/postcss.config.js +0 -12
  118. data/lib/install/config/webpack/environment.js +0 -3
  119. data/lib/install/elm.rb +0 -39
  120. data/lib/install/erb.rb +0 -25
  121. data/lib/install/examples/angular/hello_angular.js +0 -7
  122. data/lib/install/examples/angular/hello_angular/app/app.component.ts +0 -9
  123. data/lib/install/examples/angular/hello_angular/app/app.module.ts +0 -16
  124. data/lib/install/examples/angular/hello_angular/index.ts +0 -8
  125. data/lib/install/examples/angular/hello_angular/polyfills.ts +0 -73
  126. data/lib/install/examples/coffee/hello_coffee.coffee +0 -4
  127. data/lib/install/examples/elm/Main.elm +0 -55
  128. data/lib/install/examples/elm/hello_elm.js +0 -16
  129. data/lib/install/examples/erb/hello_erb.js.erb +0 -6
  130. data/lib/install/examples/react/babel.config.js +0 -87
  131. data/lib/install/examples/react/hello_react.jsx +0 -26
  132. data/lib/install/examples/react/tsconfig.json +0 -21
  133. data/lib/install/examples/stimulus/application.js +0 -1
  134. data/lib/install/examples/stimulus/controllers/hello_controller.js +0 -18
  135. data/lib/install/examples/stimulus/controllers/index.js +0 -9
  136. data/lib/install/examples/svelte/app.svelte +0 -11
  137. data/lib/install/examples/svelte/hello_svelte.js +0 -20
  138. data/lib/install/examples/typescript/hello_typescript.ts +0 -4
  139. data/lib/install/examples/typescript/tsconfig.json +0 -24
  140. data/lib/install/examples/vue/app.vue +0 -22
  141. data/lib/install/examples/vue/hello_vue.js +0 -72
  142. data/lib/install/loaders/coffee.js +0 -6
  143. data/lib/install/loaders/elm.js +0 -25
  144. data/lib/install/loaders/erb.js +0 -11
  145. data/lib/install/loaders/svelte.js +0 -9
  146. data/lib/install/loaders/vue.js +0 -6
  147. data/lib/install/react.rb +0 -18
  148. data/lib/install/stimulus.rb +0 -12
  149. data/lib/install/svelte.rb +0 -29
  150. data/lib/install/typescript.rb +0 -42
  151. data/lib/install/vue.rb +0 -49
  152. data/lib/tasks/installers.rake +0 -42
  153. data/package/config_types/__tests__/config_list.js +0 -118
  154. data/package/config_types/__tests__/config_object.js +0 -43
  155. data/package/config_types/config_list.js +0 -75
  156. data/package/config_types/config_object.js +0 -55
  157. data/package/config_types/index.js +0 -7
  158. data/package/rules/module.css.js +0 -3
  159. data/package/rules/module.sass.js +0 -8
  160. data/package/rules/node_modules.js +0 -24
  161. data/package/utils/__tests__/deep_assign.js +0 -32
  162. data/package/utils/__tests__/deep_merge.js +0 -10
  163. data/package/utils/__tests__/get_style_rule.js +0 -65
  164. data/package/utils/__tests__/objectify.js +0 -9
  165. data/package/utils/deep_assign.js +0 -22
  166. data/package/utils/deep_merge.js +0 -22
  167. data/package/utils/objectify.js +0 -3
metadata CHANGED
@@ -1,15 +1,15 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: webpacker
3
3
  version: !ruby/object:Gem::Version
4
- version: 5.1.0
4
+ version: 6.0.0.beta.1
5
5
  platform: ruby
6
6
  authors:
7
7
  - David Heinemeier Hansson
8
8
  - Gaurav Tiwari
9
- autorequire:
9
+ autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2020-04-19 00:00:00.000000000 Z
12
+ date: 2020-12-23 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: activesupport
@@ -85,16 +85,16 @@ dependencies:
85
85
  name: rubocop
86
86
  requirement: !ruby/object:Gem::Requirement
87
87
  requirements:
88
- - - "<"
88
+ - - '='
89
89
  - !ruby/object:Gem::Version
90
- version: '0.69'
90
+ version: 0.93.1
91
91
  type: :development
92
92
  prerelease: false
93
93
  version_requirements: !ruby/object:Gem::Requirement
94
94
  requirements:
95
- - - "<"
95
+ - - '='
96
96
  - !ruby/object:Gem::Version
97
- version: '0.69'
97
+ version: 0.93.1
98
98
  - !ruby/object:Gem::Dependency
99
99
  name: rubocop-performance
100
100
  requirement: !ruby/object:Gem::Requirement
@@ -109,7 +109,7 @@ dependencies:
109
109
  - - ">="
110
110
  - !ruby/object:Gem::Version
111
111
  version: '0'
112
- description:
112
+ description:
113
113
  email:
114
114
  - david@basecamp.com
115
115
  - gaurav@gauravtiwari.co.uk
@@ -119,10 +119,14 @@ extra_rdoc_files: []
119
119
  files:
120
120
  - ".eslintignore"
121
121
  - ".eslintrc.js"
122
+ - ".github/workflows/jest.yml"
123
+ - ".github/workflows/js-lint.yml"
124
+ - ".github/workflows/rubocop.yml"
125
+ - ".github/workflows/ruby.yml"
122
126
  - ".gitignore"
123
127
  - ".node-version"
124
128
  - ".rubocop.yml"
125
- - ".travis.yml"
129
+ - 6_0_upgrade.md
126
130
  - CHANGELOG.md
127
131
  - CONTRIBUTING.md
128
132
  - Gemfile
@@ -130,77 +134,20 @@ files:
130
134
  - MIT-LICENSE
131
135
  - README.md
132
136
  - Rakefile
133
- - docs/assets.md
134
- - docs/cloud9.md
135
- - docs/css.md
136
- - docs/deployment.md
137
- - docs/docker.md
138
- - docs/engines.md
139
- - docs/env.md
140
- - docs/es6.md
141
- - docs/folder-structure.md
142
- - docs/integrations.md
143
- - docs/misc.md
144
- - docs/props.md
145
- - docs/testing.md
146
- - docs/troubleshooting.md
147
- - docs/typescript.md
148
- - docs/v4-upgrade.md
149
- - docs/webpack-dev-server.md
150
- - docs/webpack.md
151
- - docs/yarn.md
152
137
  - gemfiles/Gemfile-rails-edge
153
138
  - gemfiles/Gemfile-rails.5.2.x
154
139
  - gemfiles/Gemfile-rails.6.0.x
155
- - lib/install/angular.rb
156
140
  - lib/install/bin/webpack
157
141
  - lib/install/bin/webpack-dev-server
158
142
  - lib/install/binstubs.rb
159
- - lib/install/coffee.rb
160
- - lib/install/config/.browserslistrc
161
- - lib/install/config/babel.config.js
162
- - lib/install/config/postcss.config.js
143
+ - lib/install/config/webpack/base.js
163
144
  - lib/install/config/webpack/development.js
164
- - lib/install/config/webpack/environment.js
165
145
  - lib/install/config/webpack/production.js
166
146
  - lib/install/config/webpack/test.js
167
147
  - lib/install/config/webpacker.yml
168
- - lib/install/elm.rb
169
- - lib/install/erb.rb
170
- - lib/install/examples/angular/hello_angular.js
171
- - lib/install/examples/angular/hello_angular/app/app.component.ts
172
- - lib/install/examples/angular/hello_angular/app/app.module.ts
173
- - lib/install/examples/angular/hello_angular/index.ts
174
- - lib/install/examples/angular/hello_angular/polyfills.ts
175
- - lib/install/examples/coffee/hello_coffee.coffee
176
- - lib/install/examples/elm/Main.elm
177
- - lib/install/examples/elm/hello_elm.js
178
- - lib/install/examples/erb/hello_erb.js.erb
179
- - lib/install/examples/react/babel.config.js
180
- - lib/install/examples/react/hello_react.jsx
181
- - lib/install/examples/react/tsconfig.json
182
- - lib/install/examples/stimulus/application.js
183
- - lib/install/examples/stimulus/controllers/hello_controller.js
184
- - lib/install/examples/stimulus/controllers/index.js
185
- - lib/install/examples/svelte/app.svelte
186
- - lib/install/examples/svelte/hello_svelte.js
187
- - lib/install/examples/typescript/hello_typescript.ts
188
- - lib/install/examples/typescript/tsconfig.json
189
- - lib/install/examples/vue/app.vue
190
- - lib/install/examples/vue/hello_vue.js
148
+ - lib/install/javascript/packs/application.css
191
149
  - lib/install/javascript/packs/application.js
192
- - lib/install/loaders/coffee.js
193
- - lib/install/loaders/elm.js
194
- - lib/install/loaders/erb.js
195
- - lib/install/loaders/svelte.js
196
- - lib/install/loaders/vue.js
197
- - lib/install/react.rb
198
- - lib/install/stimulus.rb
199
- - lib/install/svelte.rb
200
150
  - lib/install/template.rb
201
- - lib/install/typescript.rb
202
- - lib/install/vue.rb
203
- - lib/tasks/installers.rake
204
151
  - lib/tasks/webpacker.rake
205
152
  - lib/tasks/webpacker/binstubs.rake
206
153
  - lib/tasks/webpacker/check_binstubs.rake
@@ -236,12 +183,9 @@ files:
236
183
  - package/__tests__/production.js
237
184
  - package/__tests__/staging.js
238
185
  - package/__tests__/test.js
186
+ - package/babel/preset.js
239
187
  - package/config.js
240
- - package/config_types/__tests__/config_list.js
241
- - package/config_types/__tests__/config_object.js
242
- - package/config_types/config_list.js
243
- - package/config_types/config_object.js
244
- - package/config_types/index.js
188
+ - package/configPath.js
245
189
  - package/dev_server.js
246
190
  - package/env.js
247
191
  - package/environments/__tests__/base.js
@@ -251,30 +195,35 @@ files:
251
195
  - package/environments/test.js
252
196
  - package/index.js
253
197
  - package/rules/babel.js
198
+ - package/rules/coffee.js
254
199
  - package/rules/css.js
200
+ - package/rules/erb.js
255
201
  - package/rules/file.js
256
202
  - package/rules/index.js
257
- - package/rules/module.css.js
258
- - package/rules/module.sass.js
259
- - package/rules/node_modules.js
203
+ - package/rules/less.js
204
+ - package/rules/raw.js
260
205
  - package/rules/sass.js
261
- - package/utils/__tests__/deep_assign.js
262
- - package/utils/__tests__/deep_merge.js
263
- - package/utils/__tests__/get_style_rule.js
264
- - package/utils/__tests__/objectify.js
265
- - package/utils/deep_assign.js
266
- - package/utils/deep_merge.js
206
+ - package/rules/svg.js
267
207
  - package/utils/get_style_rule.js
268
208
  - package/utils/helpers.js
269
- - package/utils/objectify.js
270
209
  - test/command_test.rb
271
210
  - test/compiler_test.rb
272
211
  - test/configuration_test.rb
273
212
  - test/dev_server_runner_test.rb
274
213
  - test/dev_server_test.rb
214
+ - test/engine_rake_tasks_test.rb
275
215
  - test/env_test.rb
276
216
  - test/helper_test.rb
277
217
  - test/manifest_test.rb
218
+ - test/mounted_app/Rakefile
219
+ - test/mounted_app/test/dummy/Rakefile
220
+ - test/mounted_app/test/dummy/bin/rails
221
+ - test/mounted_app/test/dummy/bin/rake
222
+ - test/mounted_app/test/dummy/config.ru
223
+ - test/mounted_app/test/dummy/config/application.rb
224
+ - test/mounted_app/test/dummy/config/environment.rb
225
+ - test/mounted_app/test/dummy/config/webpacker.yml
226
+ - test/mounted_app/test/dummy/package.json
278
227
  - test/rake_tasks_test.rb
279
228
  - test/test_app/Rakefile
280
229
  - test/test_app/app/javascript/packs/application.js
@@ -290,6 +239,7 @@ files:
290
239
  - test/test_app/config/webpacker_public_root.yml
291
240
  - test/test_app/package.json
292
241
  - test/test_app/public/packs/manifest.json
242
+ - test/test_app/some.config.js
293
243
  - test/test_app/yarn.lock
294
244
  - test/test_helper.rb
295
245
  - test/webpack_runner_test.rb
@@ -300,9 +250,9 @@ homepage: https://github.com/rails/webpacker
300
250
  licenses:
301
251
  - MIT
302
252
  metadata:
303
- source_code_uri: https://github.com/rails/webpacker/tree/v5.1.0
304
- changelog_uri: https://github.com/rails/webpacker/blob/v5.1.0/CHANGELOG.md
305
- post_install_message:
253
+ source_code_uri: https://github.com/rails/webpacker/tree/v6.0.0.beta.1
254
+ changelog_uri: https://github.com/rails/webpacker/blob/v6.0.0.beta.1/CHANGELOG.md
255
+ post_install_message:
306
256
  rdoc_options: []
307
257
  require_paths:
308
258
  - lib
@@ -313,12 +263,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
313
263
  version: 2.4.0
314
264
  required_rubygems_version: !ruby/object:Gem::Requirement
315
265
  requirements:
316
- - - ">="
266
+ - - ">"
317
267
  - !ruby/object:Gem::Version
318
- version: '0'
268
+ version: 1.3.1
319
269
  requirements: []
320
270
  rubygems_version: 3.0.3
321
- signing_key:
271
+ signing_key:
322
272
  specification_version: 4
323
273
  summary: Use webpack to manage app-like JavaScript modules in Rails
324
274
  test_files:
@@ -327,9 +277,19 @@ test_files:
327
277
  - test/configuration_test.rb
328
278
  - test/dev_server_runner_test.rb
329
279
  - test/dev_server_test.rb
280
+ - test/engine_rake_tasks_test.rb
330
281
  - test/env_test.rb
331
282
  - test/helper_test.rb
332
283
  - test/manifest_test.rb
284
+ - test/mounted_app/Rakefile
285
+ - test/mounted_app/test/dummy/Rakefile
286
+ - test/mounted_app/test/dummy/bin/rails
287
+ - test/mounted_app/test/dummy/bin/rake
288
+ - test/mounted_app/test/dummy/config.ru
289
+ - test/mounted_app/test/dummy/config/application.rb
290
+ - test/mounted_app/test/dummy/config/environment.rb
291
+ - test/mounted_app/test/dummy/config/webpacker.yml
292
+ - test/mounted_app/test/dummy/package.json
333
293
  - test/rake_tasks_test.rb
334
294
  - test/test_app/Rakefile
335
295
  - test/test_app/app/javascript/packs/application.js
@@ -345,6 +305,7 @@ test_files:
345
305
  - test/test_app/config/webpacker_public_root.yml
346
306
  - test/test_app/package.json
347
307
  - test/test_app/public/packs/manifest.json
308
+ - test/test_app/some.config.js
348
309
  - test/test_app/yarn.lock
349
310
  - test/test_helper.rb
350
311
  - test/webpack_runner_test.rb
@@ -1,43 +0,0 @@
1
- language: ruby
2
- dist: xenial
3
- before_install:
4
- - gem install rubygems-update && update_rubygems
5
- - yes | rvm @global do gem install bundler -v 2.1.4 || true
6
- rvm:
7
- - 2.4.9
8
- - 2.5.5
9
- - 2.6.5
10
- - 2.7.0
11
- - ruby-head
12
- gemfile:
13
- - gemfiles/Gemfile-rails.5.2.x
14
- - gemfiles/Gemfile-rails.6.0.x
15
- - gemfiles/Gemfile-rails-edge
16
- cache:
17
- bundler: true
18
- directories:
19
- - node_modules
20
- yarn: true
21
-
22
- install:
23
- - bundle install --jobs 3 --retry 3
24
- - nvm install 12
25
- - node -v
26
- - npm i -g yarn
27
- - yarn
28
- script:
29
- - yarn lint
30
- - yarn test
31
- - bundle exec rubocop
32
- - bundle exec rake test
33
- matrix:
34
- allow_failures:
35
- - gemfile: gemfiles/Gemfile-rails-edge
36
- - rvm: ruby-head
37
- exclude:
38
- - rvm: 2.4.9
39
- gemfile: gemfiles/Gemfile-rails-edge
40
- - rvm: 2.5.5
41
- gemfile: gemfiles/Gemfile-rails-edge
42
- - rvm: 2.4.9
43
- gemfile: gemfiles/Gemfile-rails.6.0.x
@@ -1,119 +0,0 @@
1
- # Assets
2
-
3
-
4
- Static assets like images and fonts support is enabled out-of-box
5
- and you can link them into your JavaScript app code and have them
6
- compiled automatically.
7
-
8
-
9
- ## Import from node modules
10
-
11
- You can also import styles from `node_modules` using the following syntax.
12
- Please note that your styles will always be extracted into `[pack_name].css`:
13
-
14
- ```sass
15
- // app/javascript/styles.sass
16
- // ~ to tell webpack that this is not a relative import:
17
-
18
- @import '~@material/animation/mdc-animation'
19
- @import '~bootstrap/dist/css/bootstrap'
20
- ```
21
-
22
- ```js
23
- // Your main app pack
24
- // app/javascript/packs/app.js
25
-
26
- import '../styles'
27
- ```
28
-
29
- ```erb
30
- <%# In your views %>
31
-
32
- <%= javascript_pack_tag 'app' %>
33
- <%= stylesheet_pack_tag 'app' %>
34
- ```
35
-
36
-
37
- ## Import from Sprockets using helpers
38
-
39
- It's possible to link to assets that have been precompiled by Sprockets. Add the `.erb` extension to your JavaScript file, then you can use Sprockets' asset helpers:
40
-
41
- ```erb
42
- <%# app/javascript/my_pack/example.js.erb %>
43
-
44
- <% helpers = ActionController::Base.helpers %>
45
- const railsImagePath = "<%= helpers.image_path('rails.png') %>"
46
- ```
47
-
48
- This is enabled by the `rails-erb-loader` loader rule in `config/webpack/loaders/erb.js`.
49
-
50
-
51
- ## Using babel module resolver
52
-
53
- You can also use [babel-plugin-module-resolver](https://github.com/tleunen/babel-plugin-module-resolver) to reference assets directly from `app/assets/**`
54
-
55
- ```bash
56
- yarn add babel-plugin-module-resolver
57
- ```
58
-
59
- Specify the plugin in your `babel.config.js` with the custom root or alias. Here's an example:
60
-
61
- ```js
62
- {
63
- plugins: [
64
- [require("babel-plugin-module-resolver").default, {
65
- "root": ["./app"],
66
- "alias": {
67
- "assets": "./assets"
68
- }
69
- }]
70
- ]
71
- }
72
- ```
73
-
74
- And then within your javascript app code:
75
-
76
- ```js
77
- // Note: we don't have to do any ../../ jazz
78
-
79
- import FooImage from 'assets/images/foo-image.png'
80
- import 'assets/stylesheets/bar'
81
- ```
82
-
83
-
84
- ## Link in your Rails views
85
-
86
- You can also link `js/images/styles/fonts` used within your js app in views using
87
- `asset_pack_path` and `image_pack_tag` helpers. These helpers are useful in cases where you just want to
88
- create a `<link rel="prefetch">` or `<img />` for an asset.
89
-
90
- ```yml
91
- app/javascript:
92
- - packs
93
- - app.js
94
- - images
95
- - calendar.png
96
- ```
97
-
98
- ```js
99
- // app/javascript/packs/app.js (or any of your packs)
100
-
101
- // import all image files in a folder:
102
- require.context('../images', true)
103
- ```
104
-
105
- ```erb
106
- <%# Rails view, for example app/views/layouts/application.html.erb %>
107
-
108
- <img src="<%= asset_pack_path 'media/images/calendar.png' %>" />
109
- <% # => <img src="/packs/media/images/calendar-k344a6d59eef8632c9d1.png" /> %>
110
-
111
- <%= image_pack_tag 'media/images/calendar.png' %>
112
- <% # => <img src="/packs/media/images/calendar-k344a6d59eef8632c9d1.png" /> %>
113
-
114
- <%# no path resolves to default 'images' folder: %>
115
- <%= image_pack_tag 'calendar.png' %>
116
- <% # => <img src="/packs/media/images/calendar-k344a6d59eef8632c9d1.png" /> %>
117
- ```
118
-
119
- Note you need to add a `media/` prefix (not `/media/`) to any subfolder structure you might have in `app/javascript`. See more examples in the [tests](https://github.com/rails/webpacker/blob/0b86cadb5ed921e2c1538382e72a236ec30a5d97/test/helper_test.rb#L37).
@@ -1,310 +0,0 @@
1
- # Webpack dev server and Rails on Cloud9
2
-
3
- **Please note that this article is particularly relevant when
4
- migrating the [`webpacker`] gem from v3.0.1 to v3.0.2, as described in
5
- the [below](#binstub-versions).**
6
-
7
- [**`[Go to tl;dr]`**](#tldr)
8
-
9
- ## Contents
10
-
11
- - [Context](#context)
12
- - [Binstub versions](#binstub-versions)
13
- - [Quick solution](#quick-solution)
14
- - [Flexible solution](#flexible-solution)
15
- - [Sources](#sources)
16
- - [Versions](#versions)
17
- - [tl;dr](#tldr)
18
-
19
- ## Context
20
-
21
- This article describes how to properly configure
22
- [`webpack-dev-server`] with [`webpacker`] gem on a [Cloud9] workspace.
23
- After a preliminary remark about the proper binstub version of the
24
- `./bin/webpack-dev-server` script, this article presents two ways to
25
- tackle the task: a simple and [quick solution](#quick-solution), which
26
- is sufficient if we work alone on a project, and a slightly more
27
- involved but [flexible approach](#flexible-solution), that can be
28
- useful when several people might work in the same codebase.
29
-
30
- [Cloud9]: https://c9.io
31
- [`webpack-dev-server`]: https://github.com/webpack/webpack-dev-server
32
- [`webpacker`]: https://github.com/rails/webpacker
33
-
34
- ## Binstub versions
35
-
36
- A lot of the confusion about the [`webpack-dev-server`] options and
37
- why they might not be properly taken into account, might be due to an
38
- outdated version of the `./bin/webpack-dev-server` script. The script
39
- created by the `rails webpacker:install` task of the [`webpacker`] gem
40
- v3.0.1 ([source][v3.0.1/lib/install/bin/webpack-dev-server.tt]) is not
41
- compatible with how v3.0.2 (sic) of the gem handles the
42
- [`webpack-dev-server`] option flags (see full list of
43
- [versions](#versions) below), which logically expects the
44
- corresponding [binstub version][#833] of the script
45
- ([source][v3.0.2/exe/webpack-dev-server]). So please make sure that
46
- you are using the [correct binstub][v3.0.2/exe/webpack-dev-server]
47
- (the same applies to [`./bin/webpack`][v3.0.2/exe/webpack]). To be
48
- fair, the [changelog of v3.0.2] properly mentions the change:
49
-
50
- > - Added: Binstubs [#833]
51
- > - (...)
52
- > - Removed: Inline CLI args for dev server binstub, use env variables
53
- instead
54
-
55
- [changelog of v3.0.2]: https://github.com/rails/webpacker/blob/v3.0.2/CHANGELOG.md#302---2017-10-04
56
- [v3.0.1/lib/install/bin/webpack-dev-server.tt]: https://github.com/rails/webpacker/blob/v3.0.1/lib/install/bin/webpack-dev-server.tt
57
- [v3.0.2/exe/webpack-dev-server]: https://github.com/rails/webpacker/blob/v3.0.2/exe/webpack-dev-server
58
- [v3.0.2/exe/webpack]: https://github.com/rails/webpacker/blob/v3.0.2/exe/webpack
59
- [#833]: https://github.com/rails/webpacker/pull/833/files
60
-
61
- ## Quick solution
62
-
63
- If you are working alone, the easiest way to fix the configuration of
64
- the [`webpack-dev-server`] is to modify the `development.dev_server`
65
- entry of the `config/webpacker.yml` file.
66
-
67
- ### `config/webpacker.yml` file
68
-
69
- The `development.dev_server` entry of the `config/webpacker.yml` file
70
- has to be changed from the following default values:
71
-
72
- ```yaml
73
- dev_server:
74
- https: false
75
- host: localhost
76
- port: 3035
77
- public: localhost:3035
78
- hmr: false
79
- # Inline should be set to true if using HMR
80
- inline: true
81
- overlay: true
82
- disable_host_check: true
83
- use_local_ip: false
84
- ```
85
-
86
- into these custom configuration:
87
-
88
- ```yaml
89
- dev_server:
90
- https: true
91
- host: localhost
92
- port: 8082
93
- public: your-workspace-name-yourusername.c9users.io:8082
94
- hmr: false
95
- inline: false
96
- overlay: true
97
- disable_host_check: true
98
- use_local_ip: false
99
- ```
100
-
101
- You can obtain the value `your-workspace-name-yourusername.c9users.io`
102
- for your [Cloud9] workspace with `echo ${C9_HOSTNAME}`.
103
-
104
- There are four main differences with the approaches found in the
105
- mentioned [sources](#sources):
106
-
107
- - Some solutions suggested to set the [`host`][devserver-host] option
108
- to `your-workspace-name-yourusername.c9users.io`, which required to
109
- add a line to the `/etc/hosts` file by running `echo "0.0.0.0
110
- ${C9_HOSTNAME}" | sudo tee -a /etc/hosts`. This was only necessary
111
- due to restrictions in previous versions of [`webpacker`] and how
112
- the value of the [`public`][devserver-public] setting was
113
- calculated. Currently it is [no longer necessary][pr-comment-hosts]
114
- to modify the `/etc/hosts` file because the [`host`][devserver-host]
115
- setting can be kept as `localhost`.
116
-
117
- [pr-comment-hosts]: https://github.com/rails/webpacker/pull/1033#pullrequestreview-78992024
118
-
119
- - Some solutions stressed the need to set the
120
- [`https`][devserver-https] option to `false` but this failed with
121
- `net::ERR_ABORTED` in the browser console and raised the following
122
- exception in the server when the client tried to get the
123
- JavaScript sources:
124
-
125
- ```
126
- #<OpenSSL::SSL::SSLError: SSL_connect SYSCALL returned=5 errno=0 state=unknown state>
127
- ```
128
-
129
- Setting `https: true` removes the issue.
130
-
131
- - By leaving the [`inline`][devserver-inline] option to the default
132
- `false` value, the live compilation still works but the browser
133
- console constantly reports the following error:
134
-
135
- ```
136
- Failed to load https://your-workspace-name-yourusername.c9users.io:8082/sockjs-node/info?t=1511016561187: No 'Access-Control-Allow-Origin' header is present on the requested resource.
137
- Origin 'https://your-workspace-name-yourusername.c9users.io' is therefore not allowed access. The response had HTTP status code 503.
138
- ```
139
-
140
- Setting `inline: false` removes the issue.
141
-
142
-
143
- - None of the solutions suggested to set the
144
- [`public`][devserver-public] option in the `config/webpacker.yml`
145
- file and some suggested to pass it to the `webpack-dev-server`
146
- command line. By setting it in the configuration file we don't need
147
- to care about it in the terminal.
148
-
149
- [devserver-host]: https://webpack.js.org/configuration/dev-server/#devserver-host
150
- [devserver-https]: https://webpack.js.org/configuration/dev-server/#devserver-https
151
- [devserver-inline]: https://webpack.js.org/configuration/dev-server/#devserver-inline
152
- [devserver-public]: https://webpack.js.org/configuration/dev-server/#devserver-public
153
-
154
- With this configuration, running as usual `./bin/webpack-dev-server`
155
- in one terminal and `./bin/rails s -b $IP -p $PORT` in another should
156
- work.
157
-
158
- ## Flexible solution
159
-
160
- The previous solution is useful and fast to implement, but if you are
161
- working with other people on the same repo it can be tricky to
162
- maintain the proper configuration in the `config/webpacker.yml` file.
163
- Moreover, the hostname of your [Cloud9] workspace is hardcoded, so
164
- that the configuration is not portable.
165
-
166
- A hint about another way to configure the `webpack-dev-server` can be
167
- found in the [README of this repo][`webpacker` documentation]:
168
-
169
- > You can use environment variables as options supported by
170
- > webpack-dev-server in the form `WEBPACKER_DEV_SERVER_<OPTION>`.
171
- > Please note that these environment variables will always take
172
- > precedence over the ones already set in the configuration file.
173
-
174
- Note that when the configuration of the [`webpack-dev-server`] is
175
- tweaked with ENV variables, those same values _have to be passed_ to
176
- the `rails server` process as well in order to let it use the _same_
177
- configuration.
178
-
179
- Taking that into account, a flexible solution can be implemented using
180
- [`foreman`] with the following `Procfile.dev`:
181
-
182
- [`foreman`]: https://github.com/ddollar/foreman
183
-
184
- ```Procfile
185
- web: ./bin/rails server -b ${RAILS_SERVER_BINDING:-localhost} -p ${RAILS_SERVER_PORT:-3000}
186
- webpacker: ./bin/webpack-dev-server
187
- ```
188
-
189
- and this `bin/start` script:
190
-
191
- ```bash
192
- #!/bin/bash
193
-
194
- # Immediately exit script on first error
195
- set -e -o pipefail
196
-
197
- APP_ROOT_FOLDER="$( cd "$( dirname "${BASH_SOURCE[0]}" )/.." && pwd )"
198
- cd "${APP_ROOT_FOLDER}"
199
-
200
- if [ -n "${C9_USER}" ]; then
201
- # We are in a Cloud9 machine
202
-
203
- # Make sure that Postgres is running
204
- sudo service postgresql status || sudo service postgresql start
205
-
206
- # Adapt the configuration of the webpack-dev-server
207
- export APP_DOMAIN="${C9_HOSTNAME}"
208
- export RAILS_SERVER_BINDING='0.0.0.0'
209
- export RAILS_SERVER_PORT='8080'
210
- export WEBPACKER_DEV_SERVER_PORT='8082'
211
- export WEBPACKER_DEV_SERVER_HTTPS='true'
212
- export WEBPACKER_DEV_SERVER_HOST="localhost"
213
- export WEBPACKER_DEV_SERVER_PUBLIC="${C9_HOSTNAME}:${WEBPACKER_DEV_SERVER_PORT}"
214
- export WEBPACKER_DEV_SERVER_HMR='false'
215
- export WEBPACKER_DEV_SERVER_INLINE='false'
216
- export WEBPACKER_DEV_SERVER_OVERLAY='true'
217
- export WEBPACKER_DEV_SERVER_DISABLE_HOST_CHECK='true'
218
- export WEBPACKER_DEV_SERVER_USE_LOCAL_IP='false'
219
- fi
220
-
221
- foreman start -f Procfile.dev
222
- ```
223
-
224
- With these two scripts in place, the application can always be started
225
- by running `bin/start`, in both [Cloud9] and other systems. The
226
- trick is that by exporting the `WEBPACKER_DEV_SERVER_*` variables
227
- before calling `foreman start`, we make sure that those values are
228
- available to both `webpack-dev-server` and `rails server` processes.
229
-
230
- ## Sources
231
-
232
- - ["Webpack dev server and Rails on Cloud9"][original-article] (the
233
- original source for the present article, inspired by this
234
- [comment][original-comment])
235
- - ["Making Webpacker run on Cloud 9"] (GitHub issue)
236
- - ["Anyone here got webpack-dev-server to work on Cloud 9?"] (GitHub issue)
237
- - [`webpacker` documentation]
238
- - [`webpacker/dev_server.rb` code]
239
- - [`webpack-dev-server` documentation]
240
- - ["Using Rails With Webpack in Cloud 9"] (blog article)
241
-
242
- [original-article]: http://rbf.io/en/blog/2017/11/18/webpack-dev-server-and-rails-on-cloud9/
243
- [original-comment]: https://github.com/rails/webpacker/issues/176#issuecomment-345532309
244
- ["Making Webpacker run on Cloud 9"]: https://github.com/rails/webpacker/issues/176
245
- ["Anyone here got webpack-dev-server to work on Cloud 9?"]: https://github.com/webpack/webpack-dev-server/issues/230
246
- [`webpacker` documentation]: https://github.com/rails/webpacker/tree/v3.0.2#development
247
- [`webpacker/dev_server.rb` code]: https://github.com/rails/webpacker/blob/v3.0.2/lib/webpacker/dev_server.rb#L55
248
- [`webpack-dev-server` documentation]: https://webpack.js.org/configuration/dev-server/
249
- ["Using Rails With Webpack in Cloud 9"]: http://aalvarez.me/blog/posts/using-rails-with-webpack-in-cloud-9.html
250
-
251
- ## Versions
252
-
253
- Since things in this ecosystem move fast, it's important to mention the
254
- versions of the world for which this documentation is relevant:
255
-
256
- ```shell
257
- $ egrep '^ ?(ruby|webpacker|rails) ' Gemfile.lock
258
- rails (5.1.4)
259
- webpacker (3.0.2)
260
- ruby 2.4.2p198
261
-
262
- $ yarn versions
263
- yarn versions v1.1.0
264
- { http_parser: '2.7.0',
265
- node: '8.5.0',
266
- v8: '6.0.287.53',
267
- uv: '1.14.1',
268
- zlib: '1.2.11',
269
- ares: '1.10.1-DEV',
270
- modules: '57',
271
- nghttp2: '1.25.0',
272
- openssl: '1.0.2l',
273
- icu: '59.1',
274
- unicode: '9.0',
275
- cldr: '31.0.1',
276
- tz: '2017b' }
277
-
278
- $ cat /etc/os-release | head -6
279
- NAME="Ubuntu"
280
- VERSION="14.04.5 LTS, Trusty Tahr"
281
- ID=ubuntu
282
- ID_LIKE=debian
283
- PRETTY_NAME="Ubuntu 14.04.5 LTS"
284
- VERSION_ID="14.04"
285
- ```
286
-
287
- Everything was tested using Chrome Version 62.
288
-
289
- ## tl;dr
290
-
291
- 1. Make sure that you are running the [proper binstub
292
- version](#binstub-versions) of `./bin/webpack-dev-server`.
293
-
294
- 1. Change the `development.dev_server` entry `config/webpacker.yml` file into:
295
-
296
- ```yaml
297
- dev_server:
298
- https: true
299
- host: localhost
300
- port: 8082
301
- public: your-workspace-name-yourusername.c9users.io:8082
302
- hmr: false
303
- inline: false
304
- overlay: true
305
- disable_host_check: true
306
- use_local_ip: false
307
- ```
308
-
309
- 1. Now running as usual `./bin/webpack-dev-server` in one terminal and
310
- `./bin/rails s -b $IP -p $PORT` in another should work as expected.