webpacker 6.0.0.beta.7 → 6.0.0.rc.6
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.github/workflows/jest.yml +7 -15
- data/.github/workflows/js-lint.yml +7 -15
- data/.github/workflows/rubocop.yml +1 -1
- data/.github/workflows/ruby.yml +15 -40
- data/.node-version +1 -1
- data/.rubocop.yml +2 -1
- data/CHANGELOG.md +34 -11
- data/CONTRIBUTING.md +19 -0
- data/Gemfile.lock +84 -84
- data/README.md +177 -165
- data/config/webpacker.yml +1 -1
- data/docs/developing_webpacker.md +29 -0
- data/docs/troubleshooting.md +57 -23
- data/docs/v6_upgrade.md +69 -42
- data/gemfiles/Gemfile-rails-edge +1 -1
- data/gemfiles/Gemfile-rails.6.1.x +12 -0
- data/lib/install/{packs/entrypoints/application.js → application.js} +3 -8
- data/lib/install/bin/webpack +4 -7
- data/lib/install/bin/yarn +18 -0
- data/lib/install/config/webpacker.yml +18 -19
- data/lib/install/package.json +15 -0
- data/lib/install/template.rb +38 -16
- data/lib/tasks/webpacker/check_node.rake +3 -1
- data/lib/tasks/webpacker/check_yarn.rake +4 -2
- data/lib/tasks/webpacker/clobber.rake +1 -1
- data/lib/tasks/webpacker/verify_config.rake +14 -0
- data/lib/tasks/webpacker/verify_install.rake +1 -11
- data/lib/tasks/yarn.rake +38 -0
- data/lib/webpacker/commands.rb +19 -15
- data/lib/webpacker/configuration.rb +15 -4
- data/lib/webpacker/dev_server.rb +6 -0
- data/lib/webpacker/dev_server_runner.rb +6 -3
- data/lib/webpacker/env.rb +5 -1
- data/lib/webpacker/helper.rb +14 -8
- data/lib/webpacker/instance.rb +4 -0
- data/lib/webpacker/manifest.rb +1 -2
- data/lib/webpacker/railtie.rb +8 -2
- data/lib/webpacker/runner.rb +1 -1
- data/lib/webpacker/version.rb +1 -1
- data/lib/webpacker/webpack_runner.rb +27 -7
- data/lib/webpacker.rb +1 -1
- data/package/__tests__/development.js +4 -11
- data/package/__tests__/env.js +8 -4
- data/package/babel/preset.js +0 -1
- data/package/config.js +3 -3
- data/package/env.js +6 -3
- data/package/environments/__tests__/base.js +3 -3
- data/package/environments/base.js +13 -8
- data/package/environments/development.js +36 -36
- data/package/index.js +2 -0
- data/package/inliningCss.js +7 -0
- data/package/rules/file.js +1 -1
- data/package/rules/sass.js +1 -2
- data/package/utils/get_style_rule.js +4 -2
- data/package.json +25 -29
- data/test/command_test.rb +76 -0
- data/test/configuration_test.rb +1 -1
- data/test/dev_server_runner_test.rb +5 -2
- data/test/helper_test.rb +48 -34
- data/test/manifest_test.rb +10 -2
- data/test/mounted_app/test/dummy/config/webpacker.yml +1 -1
- data/test/test_app/config/initializers/inspect_autoload_paths.rb +1 -0
- data/test/test_app/config/webpacker.yml +1 -3
- data/test/test_app/config/webpacker_other_location.yml +79 -0
- data/test/test_app/public/packs/manifest.json +12 -5
- data/test/webpacker_test.rb +21 -0
- data/webpacker.gemspec +2 -2
- data/yarn.lock +2357 -3262
- metadata +22 -11
data/docs/troubleshooting.md
CHANGED
@@ -4,14 +4,17 @@
|
|
4
4
|
|
5
5
|
1. Read the error message carefully. The error message will tell you the precise key value
|
6
6
|
that is not matching what Webpack expects.
|
7
|
+
|
7
8
|
2. Put a `debugger` statement in your Webpack configuration and run `bin/webpack --debug-webpacker`.
|
8
9
|
If you have a node debugger installed, you'll see the Chrome debugger for your webpack
|
9
|
-
config. For example, install the Chrome extension
|
10
|
+
config. For example, install the Chrome extension
|
10
11
|
[NiM](https://chrome.google.com/webstore/detail/nodejs-v8-inspector-manag/gnhhdgbaldcilmgcpfddgdbkhjohddkj) and
|
11
12
|
set the option for the dev tools to open automatically. Or put `chrome://inspect` in the URL bar.
|
12
13
|
For more details on debugging, see the official
|
13
14
|
[Webpack docs on debugging](https://webpack.js.org/contribute/debugging/#devtools)
|
15
|
+
|
14
16
|
3. Any arguments that you add to bin/webpack get sent to webpack. For example, you can pass `--debug` to switch loaders to debug mode. See [webpack CLI debug options](https://webpack.js.org/api/cli/#debug-options) for more information on the available options.
|
17
|
+
|
15
18
|
4. You can also pass additional options to the command to run the webpack-dev-server and start the webpack-dev-server with the option `--debug-webpacker`
|
16
19
|
|
17
20
|
## ENOENT: no such file or directory - node-sass
|
@@ -56,16 +59,15 @@ completed the compilation successfully before loading a view.
|
|
56
59
|
* If you get this error while trying to use Elm, try rebuilding Elm. You can do
|
57
60
|
so with a postinstall hook in your `package.json`:
|
58
61
|
|
59
|
-
```
|
62
|
+
```json
|
60
63
|
"scripts": {
|
61
64
|
"postinstall": "npm rebuild elm"
|
62
65
|
}
|
63
66
|
```
|
64
67
|
|
65
|
-
|
66
68
|
## webpack or webpack-dev-server not found
|
67
69
|
|
68
|
-
* This could happen if
|
70
|
+
* This could happen if `webpacker:install` step is skipped. Please run `bundle exec rails webpacker:install` to fix the issue.
|
69
71
|
|
70
72
|
* If you encounter the above error on heroku after upgrading from Rails 4.x to 5.1.x, then the problem might be related to missing `yarn` binstub. Please run following commands to update/add binstubs:
|
71
73
|
|
@@ -74,7 +76,6 @@ bundle config --delete bin
|
|
74
76
|
./bin/rails app:update:bin # or rails app:update:bin
|
75
77
|
```
|
76
78
|
|
77
|
-
|
78
79
|
## Running webpack on Windows
|
79
80
|
|
80
81
|
If you are running webpack on Windows, your command shell may not be able to interpret the preferred interpreter
|
@@ -86,7 +87,6 @@ C:\path>ruby bin\webpack
|
|
86
87
|
C:\path>ruby bin\webpack-dev-server
|
87
88
|
```
|
88
89
|
|
89
|
-
|
90
90
|
## Invalid configuration object. webpack has been initialised using a configuration object that does not match the API schema.
|
91
91
|
|
92
92
|
If you receive this error when running `$ ./bin/webpack-dev-server` ensure your configuration is correct; most likely the path to your "packs" folder is incorrect if you modified from the original "source_path" defined in `config/webpacker.yml`.
|
@@ -101,6 +101,7 @@ Basic fix involves:
|
|
101
101
|
|
102
102
|
```bash
|
103
103
|
# install sysconfcpus on CI
|
104
|
+
|
104
105
|
git clone https://github.com/obmarg/libsysconfcpus.git $HOME/dependencies/libsysconfcpus
|
105
106
|
cd libsysconfcpus
|
106
107
|
.configure --prefix=$HOME/dependencies/sysconfcpus
|
@@ -113,41 +114,39 @@ chmod +x $HOME/your_rails_app/node_modules/.bin/elm-make
|
|
113
114
|
```
|
114
115
|
|
115
116
|
## Rake assets:precompile fails. ExecJS::RuntimeError
|
116
|
-
This error occurs because you are trying to minify by terser a pack that's already been minified by Webpacker. To avoid this conflict and prevent appearing of ExecJS::RuntimeError error, you will need to disable uglifier from Rails config:
|
117
|
+
This error occurs because you are trying to minify by `terser` a pack that's already been minified by Webpacker. To avoid this conflict and prevent appearing of `ExecJS::RuntimeError` error, you will need to disable uglifier from Rails config:
|
117
118
|
|
118
119
|
```ruby
|
119
|
-
|
120
|
-
# From
|
120
|
+
# In production.rb
|
121
121
|
|
122
|
+
# From
|
122
123
|
Rails.application.config.assets.js_compressor = :uglifier
|
123
124
|
|
124
125
|
# To
|
125
|
-
|
126
126
|
Rails.application.config.assets.js_compressor = Uglifier.new(harmony: true)
|
127
|
-
|
128
127
|
```
|
129
128
|
|
130
129
|
### Angular: WARNING in ./node_modules/@angular/core/esm5/core.js, Critical dependency: the request of a dependency is an expression
|
131
130
|
|
132
|
-
To silent these warnings, please update `config/webpack/
|
133
|
-
|
131
|
+
To silent these warnings, please update `config/webpack/base.js`:
|
134
132
|
```js
|
135
|
-
// environment.js
|
136
133
|
const webpack = require('webpack')
|
137
134
|
const { resolve } = require('path')
|
138
|
-
const {
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
)
|
135
|
+
const { webpackConfig, merge } = require('@rails/webpacker')
|
136
|
+
|
137
|
+
module.exports = merge(webpackConfig, {
|
138
|
+
plugins: [
|
139
|
+
new webpack.ContextReplacementPlugin(
|
140
|
+
/angular(\\|\/)core(\\|\/)(@angular|esm5)/,
|
141
|
+
resolve(config.source_path)
|
142
|
+
)
|
143
|
+
]
|
144
|
+
})
|
146
145
|
```
|
147
146
|
|
148
147
|
### Compilation Fails Silently
|
149
148
|
|
150
|
-
If compiling is not producing output files and there are no error messages to help troubleshoot. Setting the webpack_compile_output configuration variable to
|
149
|
+
If compiling is not producing output files and there are no error messages to help troubleshoot. Setting the `webpack_compile_output` configuration variable to `true` in webpacker.yml may add some helpful error information to your log file (Rails `log/development.log` or `log/production.log`)
|
151
150
|
|
152
151
|
```yml
|
153
152
|
# webpacker.yml
|
@@ -158,3 +157,38 @@ default: &default
|
|
158
157
|
public_output_path: complaints_packs
|
159
158
|
webpack_compile_output: true
|
160
159
|
```
|
160
|
+
|
161
|
+
### Using global variables for dependencies
|
162
|
+
|
163
|
+
If you want to access any dependency without importing it everywhere or use it directly in your dev tools, please check: [https://webpack.js.org/plugins/provide-plugin/](https://webpack.js.org/plugins/provide-plugin/) and the [webpack docs on shimming globals](https://webpack.js.org/guides/shimming/#shimming-globals).
|
164
|
+
|
165
|
+
Note, if you are exposing globals, like jQuery, to non-webpack dependencies (like an inline script) via the [expose-loader](https://webpack.js.org/loaders/expose-loader/), you will need to override the default of `defer: true` to be `defer:false` your call to the `javascript_pack_tag` so that the browser will load your bundle to setup the global variable before other code depends on it. However, you really should try to remove the dependendency on such globals.
|
166
|
+
|
167
|
+
Thus ProvidePlugin manages build-time dependencies to global symbols whereas the expose-loader manages runtime dependencies to global symbols.
|
168
|
+
|
169
|
+
**You don't need to assign dependencies on `window`.**
|
170
|
+
|
171
|
+
For instance, with [jQuery](https://jquery.com/):
|
172
|
+
```diff
|
173
|
+
// app/packs/entrypoints/application.js
|
174
|
+
|
175
|
+
- import jQuery from 'jquery'
|
176
|
+
- window.jQuery = jQuery
|
177
|
+
```
|
178
|
+
|
179
|
+
Instead do:
|
180
|
+
```js
|
181
|
+
// config/webpack/base.js
|
182
|
+
|
183
|
+
const webpack = require('webpack')
|
184
|
+
const { webpackConfig, merge } = require('@rails/webpacker')
|
185
|
+
|
186
|
+
module.exports = merge(webpackConfig, {
|
187
|
+
plugins: [
|
188
|
+
new webpack.ProvidePlugin({
|
189
|
+
$: 'jquery',
|
190
|
+
jQuery: 'jquery',
|
191
|
+
})
|
192
|
+
],
|
193
|
+
})
|
194
|
+
```
|
data/docs/v6_upgrade.md
CHANGED
@@ -1,45 +1,46 @@
|
|
1
|
-
#
|
1
|
+
# Upgrading from Webpacker 5 to 6
|
2
2
|
|
3
|
-
|
3
|
+
There are several substantial changes in Webpacker 6 that you need to manually account for when coming from Webpacker 5. This guide will help you through it.
|
4
4
|
|
5
|
-
##
|
5
|
+
## Webpacker has become a slimmer wrapper around Webpack
|
6
6
|
|
7
|
-
|
7
|
+
By default, Webpacker 6 is focused on compiling and bundling JavaScript. This pairs with the existing asset pipeline in Rails that's setup to transpile CSS and static images using [Sprockets](https://github.com/rails/sprockets). For most developers, that's the recommended combination. But if you'd like to use Webpacker for CSS and static assets as well, please see [integrations](https://github.com/rails/webpacker#integrations) for more information.
|
8
8
|
|
9
|
-
|
9
|
+
Webpacker used to configure Webpack indirectly, which lead to a [complicated secondary configuration process](https://github.com/rails/webpacker/blob/5-x-stable/docs/webpack.md). This was done in order to provide default configurations for the most popular frameworks, but ended up creating more complexity than it cured. So now Webpacker delegates all configuration directly to Webpack's default configuration setup.
|
10
10
|
|
11
|
-
|
11
|
+
This means you have to configure integration with frameworks yourself, but webpack-merge helps with this. See this example for [Vue](https://github.com/rails/webpacker#other-frameworks).
|
12
12
|
|
13
|
-
|
13
|
+
## How to upgrade to Webpacker v6 from v5
|
14
14
|
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
15
|
+
1. If you are changing from the v5 default for `source_entry_path`:
|
16
|
+
```yml
|
17
|
+
source_path: app/javascript
|
18
|
+
source_entry_path: packs
|
19
|
+
```
|
20
|
+
to the v6 default:
|
21
|
+
```yml
|
22
|
+
source_path: app/javascript
|
23
|
+
source_entry_path: /
|
24
|
+
```
|
25
|
+
Then move your `app/javascript/packs/*` (including `application.js`) to `app/javascript/`.
|
20
26
|
|
21
|
-
|
27
|
+
Check if you had any entry point files in child directories of your `source_entry_path`. Files for entry points in child directories are not supported by rails/webpacker v6.
|
22
28
|
|
23
|
-
|
29
|
+
2. Rename `config/webpack` to `config/webpack_old`
|
24
30
|
|
25
|
-
|
31
|
+
3. Rename `config/webpacker.yml` to `config/webpacker_old.yml`
|
26
32
|
|
27
|
-
|
33
|
+
4. Uninstall the current version of `webpack-dev-server`: `yarn remove webpack-dev-server`
|
28
34
|
|
29
|
-
|
35
|
+
5. Upgrade the Webpacker Ruby gem and NPM package
|
30
36
|
|
31
|
-
|
37
|
+
Note: [Check the releases page to verify the latest version](https://github.com/rails/webpacker/releases), and make sure to install identical version numbers of webpacker gem and `@rails/webpacker` npm package. (Gems use a period and packages use a dot between the main version number and the beta version.)
|
32
38
|
|
33
|
-
|
34
|
-
2. If your `source_entry_path` is `packs`, rename it to `entrypoints`
|
35
|
-
3. Rename `config/webpack` to `config/webpack_old`
|
36
|
-
4. Rename `config/webpacker.yml` to `config/webpacker_old.yml`
|
37
|
-
5. Uninstall the current version of `webpack-dev-server`: `yarn remove webpack-dev-server`
|
38
|
-
6. Upgrade Webpacker
|
39
|
+
Example going to a specific version:
|
39
40
|
|
40
41
|
```ruby
|
41
42
|
# Gemfile
|
42
|
-
gem 'webpacker', '
|
43
|
+
gem 'webpacker', '6.0.0.rc.5'
|
43
44
|
```
|
44
45
|
|
45
46
|
```bash
|
@@ -47,22 +48,18 @@ Now you have a straight access to the Webpack configuration and you can change i
|
|
47
48
|
```
|
48
49
|
|
49
50
|
```bash
|
50
|
-
yarn add @rails/webpacker@
|
51
|
+
yarn add @rails/webpacker@6.0.0-rc.5 --exact
|
51
52
|
```
|
52
53
|
|
53
54
|
```bash
|
54
55
|
bundle exec rails webpacker:install
|
55
56
|
```
|
56
57
|
|
57
|
-
|
58
|
-
`stylesheet_pack_tag`.
|
58
|
+
6. Update API usage of the view helpers by changing `javascript_packs_with_chunks_tag` and `stylesheet_packs_with_chunks_tag` to `javascript_pack_tag` and `stylesheet_pack_tag`. Ensure that your layouts and views will only have **at most one call** to `javascript_pack_tag` and **at most one call** to `stylesheet_pack_tag`. You can now pass multiple bundles to these view helper methods. If you fail to changes this, you may experience performance issues, and other bugs related to multiple copies of React, like [issue 2932](https://github.com/rails/webpacker/issues/2932). If you expose jquery globally with `expose-loader,` by using `import $ from "expose-loader?exposes=$,jQuery!jquery"` in your `app/javascript/application.js`, pass the option `defer: false` to your `javascript_pack_tag`.
|
59
59
|
|
60
60
|
7. If you are using any integrations like `css`, `React` or `TypeScript`. Please see https://github.com/rails/webpacker#integrations section on how they work in v6.
|
61
61
|
|
62
|
-
8. Copy over any custom webpack config from `config/webpack_old`
|
63
|
-
|
64
|
-
- Common code previously called 'environment' changed to 'base'
|
65
|
-
- import `environment` changed name to `webpackConfig`.
|
62
|
+
8. Copy over any custom webpack config from `config/webpack_old`. Common code previously called 'environment' should be changed to 'base', and import `environment` changed to `webpackConfig`.
|
66
63
|
|
67
64
|
```js
|
68
65
|
// config/webpack/base.js
|
@@ -72,15 +69,45 @@ Now you have a straight access to the Webpack configuration and you can change i
|
|
72
69
|
module.exports = merge(webpackConfig, customConfig)
|
73
70
|
```
|
74
71
|
|
75
|
-
9. Copy over custom browserlist config from `.
|
72
|
+
9. Copy over custom browserlist config from `.browserslistrc` if it exists into the `"browserslist"` key in `package.json` and remove `.browserslistrc`.
|
73
|
+
|
74
|
+
10. Remove `babel.config.js` if you never changed it. Be sure to have this config in your `package.json`:
|
75
|
+
|
76
|
+
```json
|
77
|
+
"babel": {
|
78
|
+
"presets": [
|
79
|
+
"./node_modules/@rails/webpacker/package/babel/preset.js"
|
80
|
+
]
|
81
|
+
}
|
82
|
+
```
|
83
|
+
|
84
|
+
11. Remove `postcss.config.js` if you don't use `PostCSS`.
|
85
|
+
|
86
|
+
12. `extensions` was removed from the `webpacker.yml` file. Move custom extensions to your configuration by merging an object like this. For more details, see docs for [Webpack Configuration](https://github.com/rails/webpacker/blob/master/README.md#webpack-configuration)
|
76
87
|
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
resolve: {
|
83
|
-
extensions: ['.ts', '.tsx']
|
88
|
+
```js
|
89
|
+
{
|
90
|
+
resolve: {
|
91
|
+
extensions: ['.ts', '.tsx', '.vue', '.css']
|
92
|
+
}
|
84
93
|
}
|
85
|
-
|
86
|
-
|
94
|
+
```
|
95
|
+
|
96
|
+
13. Some dependencies were removed in [PR 3056](https://github.com/rails/webpacker/pull/3056). If you see the error: `Error: Cannot find module 'babel-plugin-macros'`, or similar, then you need to `yarn add <dependency>` where <dependency> might include: `babel-plugin-macros`, `case-sensitive-paths-webpack-plugin`, `core-js`, `regenerator-runtime`. Or you might want to remove your dependency on those.
|
97
|
+
|
98
|
+
14. If `bin/yarn` does not exist, create an executable [yarn](https://github.com/rails/webpacker/blob/master/lib/install/bin/yarn) file in your `/bin` directory.
|
99
|
+
|
100
|
+
15. Remove overlapping dependencies from your `package.json` and rails/webpacker's `package.json`. For example, don't include `webpack` directly as that's a dependency of rails/webpacker.
|
101
|
+
|
102
|
+
16. Review the new default's changes to `webpacker.yml` and `config/webpack`. Consider each suggested change carefully, especially the change to have your `source_entry_path` be at the top level of your `source_path`.
|
103
|
+
|
104
|
+
17. Make sure that you can run `bin/webpack` without errors.
|
105
|
+
|
106
|
+
18. Try running `RAILS_ENV=production bin/rails assets:precompile`. If all goes well, don't forget to clean the generated assets with `bin/rails assets:clobber`.
|
107
|
+
|
108
|
+
19. Try your app!
|
109
|
+
|
110
|
+
## Examples of v5 to v6
|
111
|
+
|
112
|
+
1. [React on Rails Project with HMR and SSR](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/compare/webpacker-5.x...master)
|
113
|
+
2. [Vue and Sass Example](https://github.com/guillaumebriday/upgrade-webpacker-5-to-6)
|
data/gemfiles/Gemfile-rails-edge
CHANGED
@@ -4,7 +4,7 @@ git_source(:github) { |repo| "https://github.com/#{repo}.git" }
|
|
4
4
|
|
5
5
|
gemspec path: "../"
|
6
6
|
|
7
|
-
gem "rails", github: "rails/rails"
|
7
|
+
gem "rails", github: "rails/rails", branch: "main"
|
8
8
|
gem "arel", github: "rails/arel"
|
9
9
|
gem "rake", ">= 11.1"
|
10
10
|
gem "rack-proxy", require: false
|
@@ -0,0 +1,12 @@
|
|
1
|
+
source "https://rubygems.org"
|
2
|
+
|
3
|
+
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
|
4
|
+
|
5
|
+
gemspec path: "../"
|
6
|
+
|
7
|
+
gem "rails", '~>6.1.0'
|
8
|
+
gem "arel", github: "rails/arel"
|
9
|
+
gem "rake", ">= 11.1"
|
10
|
+
gem "rack-proxy", require: false
|
11
|
+
gem "minitest", "~> 5.0"
|
12
|
+
gem "byebug"
|
@@ -1,20 +1,15 @@
|
|
1
1
|
/* eslint no-console:0 */
|
2
2
|
// This file is automatically compiled by Webpack, along with any other files
|
3
3
|
// present in this directory. You're encouraged to place your actual application logic in
|
4
|
-
// a relevant structure within app/
|
4
|
+
// a relevant structure within app/javascript and only use these pack files to reference
|
5
5
|
// that code so it'll be compiled.
|
6
6
|
//
|
7
7
|
// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
|
8
8
|
// layout file, like app/views/layouts/application.html.erb
|
9
9
|
|
10
|
-
// Uncomment to copy all static images under
|
10
|
+
// Uncomment to copy all static images under ./images to the output folder and reference
|
11
11
|
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
|
12
12
|
// or the `imagePath` JavaScript helper below.
|
13
13
|
//
|
14
|
-
// const images = require.context('
|
14
|
+
// const images = require.context('./images', true)
|
15
15
|
// const imagePath = (name) => images(name, true)
|
16
|
-
|
17
|
-
import 'core-js/stable'
|
18
|
-
import 'regenerator-runtime/runtime'
|
19
|
-
|
20
|
-
console.log('Hello World from Webpacker')
|
data/lib/install/bin/webpack
CHANGED
@@ -1,17 +1,14 @@
|
|
1
1
|
#!/usr/bin/env ruby
|
2
2
|
|
3
|
-
ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
|
4
|
-
ENV["NODE_ENV"] ||= "development"
|
5
|
-
|
6
3
|
require "pathname"
|
7
|
-
ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
|
8
|
-
Pathname.new(__FILE__).realpath)
|
9
|
-
|
10
4
|
require "bundler/setup"
|
11
|
-
|
12
5
|
require "webpacker"
|
13
6
|
require "webpacker/webpack_runner"
|
14
7
|
|
8
|
+
ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
|
9
|
+
ENV["NODE_ENV"] ||= "development"
|
10
|
+
ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile", Pathname.new(__FILE__).realpath)
|
11
|
+
|
15
12
|
APP_ROOT = File.expand_path("..", __dir__)
|
16
13
|
Dir.chdir(APP_ROOT) do
|
17
14
|
Webpacker::WebpackRunner.run(ARGV)
|
@@ -0,0 +1,18 @@
|
|
1
|
+
#!/usr/bin/env ruby
|
2
|
+
|
3
|
+
APP_ROOT = File.expand_path("..", __dir__)
|
4
|
+
Dir.chdir(APP_ROOT) do
|
5
|
+
yarn = ENV["PATH"].split(File::PATH_SEPARATOR).
|
6
|
+
select { |dir| File.expand_path(dir) != __dir__ }.
|
7
|
+
product(["yarn", "yarnpkg", "yarn.cmd", "yarn.ps1"]).
|
8
|
+
map { |dir, file| File.expand_path(file, dir) }.
|
9
|
+
find { |file| File.executable?(file) }
|
10
|
+
|
11
|
+
if yarn
|
12
|
+
exec yarn, *ARGV
|
13
|
+
else
|
14
|
+
$stderr.puts "Yarn executable was not detected in the system."
|
15
|
+
$stderr.puts "Download Yarn at https://yarnpkg.com/en/docs/install"
|
16
|
+
exit 1
|
17
|
+
end
|
18
|
+
end
|
@@ -1,11 +1,11 @@
|
|
1
1
|
# Note: You must restart bin/webpack-dev-server for changes to take effect
|
2
2
|
|
3
3
|
default: &default
|
4
|
-
source_path: app/
|
5
|
-
source_entry_path:
|
4
|
+
source_path: app/javascript
|
5
|
+
source_entry_path: /
|
6
6
|
public_root_path: public
|
7
7
|
public_output_path: packs
|
8
|
-
cache_path: tmp/
|
8
|
+
cache_path: tmp/webpacker
|
9
9
|
webpack_compile_output: true
|
10
10
|
|
11
11
|
# Additional paths webpack should look up modules
|
@@ -24,29 +24,28 @@ development:
|
|
24
24
|
https: false
|
25
25
|
host: localhost
|
26
26
|
port: 3035
|
27
|
-
public: localhost:3035
|
28
|
-
# Inject browserside javascript that required by both HMR and Live(full) reload
|
29
|
-
inject_client: true
|
30
27
|
# Hot Module Replacement updates modules while the application is running without a full reload
|
31
28
|
hmr: false
|
32
|
-
#
|
33
|
-
|
34
|
-
|
35
|
-
|
29
|
+
# Defaults to the inverse of hmr. Uncomment to manually set this.
|
30
|
+
# live_reload: true
|
31
|
+
client:
|
32
|
+
# Should we show a full-screen overlay in the browser when there are compiler errors or warnings?
|
33
|
+
overlay: true
|
34
|
+
# May also be a string
|
35
|
+
# webSocketURL:
|
36
|
+
# hostname: "0.0.0.0"
|
37
|
+
# pathname: "/ws"
|
38
|
+
# port: 8080
|
36
39
|
# Should we use gzip compression?
|
37
40
|
compress: true
|
38
41
|
# Note that apps that do not check the host are vulnerable to DNS rebinding attacks
|
39
|
-
|
40
|
-
|
41
|
-
use_local_ip: false
|
42
|
-
# When enabled, nothing except the initial startup information will be written to the console.
|
43
|
-
# This also means that errors or warnings from webpack are not visible.
|
44
|
-
quiet: false
|
45
|
-
pretty: false
|
42
|
+
allowed_hosts: "all"
|
43
|
+
pretty: true
|
46
44
|
headers:
|
47
45
|
'Access-Control-Allow-Origin': '*'
|
48
|
-
|
49
|
-
|
46
|
+
static:
|
47
|
+
watch:
|
48
|
+
ignored: '**/node_modules/**'
|
50
49
|
|
51
50
|
test:
|
52
51
|
<<: *default
|
data/lib/install/template.rb
CHANGED
@@ -1,5 +1,6 @@
|
|
1
1
|
# Install Webpacker
|
2
2
|
copy_file "#{__dir__}/config/webpacker.yml", "config/webpacker.yml"
|
3
|
+
copy_file "#{__dir__}/package.json", "package.json"
|
3
4
|
|
4
5
|
say "Copying webpack core config"
|
5
6
|
directory "#{__dir__}/config/webpack", "config/webpack"
|
@@ -8,7 +9,8 @@ if Dir.exists?(Webpacker.config.source_path)
|
|
8
9
|
say "The packs app source directory already exists"
|
9
10
|
else
|
10
11
|
say "Creating packs app source directory"
|
11
|
-
|
12
|
+
empty_directory "app/javascript"
|
13
|
+
copy_file "#{__dir__}/application.js", "app/javascript/application.js"
|
12
14
|
end
|
13
15
|
|
14
16
|
apply "#{__dir__}/binstubs.rb"
|
@@ -26,6 +28,40 @@ if File.exists?(git_ignore_path)
|
|
26
28
|
end
|
27
29
|
end
|
28
30
|
|
31
|
+
if (app_layout_path = Rails.root.join("app/views/layouts/application.html.erb")).exist?
|
32
|
+
say "Add JavaScript include tag in application layout"
|
33
|
+
insert_into_file app_layout_path.to_s, %(\n <%= javascript_pack_tag "application" %>), before: /\s*<\/head>/
|
34
|
+
else
|
35
|
+
say "Default application.html.erb is missing!", :red
|
36
|
+
say %( Add <%= javascript_pack_tag "application" %> within the <head> tag in your custom layout.)
|
37
|
+
end
|
38
|
+
|
39
|
+
if (setup_path = Rails.root.join("bin/setup")).exist?
|
40
|
+
say "Run bin/yarn during bin/setup"
|
41
|
+
insert_into_file setup_path.to_s, <<-RUBY, after: %( system("bundle check") || system!("bundle install")\n)
|
42
|
+
|
43
|
+
# Install JavaScript dependencies
|
44
|
+
system! "bin/yarn"
|
45
|
+
RUBY
|
46
|
+
end
|
47
|
+
|
48
|
+
if (asset_config_path = Rails.root.join("config/initializers/assets.rb")).exist?
|
49
|
+
say "Add node_modules to the asset load path"
|
50
|
+
append_to_file asset_config_path, <<-RUBY
|
51
|
+
|
52
|
+
# Add node_modules folder to the asset load path.
|
53
|
+
Rails.application.config.assets.paths << Rails.root.join("node_modules")
|
54
|
+
RUBY
|
55
|
+
end
|
56
|
+
|
57
|
+
if (csp_config_path = Rails.root.join("config/initializers/content_security_policy.rb")).exist?
|
58
|
+
say "Make note of webpack-dev-server exemption needed to csp"
|
59
|
+
insert_into_file csp_config_path, <<-RUBY, after: %(# Rails.application.config.content_security_policy do |policy|)
|
60
|
+
# # If you are using webpack-dev-server then specify webpack-dev-server host
|
61
|
+
# policy.connect_src :self, :https, "http://localhost:3035", "ws://localhost:3035" if Rails.env.development?
|
62
|
+
RUBY
|
63
|
+
end
|
64
|
+
|
29
65
|
results = []
|
30
66
|
|
31
67
|
Dir.chdir(Rails.root) do
|
@@ -49,18 +85,6 @@ Dir.chdir(Rails.root) do
|
|
49
85
|
results << run("yarn add --dev webpack-dev-server @webpack-cli/serve")
|
50
86
|
end
|
51
87
|
|
52
|
-
insert_into_file Rails.root.join("package.json").to_s, before: /\n}\n*$/ do
|
53
|
-
<<~JSON.chomp
|
54
|
-
,
|
55
|
-
"babel": {
|
56
|
-
"presets": ["./node_modules/@rails/webpacker/package/babel/preset.js"]
|
57
|
-
},
|
58
|
-
"browserslist": [
|
59
|
-
"defaults"
|
60
|
-
]
|
61
|
-
JSON
|
62
|
-
end
|
63
|
-
|
64
88
|
if Rails::VERSION::MAJOR == 5 && Rails::VERSION::MINOR > 1
|
65
89
|
say "You need to allow webpack-dev-server host as allowed origin for connect-src.", :yellow
|
66
90
|
say "This can be done in Rails 5.2+ for development environment in the CSP initializer", :yellow
|
@@ -68,9 +92,7 @@ if Rails::VERSION::MAJOR == 5 && Rails::VERSION::MINOR > 1
|
|
68
92
|
say "policy.connect_src :self, :https, \"http://localhost:3035\", \"ws://localhost:3035\" if Rails.env.development?", :yellow
|
69
93
|
end
|
70
94
|
|
71
|
-
|
72
|
-
say "Webpacker successfully installed 🎉 🍰", :green
|
73
|
-
else
|
95
|
+
unless results.all?
|
74
96
|
say "Webpacker installation failed 😭 See above for details.", :red
|
75
97
|
exit 1
|
76
98
|
end
|
@@ -3,7 +3,9 @@ namespace :webpacker do
|
|
3
3
|
desc "Verifies if Node.js is installed"
|
4
4
|
task :check_node do
|
5
5
|
begin
|
6
|
-
|
6
|
+
which_command = Gem.win_platform? ? "where" : "which"
|
7
|
+
raise Errno::ENOENT if `#{which_command} node || #{which_command} nodejs`.strip.empty?
|
8
|
+
|
7
9
|
node_version = `node -v || nodejs -v`.strip
|
8
10
|
raise Errno::ENOENT if node_version.blank?
|
9
11
|
|
@@ -3,14 +3,16 @@ namespace :webpacker do
|
|
3
3
|
desc "Verifies if Yarn is installed"
|
4
4
|
task :check_yarn do
|
5
5
|
begin
|
6
|
-
|
6
|
+
which_command = Gem.win_platform? ? "where" : "which"
|
7
|
+
raise Errno::ENOENT if `#{which_command} yarn`.strip.empty?
|
8
|
+
|
7
9
|
yarn_version = `yarn --version`.strip
|
8
10
|
raise Errno::ENOENT if yarn_version.blank?
|
9
11
|
|
10
12
|
pkg_path = Pathname.new("#{__dir__}/../../../package.json").realpath
|
11
13
|
yarn_range = JSON.parse(pkg_path.read)["engines"]["yarn"]
|
12
14
|
is_valid = SemanticRange.satisfies?(yarn_version, yarn_range) rescue false
|
13
|
-
is_unsupported = SemanticRange.satisfies?(yarn_version, ">=
|
15
|
+
is_unsupported = SemanticRange.satisfies?(yarn_version, ">=4.0.0") rescue false
|
14
16
|
|
15
17
|
unless is_valid
|
16
18
|
$stderr.puts "Webpacker requires Yarn \"#{yarn_range}\" and you are using #{yarn_version}"
|
@@ -2,7 +2,7 @@ require "webpacker/configuration"
|
|
2
2
|
|
3
3
|
namespace :webpacker do
|
4
4
|
desc "Remove the webpack compiled output directory"
|
5
|
-
task clobber: ["webpacker:
|
5
|
+
task clobber: ["webpacker:verify_config", :environment] do
|
6
6
|
Webpacker.clobber
|
7
7
|
$stdout.puts "Removed webpack output path directory #{Webpacker.config.public_output_path}"
|
8
8
|
end
|
@@ -0,0 +1,14 @@
|
|
1
|
+
require "webpacker/configuration"
|
2
|
+
|
3
|
+
namespace :webpacker do
|
4
|
+
desc "Verifies if the Webpacker config is present"
|
5
|
+
task :verify_config do
|
6
|
+
unless Webpacker.config.config_path.exist?
|
7
|
+
path = Webpacker.config.config_path.relative_path_from(Pathname.new(pwd)).to_s
|
8
|
+
$stderr.puts "Configuration #{path} file not found. \n"\
|
9
|
+
"Make sure webpacker:install is run successfully before " \
|
10
|
+
"running dependent tasks"
|
11
|
+
exit!
|
12
|
+
end
|
13
|
+
end
|
14
|
+
end
|
@@ -1,14 +1,4 @@
|
|
1
|
-
require "webpacker/configuration"
|
2
|
-
|
3
1
|
namespace :webpacker do
|
4
2
|
desc "Verifies if Webpacker is installed"
|
5
|
-
task verify_install: [:check_node, :check_yarn, :check_binstubs]
|
6
|
-
unless Webpacker.config.config_path.exist?
|
7
|
-
path = Webpacker.config.config_path.relative_path_from(Pathname.new(pwd)).to_s
|
8
|
-
$stderr.puts "Configuration #{path} file not found. \n"\
|
9
|
-
"Make sure webpacker:install is run successfully before " \
|
10
|
-
"running dependent tasks"
|
11
|
-
exit!
|
12
|
-
end
|
13
|
-
end
|
3
|
+
task verify_install: [:verify_config, :check_node, :check_yarn, :check_binstubs]
|
14
4
|
end
|