webpacker 4.2.2 → 5.1.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (55) hide show
  1. checksums.yaml +4 -4
  2. data/.node-version +1 -1
  3. data/.travis.yml +7 -20
  4. data/CHANGELOG.md +32 -0
  5. data/Gemfile +1 -0
  6. data/Gemfile.lock +8 -5
  7. data/README.md +52 -280
  8. data/docs/css.md +3 -4
  9. data/docs/deployment.md +2 -2
  10. data/docs/docker.md +17 -17
  11. data/docs/engines.md +13 -0
  12. data/docs/env.md +0 -2
  13. data/docs/integrations.md +220 -0
  14. data/docs/testing.md +1 -2
  15. data/docs/typescript.md +48 -28
  16. data/lib/install/config/webpacker.yml +0 -4
  17. data/lib/install/examples/react/tsconfig.json +2 -1
  18. data/lib/install/examples/typescript/tsconfig.json +2 -1
  19. data/lib/install/loaders/svelte.js +2 -2
  20. data/lib/install/template.rb +1 -1
  21. data/lib/install/typescript.rb +5 -12
  22. data/lib/tasks/webpacker/check_node.rake +14 -7
  23. data/lib/tasks/webpacker/check_yarn.rake +16 -9
  24. data/lib/tasks/webpacker/clean.rake +12 -6
  25. data/lib/tasks/webpacker/clobber.rake +8 -4
  26. data/lib/tasks/webpacker/yarn_install.rake +5 -16
  27. data/lib/webpacker/commands.rb +33 -9
  28. data/lib/webpacker/compiler.rb +2 -3
  29. data/lib/webpacker/configuration.rb +1 -5
  30. data/lib/webpacker/dev_server_proxy.rb +3 -1
  31. data/lib/webpacker/dev_server_runner.rb +4 -4
  32. data/lib/webpacker/helper.rb +12 -12
  33. data/lib/webpacker/manifest.rb +4 -4
  34. data/lib/webpacker/railtie.rb +0 -43
  35. data/lib/webpacker/version.rb +1 -1
  36. data/package.json +35 -35
  37. data/package/__tests__/dev_server.js +2 -0
  38. data/package/dev_server.js +1 -1
  39. data/package/environments/__tests__/base.js +10 -0
  40. data/package/environments/base.js +12 -1
  41. data/package/environments/development.js +0 -4
  42. data/package/rules/babel.js +1 -1
  43. data/package/rules/sass.js +7 -1
  44. data/test/manifest_test.rb +37 -6
  45. data/test/rake_tasks_test.rb +11 -0
  46. data/test/test_app/app/javascript/packs/multi_entry.css +4 -0
  47. data/test/test_app/app/javascript/packs/multi_entry.js +4 -0
  48. data/test/test_app/config/application.rb +0 -1
  49. data/webpacker.gemspec +4 -3
  50. data/yarn.lock +2627 -1547
  51. metadata +28 -13
  52. data/gemfiles/Gemfile-rails.4.2.x +0 -9
  53. data/gemfiles/Gemfile-rails.5.0.x +0 -9
  54. data/gemfiles/Gemfile-rails.5.1.x +0 -9
  55. data/lib/install/loaders/typescript.js +0 -11
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 123810c157dda2d179ec4c3b27701cf29ade3fbf5a122d08eab68fa6b8c4b8a7
4
- data.tar.gz: 6c120aead9282b96fbf070c216d0c2395249deea3ee135f764299d96fd14b423
3
+ metadata.gz: 120db32ca99baa277a5452ed1c68cc0fa842e60aac86214f7329e2979b0d81ea
4
+ data.tar.gz: 47c5eef5ff70a8436523b776e595e59269cac206e7b88e2f37bf4716a944f9d6
5
5
  SHA512:
