webpacker 5.4.4 → 6.0.0.beta
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/.eslintrc.js +1 -1
- data/.github/workflows/ruby.yml +28 -4
- data/.gitignore +2 -0
- data/.node-version +1 -1
- data/.rubocop.yml +3 -111
- data/6_0_upgrade.md +43 -0
- data/CHANGELOG.md +19 -26
- data/Gemfile.lock +91 -94
- data/README.md +215 -98
- data/gemfiles/Gemfile-rails-edge +1 -1
- data/lib/install/config/webpack/base.js +3 -0
- data/lib/install/config/webpack/development.js +2 -2
- data/lib/install/config/webpack/production.js +2 -2
- data/lib/install/config/webpack/test.js +2 -2
- data/lib/install/config/webpacker.yml +8 -37
- data/lib/install/javascript/packs/application.css +9 -0
- data/lib/install/javascript/packs/application.js +3 -1
- data/lib/install/template.rb +33 -27
- data/lib/tasks/webpacker/binstubs.rake +6 -4
- data/lib/tasks/webpacker/check_binstubs.rake +4 -4
- data/lib/tasks/webpacker/check_yarn.rake +1 -1
- data/lib/tasks/webpacker/compile.rake +4 -2
- data/lib/tasks/webpacker/info.rake +12 -10
- data/lib/tasks/webpacker/install.rake +6 -4
- data/lib/tasks/webpacker/verify_install.rake +2 -1
- data/lib/tasks/webpacker/yarn_install.rake +9 -7
- data/lib/tasks/webpacker.rake +2 -11
- data/lib/webpacker/compiler.rb +15 -8
- data/lib/webpacker/configuration.rb +10 -45
- data/lib/webpacker/dev_server_runner.rb +21 -2
- data/lib/webpacker/env.rb +1 -5
- data/lib/webpacker/helper.rb +22 -32
- data/lib/webpacker/manifest.rb +1 -1
- data/lib/webpacker/version.rb +1 -1
- data/lib/webpacker/webpack_runner.rb +5 -0
- data/package/__tests__/config.js +5 -37
- data/package/__tests__/development.js +9 -11
- data/package/__tests__/env.js +12 -4
- data/package/__tests__/production.js +6 -6
- data/package/__tests__/staging.js +7 -6
- data/package/__tests__/test.js +4 -5
- data/package/babel/preset.js +55 -0
- data/package/config.js +3 -11
- data/package/env.js +8 -2
- data/package/environments/__tests__/base.js +15 -47
- data/package/environments/base.js +62 -125
- data/package/environments/development.js +45 -44
- data/package/environments/production.js +63 -68
- data/package/environments/test.js +2 -2
- data/package/index.js +13 -8
- data/package/rules/babel.js +9 -7
- data/package/rules/coffee.js +6 -0
- data/package/rules/erb.js +15 -0
- data/package/rules/file.js +19 -19
- data/package/rules/index.js +15 -18
- data/package/rules/less.js +22 -0
- data/package/rules/sass.js +10 -10
- data/package/rules/svg.js +20 -0
- data/package/utils/get_style_rule.js +26 -36
- data/package/utils/helpers.js +26 -35
- data/package.json +29 -45
- data/test/compiler_test.rb +0 -12
- data/test/configuration_test.rb +1 -32
- data/test/dev_server_runner_test.rb +24 -5
- data/test/engine_rake_tasks_test.rb +39 -0
- data/test/helper_test.rb +24 -30
- data/test/mounted_app/Rakefile +4 -0
- data/test/mounted_app/test/dummy/Rakefile +3 -0
- data/test/mounted_app/test/dummy/bin/rails +3 -0
- data/test/mounted_app/test/dummy/bin/rake +3 -0
- data/test/mounted_app/test/dummy/config/application.rb +10 -0
- data/test/mounted_app/test/dummy/config/environment.rb +3 -0
- data/test/mounted_app/test/dummy/config/webpacker.yml +75 -0
- data/test/mounted_app/test/dummy/config.ru +5 -0
- data/test/mounted_app/test/dummy/package.json +7 -0
- data/test/rake_tasks_test.rb +1 -10
- data/test/test_app/config/webpacker.yml +1 -25
- data/test/test_app/config/webpacker_public_root.yml +0 -1
- data/test/test_app/public/packs/manifest.json +17 -13
- data/test/test_app/some.config.js +0 -0
- data/test/webpack_runner_test.rb +9 -3
- data/yarn.lock +2505 -4943
- metadata +37 -82
- data/docs/assets.md +0 -119
- data/docs/cloud9.md +0 -310
- data/docs/css.md +0 -308
- data/docs/deployment.md +0 -130
- data/docs/docker.md +0 -68
- data/docs/engines.md +0 -213
- data/docs/env.md +0 -63
- data/docs/es6.md +0 -72
- data/docs/folder-structure.md +0 -66
- data/docs/integrations.md +0 -220
- data/docs/misc.md +0 -23
- data/docs/props.md +0 -223
- data/docs/target.md +0 -22
- data/docs/testing.md +0 -136
- data/docs/troubleshooting.md +0 -158
- data/docs/typescript.md +0 -190
- data/docs/v4-upgrade.md +0 -142
- data/docs/webpack-dev-server.md +0 -92
- data/docs/webpack.md +0 -364
- data/docs/yarn.md +0 -23
- data/lib/install/angular.rb +0 -23
- data/lib/install/coffee.rb +0 -25
- data/lib/install/config/.browserslistrc +0 -1
- data/lib/install/config/babel.config.js +0 -82
- data/lib/install/config/postcss.config.js +0 -12
- data/lib/install/config/webpack/environment.js +0 -3
- data/lib/install/elm.rb +0 -39
- data/lib/install/erb.rb +0 -25
- data/lib/install/examples/angular/hello_angular/app/app.component.ts +0 -9
- data/lib/install/examples/angular/hello_angular/app/app.module.ts +0 -16
- data/lib/install/examples/angular/hello_angular/index.ts +0 -8
- data/lib/install/examples/angular/hello_angular/polyfills.ts +0 -73
- data/lib/install/examples/angular/hello_angular.js +0 -7
- data/lib/install/examples/coffee/hello_coffee.coffee +0 -4
- data/lib/install/examples/elm/Main.elm +0 -55
- data/lib/install/examples/elm/hello_elm.js +0 -16
- data/lib/install/examples/erb/hello_erb.js.erb +0 -6
- data/lib/install/examples/react/babel.config.js +0 -99
- data/lib/install/examples/react/hello_react.jsx +0 -26
- data/lib/install/examples/react/tsconfig.json +0 -21
- data/lib/install/examples/stimulus/application.js +0 -1
- data/lib/install/examples/stimulus/controllers/hello_controller.js +0 -18
- data/lib/install/examples/stimulus/controllers/index.js +0 -9
- data/lib/install/examples/svelte/app.svelte +0 -11
- data/lib/install/examples/svelte/hello_svelte.js +0 -20
- data/lib/install/examples/typescript/hello_typescript.ts +0 -4
- data/lib/install/examples/typescript/tsconfig.json +0 -24
- data/lib/install/examples/vue/app.vue +0 -22
- data/lib/install/examples/vue/hello_vue.js +0 -72
- data/lib/install/loaders/coffee.js +0 -6
- data/lib/install/loaders/elm.js +0 -25
- data/lib/install/loaders/erb.js +0 -11
- data/lib/install/loaders/svelte.js +0 -9
- data/lib/install/loaders/vue.js +0 -6
- data/lib/install/react.rb +0 -18
- data/lib/install/stimulus.rb +0 -12
- data/lib/install/svelte.rb +0 -29
- data/lib/install/typescript.rb +0 -39
- data/lib/install/vue.rb +0 -49
- data/lib/tasks/installers.rake +0 -42
- data/package/config_types/__tests__/config_list.js +0 -118
- data/package/config_types/__tests__/config_object.js +0 -43
- data/package/config_types/config_list.js +0 -75
- data/package/config_types/config_object.js +0 -55
- data/package/config_types/index.js +0 -7
- data/package/rules/module.css.js +0 -3
- data/package/rules/module.sass.js +0 -8
- data/package/rules/node_modules.js +0 -22
- data/package/utils/__tests__/deep_assign.js +0 -32
- data/package/utils/__tests__/deep_merge.js +0 -10
- data/package/utils/__tests__/get_style_rule.js +0 -65
- data/package/utils/__tests__/objectify.js +0 -9
- data/package/utils/deep_assign.js +0 -22
- data/package/utils/deep_merge.js +0 -22
- data/package/utils/objectify.js +0 -3
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: webpacker
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version:
|
|
4
|
+
version: 6.0.0.beta
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- David Heinemeier Hansson
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date:
|
|
12
|
+
date: 2020-12-23 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: activesupport
|
|
@@ -126,6 +126,7 @@ files:
|
|
|
126
126
|
- ".gitignore"
|
|
127
127
|
- ".node-version"
|
|
128
128
|
- ".rubocop.yml"
|
|
129
|
+
- 6_0_upgrade.md
|
|
129
130
|
- CHANGELOG.md
|
|
130
131
|
- CONTRIBUTING.md
|
|
131
132
|
- Gemfile
|
|
@@ -133,78 +134,20 @@ files:
|
|
|
133
134
|
- MIT-LICENSE
|
|
134
135
|
- README.md
|
|
135
136
|
- Rakefile
|
|
136
|
-
- docs/assets.md
|
|
137
|
-
- docs/cloud9.md
|
|
138
|
-
- docs/css.md
|
|
139
|
-
- docs/deployment.md
|
|
140
|
-
- docs/docker.md
|
|
141
|
-
- docs/engines.md
|
|
142
|
-
- docs/env.md
|
|
143
|
-
- docs/es6.md
|
|
144
|
-
- docs/folder-structure.md
|
|
145
|
-
- docs/integrations.md
|
|
146
|
-
- docs/misc.md
|
|
147
|
-
- docs/props.md
|
|
148
|
-
- docs/target.md
|
|
149
|
-
- docs/testing.md
|
|
150
|
-
- docs/troubleshooting.md
|
|
151
|
-
- docs/typescript.md
|
|
152
|
-
- docs/v4-upgrade.md
|
|
153
|
-
- docs/webpack-dev-server.md
|
|
154
|
-
- docs/webpack.md
|
|
155
|
-
- docs/yarn.md
|
|
156
137
|
- gemfiles/Gemfile-rails-edge
|
|
157
138
|
- gemfiles/Gemfile-rails.5.2.x
|
|
158
139
|
- gemfiles/Gemfile-rails.6.0.x
|
|
159
|
-
- lib/install/angular.rb
|
|
160
140
|
- lib/install/bin/webpack
|
|
161
141
|
- lib/install/bin/webpack-dev-server
|
|
162
142
|
- lib/install/binstubs.rb
|
|
163
|
-
- lib/install/
|
|
164
|
-
- lib/install/config/.browserslistrc
|
|
165
|
-
- lib/install/config/babel.config.js
|
|
166
|
-
- lib/install/config/postcss.config.js
|
|
143
|
+
- lib/install/config/webpack/base.js
|
|
167
144
|
- lib/install/config/webpack/development.js
|
|
168
|
-
- lib/install/config/webpack/environment.js
|
|
169
145
|
- lib/install/config/webpack/production.js
|
|
170
146
|
- lib/install/config/webpack/test.js
|
|
171
147
|
- lib/install/config/webpacker.yml
|
|
172
|
-
- lib/install/
|
|
173
|
-
- lib/install/erb.rb
|
|
174
|
-
- lib/install/examples/angular/hello_angular.js
|
|
175
|
-
- lib/install/examples/angular/hello_angular/app/app.component.ts
|
|
176
|
-
- lib/install/examples/angular/hello_angular/app/app.module.ts
|
|
177
|
-
- lib/install/examples/angular/hello_angular/index.ts
|
|
178
|
-
- lib/install/examples/angular/hello_angular/polyfills.ts
|
|
179
|
-
- lib/install/examples/coffee/hello_coffee.coffee
|
|
180
|
-
- lib/install/examples/elm/Main.elm
|
|
181
|
-
- lib/install/examples/elm/hello_elm.js
|
|
182
|
-
- lib/install/examples/erb/hello_erb.js.erb
|
|
183
|
-
- lib/install/examples/react/babel.config.js
|
|
184
|
-
- lib/install/examples/react/hello_react.jsx
|
|
185
|
-
- lib/install/examples/react/tsconfig.json
|
|
186
|
-
- lib/install/examples/stimulus/application.js
|
|
187
|
-
- lib/install/examples/stimulus/controllers/hello_controller.js
|
|
188
|
-
- lib/install/examples/stimulus/controllers/index.js
|
|
189
|
-
- lib/install/examples/svelte/app.svelte
|
|
190
|
-
- lib/install/examples/svelte/hello_svelte.js
|
|
191
|
-
- lib/install/examples/typescript/hello_typescript.ts
|
|
192
|
-
- lib/install/examples/typescript/tsconfig.json
|
|
193
|
-
- lib/install/examples/vue/app.vue
|
|
194
|
-
- lib/install/examples/vue/hello_vue.js
|
|
148
|
+
- lib/install/javascript/packs/application.css
|
|
195
149
|
- lib/install/javascript/packs/application.js
|
|
196
|
-
- lib/install/loaders/coffee.js
|
|
197
|
-
- lib/install/loaders/elm.js
|
|
198
|
-
- lib/install/loaders/erb.js
|
|
199
|
-
- lib/install/loaders/svelte.js
|
|
200
|
-
- lib/install/loaders/vue.js
|
|
201
|
-
- lib/install/react.rb
|
|
202
|
-
- lib/install/stimulus.rb
|
|
203
|
-
- lib/install/svelte.rb
|
|
204
150
|
- lib/install/template.rb
|
|
205
|
-
- lib/install/typescript.rb
|
|
206
|
-
- lib/install/vue.rb
|
|
207
|
-
- lib/tasks/installers.rake
|
|
208
151
|
- lib/tasks/webpacker.rake
|
|
209
152
|
- lib/tasks/webpacker/binstubs.rake
|
|
210
153
|
- lib/tasks/webpacker/check_binstubs.rake
|
|
@@ -240,13 +183,9 @@ files:
|
|
|
240
183
|
- package/__tests__/production.js
|
|
241
184
|
- package/__tests__/staging.js
|
|
242
185
|
- package/__tests__/test.js
|
|
186
|
+
- package/babel/preset.js
|
|
243
187
|
- package/config.js
|
|
244
188
|
- package/configPath.js
|
|
245
|
-
- package/config_types/__tests__/config_list.js
|
|
246
|
-
- package/config_types/__tests__/config_object.js
|
|
247
|
-
- package/config_types/config_list.js
|
|
248
|
-
- package/config_types/config_object.js
|
|
249
|
-
- package/config_types/index.js
|
|
250
189
|
- package/dev_server.js
|
|
251
190
|
- package/env.js
|
|
252
191
|
- package/environments/__tests__/base.js
|
|
@@ -256,30 +195,34 @@ files:
|
|
|
256
195
|
- package/environments/test.js
|
|
257
196
|
- package/index.js
|
|
258
197
|
- package/rules/babel.js
|
|
198
|
+
- package/rules/coffee.js
|
|
259
199
|
- package/rules/css.js
|
|
200
|
+
- package/rules/erb.js
|
|
260
201
|
- package/rules/file.js
|
|
261
202
|
- package/rules/index.js
|
|
262
|
-
- package/rules/
|
|
263
|
-
- package/rules/module.sass.js
|
|
264
|
-
- package/rules/node_modules.js
|
|
203
|
+
- package/rules/less.js
|
|
265
204
|
- package/rules/sass.js
|
|
266
|
-
- package/
|
|
267
|
-
- package/utils/__tests__/deep_merge.js
|
|
268
|
-
- package/utils/__tests__/get_style_rule.js
|
|
269
|
-
- package/utils/__tests__/objectify.js
|
|
270
|
-
- package/utils/deep_assign.js
|
|
271
|
-
- package/utils/deep_merge.js
|
|
205
|
+
- package/rules/svg.js
|
|
272
206
|
- package/utils/get_style_rule.js
|
|
273
207
|
- package/utils/helpers.js
|
|
274
|
-
- package/utils/objectify.js
|
|
275
208
|
- test/command_test.rb
|
|
276
209
|
- test/compiler_test.rb
|
|
277
210
|
- test/configuration_test.rb
|
|
278
211
|
- test/dev_server_runner_test.rb
|
|
279
212
|
- test/dev_server_test.rb
|
|
213
|
+
- test/engine_rake_tasks_test.rb
|
|
280
214
|
- test/env_test.rb
|
|
281
215
|
- test/helper_test.rb
|
|
282
216
|
- test/manifest_test.rb
|
|
217
|
+
- test/mounted_app/Rakefile
|
|
218
|
+
- test/mounted_app/test/dummy/Rakefile
|
|
219
|
+
- test/mounted_app/test/dummy/bin/rails
|
|
220
|
+
- test/mounted_app/test/dummy/bin/rake
|
|
221
|
+
- test/mounted_app/test/dummy/config.ru
|
|
222
|
+
- test/mounted_app/test/dummy/config/application.rb
|
|
223
|
+
- test/mounted_app/test/dummy/config/environment.rb
|
|
224
|
+
- test/mounted_app/test/dummy/config/webpacker.yml
|
|
225
|
+
- test/mounted_app/test/dummy/package.json
|
|
283
226
|
- test/rake_tasks_test.rb
|
|
284
227
|
- test/test_app/Rakefile
|
|
285
228
|
- test/test_app/app/javascript/packs/application.js
|
|
@@ -295,6 +238,7 @@ files:
|
|
|
295
238
|
- test/test_app/config/webpacker_public_root.yml
|
|
296
239
|
- test/test_app/package.json
|
|
297
240
|
- test/test_app/public/packs/manifest.json
|
|
241
|
+
- test/test_app/some.config.js
|
|
298
242
|
- test/test_app/yarn.lock
|
|
299
243
|
- test/test_helper.rb
|
|
300
244
|
- test/webpack_runner_test.rb
|
|
@@ -305,8 +249,8 @@ homepage: https://github.com/rails/webpacker
|
|
|
305
249
|
licenses:
|
|
306
250
|
- MIT
|
|
307
251
|
metadata:
|
|
308
|
-
source_code_uri: https://github.com/rails/webpacker/tree/
|
|
309
|
-
changelog_uri: https://github.com/rails/webpacker/blob/
|
|
252
|
+
source_code_uri: https://github.com/rails/webpacker/tree/v6.0.0.beta
|
|
253
|
+
changelog_uri: https://github.com/rails/webpacker/blob/v6.0.0.beta/CHANGELOG.md
|
|
310
254
|
post_install_message:
|
|
311
255
|
rdoc_options: []
|
|
312
256
|
require_paths:
|
|
@@ -318,11 +262,11 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
|
318
262
|
version: 2.4.0
|
|
319
263
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
320
264
|
requirements:
|
|
321
|
-
- - "
|
|
265
|
+
- - ">"
|
|
322
266
|
- !ruby/object:Gem::Version
|
|
323
|
-
version:
|
|
267
|
+
version: 1.3.1
|
|
324
268
|
requirements: []
|
|
325
|
-
rubygems_version: 3.
|
|
269
|
+
rubygems_version: 3.0.3
|
|
326
270
|
signing_key:
|
|
327
271
|
specification_version: 4
|
|
328
272
|
summary: Use webpack to manage app-like JavaScript modules in Rails
|
|
@@ -332,9 +276,19 @@ test_files:
|
|
|
332
276
|
- test/configuration_test.rb
|
|
333
277
|
- test/dev_server_runner_test.rb
|
|
334
278
|
- test/dev_server_test.rb
|
|
279
|
+
- test/engine_rake_tasks_test.rb
|
|
335
280
|
- test/env_test.rb
|
|
336
281
|
- test/helper_test.rb
|
|
337
282
|
- test/manifest_test.rb
|
|
283
|
+
- test/mounted_app/Rakefile
|
|
284
|
+
- test/mounted_app/test/dummy/Rakefile
|
|
285
|
+
- test/mounted_app/test/dummy/bin/rails
|
|
286
|
+
- test/mounted_app/test/dummy/bin/rake
|
|
287
|
+
- test/mounted_app/test/dummy/config.ru
|
|
288
|
+
- test/mounted_app/test/dummy/config/application.rb
|
|
289
|
+
- test/mounted_app/test/dummy/config/environment.rb
|
|
290
|
+
- test/mounted_app/test/dummy/config/webpacker.yml
|
|
291
|
+
- test/mounted_app/test/dummy/package.json
|
|
338
292
|
- test/rake_tasks_test.rb
|
|
339
293
|
- test/test_app/Rakefile
|
|
340
294
|
- test/test_app/app/javascript/packs/application.js
|
|
@@ -350,6 +304,7 @@ test_files:
|
|
|
350
304
|
- test/test_app/config/webpacker_public_root.yml
|
|
351
305
|
- test/test_app/package.json
|
|
352
306
|
- test/test_app/public/packs/manifest.json
|
|
307
|
+
- test/test_app/some.config.js
|
|
353
308
|
- test/test_app/yarn.lock
|
|
354
309
|
- test/test_helper.rb
|
|
355
310
|
- test/webpack_runner_test.rb
|
data/docs/assets.md
DELETED
|
@@ -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).
|
data/docs/cloud9.md
DELETED
|
@@ -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.
|