6
- metadata.gz: 04ede9ec043442d4d59a06e60f04fef3483531df5f1f6afbcc175f4252132421b7bd852c637e1be1427508799c5065fad0ea7fe47d5322f56435951a3142b932
7
- data.tar.gz: 3ac3f4e8b995982861fa0e5d0771e8244c2f644245dfb8b02b0abccaf3e1485f4677bcd978ac509ebbba2817555ead6d8f92ab9ac02e8ec95c5205b43ac5f7a7
6
+ metadata.gz: 784c1ad63862030eac771b060a82fbec37a73513f0cc82f2b08e13e0687a32ab673dcfb550bc73f22be420035a66cf39fb8425458e6660500758108875f2fe8f
7
+ data.tar.gz: b52f0a2ac48b0fcfb07900d800976bcc2b8f99b46ad8109f7283088584d456b0f1f0129a7d5b1028060128cb7dcc04927ac2b98da965963e0a29adf626868b7a
@@ -1 +1 @@
1
- 8.16.0
1
+ 10.13.0
@@ -2,21 +2,14 @@ language: ruby
2
2
  dist: xenial
3
3
  before_install:
4
4
  - gem install rubygems-update && update_rubygems
5
- # Rails 4.2 doesn't support bundler 2.0, so we need to lock bundler to
6
- # v1.17.3. This is just for Ruby 2.5 which ships with bundler 2.x on Travis
7
- # CI while Ruby 2.6 does not.
8
- # https://github.com/travis-ci/travis-rubies/issues/57#issuecomment-458981237
9
- - yes | rvm @global do gem install bundler -v 1.17.3 || true
5
+ - yes | rvm @global do gem install bundler -v 2.1.4 || true
10
6
  rvm:
11
- - 2.3.8
12
- - 2.4.6
7
+ - 2.4.9
13
8
  - 2.5.5
14
- - 2.6.3
9
+ - 2.6.5
10
+ - 2.7.0
15
11
  - ruby-head
16
12
  gemfile:
17
- - gemfiles/Gemfile-rails.4.2.x
18
- - gemfiles/Gemfile-rails.5.0.x
19
- - gemfiles/Gemfile-rails.5.1.x
20
13
  - gemfiles/Gemfile-rails.5.2.x
21
14
  - gemfiles/Gemfile-rails.6.0.x
22
15
  - gemfiles/Gemfile-rails-edge
@@ -28,7 +21,7 @@ cache:
28
21
 
29
22
  install:
30
23
  - bundle install --jobs 3 --retry 3
31
- - nvm install 10
24
+ - nvm install 12
32
25
  - node -v
33
26
  - npm i -g yarn
34
27
  - yarn
@@ -42,15 +35,9 @@ matrix:
42
35
  - gemfile: gemfiles/Gemfile-rails-edge
43
36
  - rvm: ruby-head
44
37
  exclude:
45
- - rvm: 2.3.8
46
- gemfile: gemfiles/Gemfile-rails-edge
47
- - rvm: 2.4.6
38
+ - rvm: 2.4.9
48
39
  gemfile: gemfiles/Gemfile-rails-edge
49
40
  - rvm: 2.5.5
50
41
  gemfile: gemfiles/Gemfile-rails-edge
51
- - rvm: ruby-head
52
- gemfile: gemfiles/Gemfile-rails.4.2.x
53
- - rvm: 2.3.8
54
- gemfile: gemfiles/Gemfile-rails.6.0.x
55
- - rvm: 2.4.6
42
+ - rvm: 2.4.9
56
43
  gemfile: gemfiles/Gemfile-rails.6.0.x
@@ -2,6 +2,38 @@
2
2
 
3
3
  **Please note that Webpacker 4.1.0 has an installer bug. Please use 4.2.0 or above**
4
4
 
5
+ ## [[5.1.1]](https://github.com/rails/webpacker/compare/v5.1.0...v5.1.1) - 2020-04-20
6
+
7
+ - Update [TypeScript documentation](https://github.com/rails/webpacker/blob/master/docs/typescript.md) and installer to use babel-loader for typescript.[(#2541](https://github.com/rails/webpacker/pull/2541)
8
+
9
+ ## [[5.1.0]](https://github.com/rails/webpacker/compare/v5.0.1...v5.1.0) - 2020-04-19
10
+
11
+ - Remove yarn integrity check [#2518](https://github.com/rails/webpacker/pull/2518)
12
+ - Switch from ts-loader to babel-loader [#2449](https://github.com/rails/webpacker/pull/2449)
13
+ Please see the [TypeScript documentation](https://github.com/rails/webpacker/blob/master/docs/typescript.md) to upgrade existing projects to use typescript with 5.1
14
+ - Resolve multi-word snakecase WEBPACKER_DEV_SERVER env values [#2528](https://github.com/rails/webpacker/pull/2528)
15
+
16
+ ## [[5.0.1]](https://github.com/rails/webpacker/compare/v5.0.0...v5.0.1) - 2020-03-22
17
+
18
+ - Upgrade deps and fix sass loader config options bug [#2508](https://github.com/rails/webpacker/pull/2508)
19
+
20
+ ## [[5.0.0]](https://github.com/rails/webpacker/compare/v4.2.2...v5.0.0) - 2020-03-22
21
+
22
+ - Bump minimum node version [#2428](https://github.com/rails/webpacker/pull/2428)
23
+ - Bump minimum ruby/rails version [#2415](https://github.com/rails/webpacker/pull/2415)
24
+ - Add support for multiple files per entry [#2476](https://github.com/rails/webpacker/pull/2476)
25
+
26
+ ```js
27
+ entry: {
28
+ home: ['./home.js', './home.scss'],
29
+ account: ['./account.js', './account.scss']
30
+ }
31
+ ```
32
+
33
+ You can now have two entry files with same names inside packs folder, `home.scss` and `home.js`
34
+
35
+ And, other minor fixes, please see a list of changes [here](https://github.com/rails/webpacker/compare/v4.2.2...v5.0.0)
36
+
5
37
  ## [[4.2.2]](https://github.com/rails/webpacker/compare/v4.2.1...v4.2.2) - 2019-12-09
6
38
 
7
39
  - Fixed issue with webpack clean task for nested assets [#2391](https://github.com/rails/webpacker/pull/2391)
data/Gemfile CHANGED
@@ -5,6 +5,7 @@ gemspec
5
5
  gem "rails"
6
6
  gem "rake", ">= 11.1"
7
7
  gem "rack-proxy", require: false
8
+ gem "semantic_range", require: false
8
9
 
9
10
  group :test do
10
11
  gem "minitest", "~> 5.0"
@@ -1,10 +1,11 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- webpacker (4.2.2)
5
- activesupport (>= 4.2)
4
+ webpacker (5.1.1)
5
+ activesupport (>= 5.2)
6
6
  rack-proxy (>= 0.6.1)
7
- railties (>= 4.2)
7
+ railties (>= 5.2)
8
+ semantic_range (>= 2.3.0)
8
9
 
9
10
  GEM
10
11
  remote: https://rubygems.org/
@@ -88,12 +89,12 @@ GEM
88
89
  mini_portile2 (2.4.0)
89
90
  minitest (5.13.0)
90
91
  nio4r (2.5.2)
91
- nokogiri (1.10.5)
92
+ nokogiri (1.10.8)
92
93
  mini_portile2 (~> 2.4.0)
93
94
  parallel (1.18.0)
94
95
  parser (2.6.5.0)
95
96
  ast (~> 2.4.0)
96
- rack (2.0.7)
97
+ rack (2.0.8)
97
98
  rack-proxy (0.6.5)
98
99
  rack
99
100
  rack-test (1.1.0)
@@ -136,6 +137,7 @@ GEM
136
137
  rubocop-performance (1.3.0)
137
138
  rubocop (>= 0.68.0)
138
139
  ruby-progressbar (1.10.1)
140
+ semantic_range (2.3.0)
139
141
  sprockets (4.0.0)
140
142
  concurrent-ruby (~> 1.0)
141
143
  rack (> 1, < 3)
@@ -165,6 +167,7 @@ DEPENDENCIES
165
167
  rake (>= 11.1)
166
168
  rubocop (< 0.69)
167
169
  rubocop-performance
170
+ semantic_range
168
171
  webpacker!
169
172
 
170
173
  BUNDLED WITH
data/README.md CHANGED
@@ -1,8 +1,8 @@
1
1
  # Webpacker
2
2
 
3
3
  [![Build Status](https://travis-ci.org/rails/webpacker.svg?branch=master)](https://travis-ci.org/rails/webpacker)
4
- [![node.js](https://img.shields.io/badge/node-%3E%3D%208.16.0-brightgreen.svg)](https://nodejs.org/en/)
5
- [![Gem](https://img.shields.io/gem/v/webpacker.svg)](https://github.com/rails/webpacker)
4
+ [![node.js](https://img.shields.io/badge/node-%3E%3D%2010.13.0-brightgreen.svg)](https://www.npmjs.com/package/@rails/webpacker)
5
+ [![Gem](https://img.shields.io/gem/v/webpacker.svg)](https://rubygems.org/gems/webpacker)
6
6
 
7
7
  Webpacker makes it easy to use the JavaScript pre-processor and bundler
8
8
  [webpack 4.x.x+](https://webpack.js.org/)
@@ -13,10 +13,11 @@ even JavaScript Sprinkles (that all continues to live in app/assets).
13
13
  However, it is possible to use Webpacker for CSS, images and fonts assets as well,
14
14
  in which case you may not even need the asset pipeline. This is mostly relevant when exclusively using component-based JavaScript frameworks.
15
15
 
16
- **NOTE:** The master branch now hosts the code for v4.x.x. Please refer to [3-x-stable](https://github.com/rails/webpacker/tree/3-x-stable) branch for 3.x documentation. See the [v4-upgrade guide](docs/v4-upgrade.md) for an overview of the changes.
16
+ **NOTE:** The master branch now hosts the code for v5.x.x. Please refer to [4-x-stable](https://github.com/rails/webpacker/tree/4-x-stable) branch for 4.x documentation.
17
17
 
18
18
  <!-- START doctoc generated TOC please keep comment here to allow auto update -->
19
19
  <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
20
+
20
21
  ## Table of Contents
21
22
 
22
23
  - [Prerequisites](#prerequisites)
@@ -27,16 +28,15 @@ in which case you may not even need the asset pipeline. This is mostly relevant
27
28
  - [Webpack Configuration](#webpack-configuration)
28
29
  - [Custom Rails environments](#custom-rails-environments)
29
30
  - [Upgrading](#upgrading)
30
- - [Yarn Integrity](#yarn-integrity)
31
31
  - [Integrations](#integrations)
32
- - [React](#react)
33
- - [Angular with TypeScript](#angular-with-typescript)
34
- - [Vue](#vue)
35
- - [Elm](#elm)
36
- - [Stimulus](#stimulus)
37
- - [Svelte](#svelte)
38
- - [CoffeeScript](#coffeescript)
39
- - [Erb](#erb)
32
+ - [React](./docs/integrations.md#react)
33
+ - [Angular with TypeScript](./docs/integrations.md#angular-with-typescript)
34
+ - [Vue](./docs/integrations.md#vue)
35
+ - [Elm](./docs/integrations.md#elm)
36
+ - [Stimulus](./docs/integrations.md#stimulus)
37
+ - [Svelte](./docs/integrations.md#svelte)
38
+ - [CoffeeScript](./docs/integrations.md#coffeescript)
39
+ - [Erb](./docs/integrations.md#erb)
40
40
  - [Paths](#paths)
41
41
  - [Resolved](#resolved)
42
42
  - [Watched](#watched)
@@ -47,29 +47,26 @@ in which case you may not even need the asset pipeline. This is mostly relevant
47
47
 
48
48
  <!-- END doctoc generated TOC please keep comment here to allow auto update -->
49
49
 
50
-
51
50
  ## Prerequisites
52
51
 
53
- * Ruby 2.2+
54
- * Rails 4.2+
55
- * Node.js 8.16.0+
56
- * Yarn 1.x+
57
-
52
+ - Ruby 2.4+
53
+ - Rails 5.2+
54
+ - Node.js 10.13.0+
55
+ - Yarn 1.x+
58
56
 
59
57
  ## Features
60
58
 
61
- * [webpack 4.x.x](https://webpack.js.org/)
62
- * ES6 with [babel](https://babeljs.io/)
63
- * Automatic code splitting using multiple entry points
64
- * Stylesheets - Sass and CSS
65
- * Images and fonts
66
- * PostCSS - Auto-Prefixer
67
- * Asset compression, source-maps, and minification
68
- * CDN support
69
- * React, Angular, Elm and Vue support out-of-the-box
70
- * Rails view helpers
71
- * Extensible and configurable
72
-
59
+ - [webpack 4.x.x](https://webpack.js.org/)
60
+ - ES6 with [babel](https://babeljs.io/)
61
+ - Automatic code splitting using multiple entry points
62
+ - Stylesheets - Sass and CSS
63
+ - Images and fonts
64
+ - PostCSS - Auto-Prefixer
65
+ - Asset compression, source-maps, and minification
66
+ - CDN support
67
+ - React, Angular, Elm and Vue support out-of-the-box
68
+ - Rails view helpers
69
+ - Extensible and configurable
73
70
 
74
71
  ## Installation
75
72
 
@@ -85,7 +82,7 @@ Or add it to your `Gemfile`:
85
82
 
86
83
  ```ruby
87
84
  # Gemfile
88
- gem 'webpacker', '~> 4.x'
85
+ gem 'webpacker', '~> 5.x'
89
86
 
90
87
  # OR if you prefer to use master
91
88
  gem 'webpacker', git: 'https://github.com/rails/webpacker.git'
@@ -109,6 +106,12 @@ Optional: To fix ["unmet peer dependency" warnings](https://github.com/rails/web
109
106
  yarn upgrade
110
107
  ```
111
108
 
109
+ When `package.json` and/or `yarn.lock` changes, such as when pulling down changes to your local environment in a team settings, be sure to keep your NPM packages up-to-date:
110
+
111
+ ```bash
112
+ yarn install
113
+ ```
114
+
112
115
  ### Usage
113
116
 
114
117
  Once installed, you can start writing modern ES6-flavored JavaScript apps right away:
@@ -127,8 +130,8 @@ app/javascript:
127
130
  In `/packs/application.js`, include this at the top of the file:
128
131
 
129
132
  ```js
130
- import "core-js/stable";
131
- import "regenerator-runtime/runtime";
133
+ import 'core-js/stable'
134
+ import 'regenerator-runtime/runtime'
132
135
  ```
133
136
 
134
137
  You can then link the JavaScript pack in Rails views using the `javascript_pack_tag` helper.
@@ -175,7 +178,6 @@ helper otherwise you will get duplicated chunks on the page.
175
178
  **Note:** In order for your styles or static assets files to be available in your view,
176
179
  you would need to link them in your "pack" or entry file.
177
180
 
178
-
179
181
  ### Development
180
182
 
181
183
  Webpacker ships with two binstubs: `./bin/webpack` and `./bin/webpack-dev-server`.
@@ -240,7 +242,6 @@ WEBPACKER_DEV_SERVER_HOST=0.0.0.0 ./bin/webpack-dev-server
240
242
 
241
243
  See [docs/webpack](docs/webpack.md) for modifying webpack configuration and loaders.
242
244
 
243
-
244
245
  ### Custom Rails environments
245
246
 
246
247
  Out of the box Webpacker ships with - development, test and production environments in `config/webpacker.yml` however, in most production apps extra environments are needed as part of deployment workflow. Webpacker supports this out of the box from version 3.4.0+ onwards.
@@ -290,7 +291,6 @@ bundle exec rails assets:precompile
290
291
  bundle exec rails webpacker:compile
291
292
  ```
292
293
 
293
-
294
294
  ### Upgrading
295
295
 
296
296
  You can run following commands to upgrade Webpacker to the latest stable version. This process involves upgrading the gem and related JavaScript packages:
@@ -305,247 +305,23 @@ yarn upgrade webpack-dev-server --latest
305
305
  yarn add @rails/webpacker@next
306
306
  ```
307
307
 
308
- ### Yarn Integrity
309
-
310
- By default, in development, webpacker runs a yarn integrity check to ensure that all local JavaScript packages are up-to-date. This is similar to what bundler does currently in Rails, but for JavaScript packages. If your system is out of date, then Rails will not initialize. You will be asked to upgrade your local JavaScript packages by running `yarn install`.
311
-
312
- To turn off this option, you will need to change the default setting in `config/webpacker.yml`:
313
-
314
- ```yaml
315
- # config/webpacker.yml
316
- development:
317
- ...
318
- # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
319
- check_yarn_integrity: false
320
- ```
321
-
322
- You may also turn on this feature by adding the config option for any Rails environment in `config/webpacker.yml`:
323
-
324
- ```yaml
325
- check_yarn_integrity: true
326
- ```
327
-
328
308
  ## Integrations
329
309
 
330
- Webpacker ships with basic out-of-the-box integration for React, Angular, Vue and Elm.
331
- You can see a list of available commands/tasks by running `bundle exec rails webpacker`:
332
-
333
- ### React
334
-
335
- To use Webpacker with [React](https://facebook.github.io/react/), create a
336
- new Rails 5.1+ app using `--webpack=react` option:
337
-
338
- ```bash
339
- # Rails 5.1+
340
- rails new myapp --webpack=react
341
- ```
342
-
343
- (or run `bundle exec rails webpacker:install:react` in an existing Rails app already
344
- setup with Webpacker).
345
-
346
- The installer will add all relevant dependencies using Yarn, changes
347
- to the configuration files, and an example React component to your
348
- project in `app/javascript/packs` so that you can experiment with React right away.
349
-
350
-
351
- ### Angular with TypeScript
352
-
353
- To use Webpacker with [Angular](https://angular.io/), create a
354
- new Rails 5.1+ app using `--webpack=angular` option:
355
-
356
- ```bash
357
- # Rails 5.1+
358
- rails new myapp --webpack=angular
359
- ```
360
-
361
- (or run `bundle exec rails webpacker:install:angular` on a Rails app already
362
- setup with Webpacker).
363
-
364
- The installer will add the TypeScript and Angular core libraries using Yarn alongside
365
- a few changes to the configuration files. An example component written in
366
- TypeScript will also be added to your project in `app/javascript` so that
367
- you can experiment with Angular right away.
368
-
369
- By default, Angular uses a JIT compiler for development environment. This
370
- compiler is not compatible with restrictive CSP (Content Security
371
- Policy) environments like Rails 5.2+. You can use Angular AOT compiler
372
- in development with the [@ngtools/webpack](https://www.npmjs.com/package/@ngtools/webpack#usage) plugin.
373
-
374
- Alternatively if you're using Rails 5.2+ you can enable `unsafe-eval` rule for your
375
- development environment. This can be done in the `config/initializers/content_security_policy.rb`
376
- with the following code:
377
-
378
- ```ruby
379
- Rails.application.config.content_security_policy do |policy|
380
- if Rails.env.development?
381
- policy.script_src :self, :https, :unsafe_eval
382
- else
383
- policy.script_src :self, :https
384
- end
385
- end
386
- ```
387
-
388
-
389
- ### Vue
390
-
391
- To use Webpacker with [Vue](https://vuejs.org/), create a
392
- new Rails 5.1+ app using `--webpack=vue` option:
393
-
394
- ```bash
395
- # Rails 5.1+
396
- rails new myapp --webpack=vue
397
- ```
398
- (or run `bundle exec rails webpacker:install:vue` on a Rails app already setup with Webpacker).
399
-
400
- The installer will add Vue and its required libraries using Yarn alongside
401
- automatically applying changes needed to the configuration files. An example component will
402
- be added to your project in `app/javascript` so that you can experiment with Vue right away.
403
-
404
- If you're using Rails 5.2+ you'll need to enable `unsafe-eval` rule for your development environment.
405
- This can be done in the `config/initializers/content_security_policy.rb` with the following
406
- configuration:
407
-
408
- ```ruby
409
- Rails.application.config.content_security_policy do |policy|
410
- if Rails.env.development?
411
- policy.script_src :self, :https, :unsafe_eval
412
- else
413
- policy.script_src :self, :https
414
- end
415
- end
416
- ```
417
- You can read more about this in the [Vue docs](https://vuejs.org/v2/guide/installation.html#CSP-environments).
310
+ Webpacker ships with basic out-of-the-box integration. You can see a list of available commands/tasks by running `bundle exec rails webpacker`.
418
311
 
419
- #### Lazy loading integration
312
+ Included install integrations:
420
313
 
421
- See [docs/es6](docs/es6.md) to know more about Webpack and Webpacker configuration.
422
-
423
- For instance, you can lazy load Vue JS components:
424
-
425
- Before:
426
- ```js
427
- import Vue from 'vue'
428
- import { VCard } from 'vuetify/lib'
429
-
430
- Vue.component('VCard', VCard)
431
- ```
432
-
433
- After:
434
- ```js
435
- import Vue from 'vue'
436
-
437
- // With destructuring assignment
438
- Vue.component('VCard', import('vuetify/lib').then(({ VCard }) => VCard)
439
-
440
- // Or without destructuring assignment
441
- Vue.component('OtherComponent', () => import('./OtherComponent'))
442
- ```
443
-
444
- You can use it in a Single File Component as well:
445
-
446
- ```html
447
- <template>
448
- ...
449
- </template>
450
-
451
- <script>
452
- export default {
453
- components: {
454
- OtherComponent: () => import('./OtherComponent')
455
- }
456
- }
457
- </script>
458
- ```
459
-
460
- By wrapping the import function into an arrow function, Vue will execute it only when it gets requested, loading the module in that moment.
461
-
462
- ##### Automatic registration
463
-
464
- ```js
465
- /**
466
- * The following block of code may be used to automatically register your
467
- * Vue components. It will recursively scan this directory for the Vue
468
- * components and automatically register them with their "basename".
469
- *
470
- * Eg. ./components/OtherComponent.vue -> <other-component></other-component>
471
- * Eg. ./UI/ButtonComponent.vue -> <button-component></button-component>
472
- */
473
-
474
- const files = require.context('./', true, /\.vue$/i)
475
- files.keys().map(key => {
476
- const component = key.split('/').pop().split('.')[0]
477
-
478
- // With Lazy Loading
479
- Vue.component(component, () => import(`${key}`))
480
-
481
- // Or without Lazy Loading
482
- Vue.component(component, files(key).default)
483
- })
484
- ```
485
-
486
- ### Elm
487
-
488
- To use Webpacker with [Elm](http://elm-lang.org), create a
489
- new Rails 5.1+ app using `--webpack=elm` option:
490
-
491
- ```
492
- # Rails 5.1+
493
- rails new myapp --webpack=elm
494
- ```
495
-
496
- (or run `bundle exec rails webpacker:install:elm` on a Rails app already setup with Webpacker).
497
-
498
- The Elm library and its core packages will be added via Yarn and Elm.
499
- An example `Main.elm` app will also be added to your project in `app/javascript`
500
- so that you can experiment with Elm right away.
501
-
502
- ### Svelte
503
-
504
- To use Webpacker with [Svelte](https://svelte.dev), create a
505
- new Rails 5.1+ app using `--webpack=svelte` option:
506
-
507
- ```
508
- # Rails 5.1+
509
- rails new myapp --webpack=svelte
510
- ```
511
-
512
- (or run `bundle exec rails webpacker:install:svelte` on a Rails app already setup with Webpacker).
513
-
514
- Please play with the [Svelte Tutorial](https://svelte.dev/tutorial/basics) or learn more about its API at https://svelte.dev/docs
515
-
516
- ### Stimulus
517
-
518
- To use Webpacker with [Stimulus](http://stimulusjs.org), create a
519
- new Rails 5.1+ app using `--webpack=stimulus` option:
520
-
521
- ```
522
- # Rails 5.1+
523
- rails new myapp --webpack=stimulus
524
- ```
525
-
526
- (or run `bundle exec rails webpacker:install:stimulus` on a Rails app already setup with Webpacker).
527
-
528
- Please read [The Stimulus Handbook](https://stimulusjs.org/handbook/introduction) or learn more about its source code at https://github.com/stimulusjs/stimulus
529
-
530
- ### CoffeeScript
531
-
532
- To add [CoffeeScript](http://coffeescript.org/) support,
533
- run `bundle exec rails webpacker:install:coffee` on a Rails app already
534
- setup with Webpacker.
535
-
536
- An example `hello_coffee.coffee` file will also be added to your project
537
- in `app/javascript/packs` so that you can experiment with CoffeeScript right away.
538
-
539
- ### Erb
540
-
541
- To add [Erb](https://apidock.com/ruby/ERB) support in your JS templates,
542
- run `bundle exec rails webpacker:install:erb` on a Rails app already
543
- setup with Webpacker.
544
-
545
- An example `hello_erb.js.erb` file will also be added to your project
546
- in `app/javascript/packs` so that you can experiment with Erb-flavoured
547
- javascript right away.
314
+ - [React](./docs/integrations.md#React)
315
+ - [Angular with TypeScript](./docs/integrations.md#Angular-with-TypeScript)
316
+ - [Vue](./docs/integrations.md#Vue)
317
+ - [Elm](./docs/integrations.md#Elm)
318
+ - [Svelte](./docs/integrations.md#Svelte)
319
+ - [Stimulus](./docs/integrations.md#Stimulus)
320
+ - [CoffeeScript](./docs/integrations.md#CoffeeScript)
321
+ - [Typescript](./docs/integrations.md)
322
+ - [Erb](./docs/integrations.md#Erb)
548
323
 
324
+ See [Integrations](./docs/integrations.md) for further details.
549
325
 
550
326
  ## Paths
551
327
 
@@ -582,7 +358,6 @@ development:
582
358
 
583
359
  If you have `hmr` turned to true, then the `stylesheet_pack_tag` generates no output, as you will want to configure your styles to be inlined in your JavaScript for hot reloading. During production and testing, the `stylesheet_pack_tag` will create the appropriate HTML tags.
584
360
 
585
-
586
361
  ### Resolved
587
362
 
588
363
  If you are adding Webpacker to an existing app that has most of the assets inside
@@ -607,7 +382,6 @@ import 'images/rails.png'
607
382
  will make the compilation slow, consider adding specific paths instead of
608
383
  whole parent directory if you just need to reference one or two modules
609
384
 
610
-
611
385
  ### Watched
612
386
 
613
387
  By default, the lazy compilation is cached until a file is changed under your
@@ -620,11 +394,11 @@ by adding new paths to `watched_paths` array. This is much like Rails' `autoload
620
394
  Webpacker::Compiler.watched_paths << 'bower_components'
621
395
  ```
622
396
 
623
-
624
397
  ## Deployment
625
398
 
626
399
  Webpacker hooks up a new `webpacker:compile` task to `assets:precompile`, which gets run whenever you run `assets:precompile`. If you are not using Sprockets, `webpacker:compile` is automatically aliased to `assets:precompile`. Similar to sprockets both rake tasks will compile packs in production mode but will use `RAILS_ENV` to load configuration from `config/webpacker.yml` (if available).
627
400
 
401
+ When compiling assets for production on a remote server, such as a continuous integration environment, it's recommended to use `yarn install --frozen-lockfile` to install NPM packages on the remote host to ensure that the installed packages match the `yarn.lock` file.
628
402
 
629
403
  ## Docs
630
404
 
@@ -633,9 +407,7 @@ Webpacker hooks up a new `webpacker:compile` task to `assets:precompile`, which
633
407
  - [Webpack-dev-server](./docs/webpack-dev-server.md)
634
408
  - [Environment Variables](./docs/env.md)
635
409
  - [Folder Structure](./docs/folder-structure.md)
636
- - [Assets](./docs/assets.md)
637
- - [CSS, Sass and SCSS](./docs/css.md)
638
- - [ES6](./docs/es6.md)
410
+ - [Assets](./docs/assets.md) - [CSS, Sass and SCSS](./docs/css.md) - [ES6](./docs/es6.md)
639
411
  - [Props](./docs/props.md)
640
412
  - [Typescript](./docs/typescript.md)
641
413
  - [Yarn](./docs/yarn.md)
@@ -648,12 +420,12 @@ Webpacker hooks up a new `webpacker:compile` task to `assets:precompile`, which
648
420
  - [Troubleshooting](./docs/troubleshooting.md)
649
421
  - [v3 to v4 Upgrade Guide](./docs/v4-upgrade.md)
650
422
 
651
-
652
423
  ## Contributing
424
+
653
425
  [![Code Helpers](https://www.codetriage.com/rails/webpacker/badges/users.svg)](https://www.codetriage.com/rails/webpacker)
654
426
 
655
427
  We encourage you to contribute to Webpacker! See [CONTRIBUTING](CONTRIBUTING.md) for guidelines about how to proceed.
656
428
 
657
-
658
429
  ## License
430
+
659
431
  Webpacker is released under the [MIT License](https://opensource.org/licenses/MIT).