webpacker_lite 1.0.0 → 2.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.gitignore +1 -0
- data/.travis.yml +3 -10
- data/CHANGELOG.md +13 -1
- data/Gemfile +8 -0
- data/Gemfile.lock +86 -18
- data/MIT-LICENSE +1 -1
- data/README.md +153 -55
- data/Rakefile +11 -0
- data/lib/tasks/webpacker.rake +1 -1
- data/lib/tasks/webpacker_lite/clobber.rake +1 -1
- data/lib/tasks/webpacker_lite/verify_install.rake +2 -2
- data/lib/webpacker_lite.rb +4 -0
- data/lib/webpacker_lite/configuration.rb +27 -11
- data/lib/webpacker_lite/env.rb +6 -3
- data/lib/webpacker_lite/file_loader.rb +5 -1
- data/lib/webpacker_lite/helper.rb +25 -47
- data/lib/webpacker_lite/manifest.rb +17 -6
- data/lib/webpacker_lite/version.rb +1 -1
- data/test/configuration_test.rb +13 -0
- data/test/env_test.rb +12 -0
- data/test/helper_test.rb +23 -0
- data/test/manifest_test.rb +31 -0
- data/test/test_app/config/secrets.yml +5 -0
- data/test/test_app/public/webpack/manifest.json +4 -0
- data/test/webpacker_test.rb +14 -0
- data/yarn.lock +4 -0
- metadata +18 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 2e6a7d776f0f2bb29a4cd64177a1ca8b447b358a
|
4
|
+
data.tar.gz: ade62ad9187e06fe8f3ed007641b5cbdf2b2ef28
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 90cb984e1db2305e0504a7a5ac0030bec26726b5ba7db0541a6b206444caf3e01ac06261452e2cb0d3cc9921cb9458ac0e45c37c17cd2ed1d0bf68cf14a057f0
|
7
|
+
data.tar.gz: 1d1f2c2b10e55f1e78c36fab16ff7969ac1ee24129b9bde2e224e2b650c0f1aee3bfe5e3e81274704263e06573d6ecb8a57c63e13f736c1bfee7a75ee4fea16c
|
data/.gitignore
CHANGED
data/.travis.yml
CHANGED
@@ -6,16 +6,9 @@ rvm:
|
|
6
6
|
- 2.4.1
|
7
7
|
cache:
|
8
8
|
bundler: true
|
9
|
-
directories:
|
10
|
-
- node_modules
|
11
|
-
yarn: true
|
12
9
|
|
13
10
|
install:
|
14
|
-
-
|
15
|
-
- nvm install node
|
16
|
-
- node -v
|
17
|
-
- npm i -g yarn
|
18
|
-
- yarn
|
11
|
+
- bundle install
|
19
12
|
script:
|
20
|
-
-
|
21
|
-
-
|
13
|
+
- bundle exec rubocop
|
14
|
+
- bundle exec rake test
|
data/CHANGELOG.md
CHANGED
@@ -6,8 +6,20 @@ Contributors: please follow the recommendations outlined at [keepachangelog.com]
|
|
6
6
|
## [Unreleased]
|
7
7
|
*Please add entries here for your pull requests.*
|
8
8
|
|
9
|
+
|
10
|
+
## [2.0.0] - 2017-05-23
|
11
|
+
All in [#9](https://github.com/shakacode/webpacker_lite/pull/9) by [justin808](https://github.com/justin808) with help from [conturbo](https://github.com/conturbo) on the tests.
|
12
|
+
|
13
|
+
* Rewrote README.md.
|
14
|
+
* Configuration is simplified and changed to a single file, `/config/webpacker_lite.yml`. See README.md.
|
15
|
+
* v1 assumed that manifest.json would contain the host name for hot reloading. v2 puts in the host at the Ruby level.
|
16
|
+
* `stylesheet_pack_tag` API changed. ENV value for `HOT_RELOADING` == "TRUE" results in the stylesheet_pack_tag not writing anything due to hot reloading requiring inlined JavaScript of styles and not extracted CSS.
|
17
|
+
* Removed any bits of JavaScript from webpacker_lite.
|
18
|
+
* Added tests
|
19
|
+
|
9
20
|
## [1.0.0] - 2017-05-03
|
10
21
|
Initial release
|
11
22
|
|
12
|
-
[Unreleased]: https://github.com/shakacode/webpacker_lite/compare/
|
23
|
+
[Unreleased]: https://github.com/shakacode/webpacker_lite/compare/2.0.0...master
|
24
|
+
[2.0.0]: https://github.com/shakacode/react_on_rails/compare/1.0.0...2.0.0
|
13
25
|
[1.0.0]: https://github.com/shakacode/react_on_rails/compare/0.0.5...1.0.0
|
data/Gemfile
CHANGED
data/Gemfile.lock
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
PATH
|
2
2
|
remote: .
|
3
3
|
specs:
|
4
|
-
webpacker_lite (0.0
|
4
|
+
webpacker_lite (1.0.0)
|
5
5
|
activesupport (>= 4.2)
|
6
6
|
multi_json (~> 1.2)
|
7
7
|
railties (>= 4.2)
|
@@ -9,62 +9,130 @@ PATH
|
|
9
9
|
GEM
|
10
10
|
remote: https://rubygems.org/
|
11
11
|
specs:
|
12
|
-
|
13
|
-
|
14
|
-
|
12
|
+
actioncable (5.1.0)
|
13
|
+
actionpack (= 5.1.0)
|
14
|
+
nio4r (~> 2.0)
|
15
|
+
websocket-driver (~> 0.6.1)
|
16
|
+
actionmailer (5.1.0)
|
17
|
+
actionpack (= 5.1.0)
|
18
|
+
actionview (= 5.1.0)
|
19
|
+
activejob (= 5.1.0)
|
20
|
+
mail (~> 2.5, >= 2.5.4)
|
21
|
+
rails-dom-testing (~> 2.0)
|
22
|
+
actionpack (5.1.0)
|
23
|
+
actionview (= 5.1.0)
|
24
|
+
activesupport (= 5.1.0)
|
15
25
|
rack (~> 2.0)
|
16
26
|
rack-test (~> 0.6.3)
|
17
27
|
rails-dom-testing (~> 2.0)
|
18
28
|
rails-html-sanitizer (~> 1.0, >= 1.0.2)
|
19
|
-
actionview (5.0
|
20
|
-
activesupport (= 5.0
|
29
|
+
actionview (5.1.0)
|
30
|
+
activesupport (= 5.1.0)
|
21
31
|
builder (~> 3.1)
|
22
|
-
|
32
|
+
erubi (~> 1.4)
|
23
33
|
rails-dom-testing (~> 2.0)
|
24
34
|
rails-html-sanitizer (~> 1.0, >= 1.0.3)
|
25
|
-
|
35
|
+
activejob (5.1.0)
|
36
|
+
activesupport (= 5.1.0)
|
37
|
+
globalid (>= 0.3.6)
|
38
|
+
activemodel (5.1.0)
|
39
|
+
activesupport (= 5.1.0)
|
40
|
+
activerecord (5.1.0)
|
41
|
+
activemodel (= 5.1.0)
|
42
|
+
activesupport (= 5.1.0)
|
43
|
+
arel (~> 8.0)
|
44
|
+
activesupport (5.1.0)
|
26
45
|
concurrent-ruby (~> 1.0, >= 1.0.2)
|
27
46
|
i18n (~> 0.7)
|
28
47
|
minitest (~> 5.1)
|
29
48
|
tzinfo (~> 1.1)
|
49
|
+
arel (8.0.0)
|
50
|
+
ast (2.3.0)
|
30
51
|
builder (3.2.3)
|
31
52
|
concurrent-ruby (1.0.5)
|
32
|
-
|
53
|
+
erubi (1.6.0)
|
54
|
+
globalid (0.4.0)
|
55
|
+
activesupport (>= 4.2.0)
|
33
56
|
i18n (0.8.1)
|
34
57
|
loofah (2.0.3)
|
35
58
|
nokogiri (>= 1.5.9)
|
59
|
+
mail (2.6.5)
|
60
|
+
mime-types (>= 1.16, < 4)
|
36
61
|
method_source (0.8.2)
|
62
|
+
mime-types (3.1)
|
63
|
+
mime-types-data (~> 3.2015)
|
64
|
+
mime-types-data (3.2016.0521)
|
37
65
|
mini_portile2 (2.1.0)
|
38
66
|
minitest (5.10.1)
|
39
67
|
multi_json (1.12.1)
|
40
|
-
|
68
|
+
nio4r (2.0.0)
|
69
|
+
nokogiri (1.7.2)
|
41
70
|
mini_portile2 (~> 2.1.0)
|
42
|
-
|
71
|
+
parser (2.4.0.0)
|
72
|
+
ast (~> 2.2)
|
73
|
+
powerpack (0.1.1)
|
74
|
+
rack (2.0.2)
|
43
75
|
rack-test (0.6.3)
|
44
76
|
rack (>= 1.0)
|
45
|
-
rails
|
46
|
-
|
47
|
-
|
77
|
+
rails (5.1.0)
|
78
|
+
actioncable (= 5.1.0)
|
79
|
+
actionmailer (= 5.1.0)
|
80
|
+
actionpack (= 5.1.0)
|
81
|
+
actionview (= 5.1.0)
|
82
|
+
activejob (= 5.1.0)
|
83
|
+
activemodel (= 5.1.0)
|
84
|
+
activerecord (= 5.1.0)
|
85
|
+
activesupport (= 5.1.0)
|
86
|
+
bundler (>= 1.3.0, < 2.0)
|
87
|
+
railties (= 5.1.0)
|
88
|
+
sprockets-rails (>= 2.0.0)
|
89
|
+
rails-dom-testing (2.0.3)
|
90
|
+
activesupport (>= 4.2.0)
|
91
|
+
nokogiri (>= 1.6)
|
48
92
|
rails-html-sanitizer (1.0.3)
|
49
93
|
loofah (~> 2.0)
|
50
|
-
railties (5.0
|
51
|
-
actionpack (= 5.0
|
52
|
-
activesupport (= 5.0
|
94
|
+
railties (5.1.0)
|
95
|
+
actionpack (= 5.1.0)
|
96
|
+
activesupport (= 5.1.0)
|
53
97
|
method_source
|
54
98
|
rake (>= 0.8.7)
|
55
99
|
thor (>= 0.18.1, < 2.0)
|
100
|
+
rainbow (2.2.2)
|
101
|
+
rake
|
56
102
|
rake (12.0.0)
|
103
|
+
rubocop (0.48.1)
|
104
|
+
parser (>= 2.3.3.1, < 3.0)
|
105
|
+
powerpack (~> 0.1)
|
106
|
+
rainbow (>= 1.99.1, < 3.0)
|
107
|
+
ruby-progressbar (~> 1.7)
|
108
|
+
unicode-display_width (~> 1.0, >= 1.0.1)
|
109
|
+
ruby-progressbar (1.8.1)
|
110
|
+
sprockets (3.7.1)
|
111
|
+
concurrent-ruby (~> 1.0)
|
112
|
+
rack (> 1, < 3)
|
113
|
+
sprockets-rails (3.2.0)
|
114
|
+
actionpack (>= 4.0)
|
115
|
+
activesupport (>= 4.0)
|
116
|
+
sprockets (>= 3.0.0)
|
57
117
|
thor (0.19.4)
|
58
118
|
thread_safe (0.3.6)
|
59
119
|
tzinfo (1.2.3)
|
60
120
|
thread_safe (~> 0.1)
|
121
|
+
unicode-display_width (1.2.1)
|
122
|
+
websocket-driver (0.6.5)
|
123
|
+
websocket-extensions (>= 0.1.0)
|
124
|
+
websocket-extensions (0.1.2)
|
61
125
|
|
62
126
|
PLATFORMS
|
63
127
|
ruby
|
64
128
|
|
65
129
|
DEPENDENCIES
|
66
130
|
bundler (~> 1.12)
|
131
|
+
minitest (~> 5.10, != 5.10.2)
|
132
|
+
rails
|
133
|
+
rake (>= 11.1)
|
134
|
+
rubocop (>= 0.47)
|
67
135
|
webpacker_lite!
|
68
136
|
|
69
137
|
BUNDLED WITH
|
70
|
-
1.
|
138
|
+
1.15.0
|
data/MIT-LICENSE
CHANGED
data/README.md
CHANGED
@@ -1,38 +1,157 @@
|
|
1
1
|
# Webpacker Lite
|
2
|
-
|
2
|
+
![Gem Version](https://badge.fury.io/rb/webpacker_lite.svg)
|
3
3
|
|
4
|
-
|
5
|
-
[React on Rails](https://github.com/shakacode/react_on_rails) will soon support using Webpacker Lite,
|
6
|
-
including other optimizations for [React on Rails](https://github.com/shakacode/react_on_rails)
|
4
|
+
*A slimmer version of Webpacker*
|
7
5
|
|
8
|
-
|
9
|
-
|
6
|
+
Webpacker Lite provides similar webpack enabled view helpers from [Webpacker](https://github.com/rails/webpacker).
|
7
|
+
[React on Rails](https://github.com/shakacode/react_on_rails) version 8 and greater defaults to using Webpacker Lite.
|
10
8
|
|
11
|
-
|
9
|
+
For example, these view helpers allow your application's layout to easily reference JavaScript and CSS files created by your Webpack setup, taking into account differences in the Rails environments. With these helpers, there is no reason for Webpack created assets to run through the [Asset Pipeline](http://guides.rubyonrails.org/asset_pipeline.html), as was done in React on Rails 7.x and earlier.
|
12
10
|
|
13
|
-
|
14
|
-
* Rails 4.2+
|
11
|
+
If you like this project, show your support by giving us a star!
|
15
12
|
|
16
|
-
|
13
|
+
# Why Fork?
|
14
|
+
|
15
|
+
> Everything should be made as simple as possible, but not simpler.
|
16
|
+
|
17
|
+
[Albert Einstein on Wikiquote](https://en.wikiquote.org/wiki/Albert_Einstein)
|
18
|
+
|
19
|
+
Why did [ShakaCode](http://www.shakacode.com) fork [rails/webpacker](https://github.com/rails/webpacker)? For [react_on_rails](https://github.com/shakacode/react_on_rails), we wanted a simpler configuration to get the core functionality needed. You configure 2 things:
|
17
20
|
|
18
|
-
|
19
|
-
|
21
|
+
1. Name of the manifest file.
|
22
|
+
2. The directory within `/public` where Webpack will create the manifest and output file.
|
23
|
+
|
24
|
+
Then you need to configure your Webpack to generate a simple manifest that maps the base output names to the possibly fingerprinted versions. Note, unlike Webpacker, Webpacker Lite wants your manifest to **NOT** contain any host information.
|
25
|
+
|
26
|
+
Optionally, you can configure the name of the server and port for hot reloading, and if hot reloading is the default for a given Rails.env.
|
27
|
+
|
28
|
+
For more details on how this project differs from Webpacker and why we forked, please see [Webpacker Lite: Why Did We Fork Webpacker?](https://medium.com/@railsonmaui/webpacker-lite-why-did-we-fork-webpacker-ee3305688d66)
|
29
|
+
|
30
|
+
# NEWS
|
31
|
+
|
32
|
+
* 2017-05-03: React on Rails 8.0.0 beta defaults to using webpacker_lite.
|
33
|
+
|
34
|
+
## Installation
|
20
35
|
|
21
|
-
The best way to see the installation of webpacker_lite is to use the generator for React on Rails
|
36
|
+
The best way to see the installation of webpacker_lite is to use the generator for React on Rails 8.0.0 or greater. Otherwise, add the gem and create the configuration file described below.
|
22
37
|
|
23
38
|
## Overview
|
24
39
|
|
25
|
-
1. Configure the
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
3. Use the asset helpers on your layouts to provide the webpack generated files:
|
40
|
+
1. Configure the `config/webpacker_lite.yml` file, as described below. You will specify the name of the manifest file and the output directory used by step 2.
|
41
|
+
2. Use the [webpack-manifest-plugin](https://www.npmjs.com/package/webpack-manifest-plugin) to generate a manifest
|
42
|
+
in the output directory (`webpack_public_output_dir`) that you configured in your `/config/webpacker_lite.yml` file.
|
43
|
+
3. Use the view helpers on your layouts to provide the webpack generated files. Note, these are the same names used by [rails/webpacker](https://github.com/rails/webpacker).
|
44
|
+
These `output` names are **NOT** the actual file names, as the file name may have a [fingerprint](http://guides.rubyonrails.org/asset_pipeline.html#what-is-fingerprinting-and-why-should-i-care-questionmark).
|
31
45
|
```erb
|
32
46
|
<%# app/views/layouts/application.html.erb %>
|
33
|
-
<%= javascript_pack_tag
|
34
|
-
<%= stylesheet_pack_tag
|
47
|
+
<%= javascript_pack_tag('main') %>
|
48
|
+
<%= stylesheet_pack_tag('main') %>
|
35
49
|
```
|
50
|
+
4. When hot-reloading, the extract-text-plugin (extracted CSS from being inlined in the JavaScript)is not supported. Therefore, all your hot-reloaded Webpack-compiled CSS will be inlined and we will skip the CSS file by default. If you're not worried about hot-reloading for your CSS, use the `enabled_when_hot_loading: true` option.
|
51
|
+
|
52
|
+
```erb
|
53
|
+
<%= stylesheet_pack_tag('main', enabled_when_hot_loading: true) %> <% # Default is false %>
|
54
|
+
```
|
55
|
+
|
56
|
+
For more details on the helper documentation, see the Ruby comments in [lib/webpacker_lite/helper.rb](lib/webpacker_lite/helper.rb) and please submit PRs here to help us improve the docs!
|
57
|
+
|
58
|
+
## Configuration
|
59
|
+
Webpacker Lite takes one configuration file: `config/webpacker_lite.yml` used to configure two required values and a couple optional values. Note, this file is configured like `config/database.yml` in that you place the values beneath the name of the Rails.env.
|
60
|
+
|
61
|
+
### Mandatory Configuration within `config/webpacker_lite.yml`
|
62
|
+
|
63
|
+
1. `manifest`: The manifest file name
|
64
|
+
1. `webpack_public_output_dir`: The output directory of both the manifest and the webpack static generated files within the `/public` directory.
|
65
|
+
|
66
|
+
Note, placing output files within the Rails `/public` directory is not configurable.
|
67
|
+
|
68
|
+
### Optional Configuration within `config/webpacker_lite.yml`
|
69
|
+
1. `hot_reloading_host`: The name of the hot reloading `webpack-dev-server` including the port
|
70
|
+
2. `hot_reloading_enabled_by_default`: If hot reloading should default to true
|
71
|
+
|
72
|
+
### Hot Reloading Notes
|
73
|
+
|
74
|
+
Do not put the output server in your `manifest.json` file. The rails view helpers will automatically prepend the hot_reloading_host to the asset path.
|
75
|
+
|
76
|
+
### Example Configuration `/config/webpacker_lite.yml`
|
77
|
+
|
78
|
+
This example config shows how we use different output directories for the webpack generated assets per the type of environment. This is extremely convenient when you want to log redux messages in development but not in your tests.
|
79
|
+
|
80
|
+
```yaml
|
81
|
+
# /config/webpacker_lite.yml
|
82
|
+
# Note: Base output directory of /public is assumed for static files
|
83
|
+
default: &default
|
84
|
+
manifest: manifest.json
|
85
|
+
# Used in your webpack configuration. Must be created in the
|
86
|
+
# webpack_public_output_dir folder
|
87
|
+
|
88
|
+
development:
|
89
|
+
<<: *default
|
90
|
+
# generated files for development, in /public/webpack/development
|
91
|
+
webpack_public_output_dir: webpack/development
|
92
|
+
|
93
|
+
# Default is localhost:3500. You can specify the protocol if needed. Defaults to http://.
|
94
|
+
hot_reloading_host: localhost:3500
|
95
|
+
|
96
|
+
# Developer note: considering removing this option so it can ONLY be turned by using an ENV value.
|
97
|
+
# Default is false, ENV 'HOT_RELOADING' will always override
|
98
|
+
hot_reloading_enabled_by_default: false
|
99
|
+
|
100
|
+
test:
|
101
|
+
<<: *default
|
102
|
+
# generated files for tests, in /public/webpack/test
|
103
|
+
webpack_public_output_dir: webpack/test
|
104
|
+
|
105
|
+
production:
|
106
|
+
<<: *default
|
107
|
+
# generated files for tests, in /public/webpack/production
|
108
|
+
webpack_public_output_dir: webpack/production
|
109
|
+
```
|
110
|
+
|
111
|
+
## Example for Development vs Hot Reloading vs Production Mode
|
112
|
+
|
113
|
+
**erb file**
|
114
|
+
|
115
|
+
```erb
|
116
|
+
<% # app/views/layouts/application.html.erb %>
|
117
|
+
<%= javascript_pack_tag('main') %>
|
118
|
+
<%= stylesheet_pack_tag('main') %>
|
119
|
+
```
|
120
|
+
|
121
|
+
**html file**
|
122
|
+
|
123
|
+
```html
|
124
|
+
<!-- In test mode -->
|
125
|
+
<script src="/webpack/test/main.js"></script>
|
126
|
+
<link rel="stylesheet" media="screen" href="/webpack/test/main-0bd141f6d9360cf4a7f5.js">
|
127
|
+
|
128
|
+
<!-- In development mode -->
|
129
|
+
<script src="/webpack/development/main.js"></script>
|
130
|
+
<link rel="stylesheet" media="screen" href="/webpack/development/main-0bd141f6d9360cf4a7f5.js">
|
131
|
+
|
132
|
+
<!-- In development mode with hot reloading, using the webpack-dev-server -->
|
133
|
+
<script src="http://localhost:8080/webpack/development/main.js"></script>
|
134
|
+
<!-- Note, there's no stylesheet tag by default, as your CSS should be inlined in your JS. -->
|
135
|
+
|
136
|
+
<!-- In production mode -->
|
137
|
+
<script src="/webpack/production/main-0bd141f6d9360cf4a7f5.js"></script>
|
138
|
+
<link rel="stylesheet" media="screen" href="/webpack/production/main-dc02976b5f94b507e3b6.css">
|
139
|
+
```
|
140
|
+
|
141
|
+
## Other Helpers: Getting the asset path
|
142
|
+
|
143
|
+
The `asset_pack_path` helper provides the path of any given asset that's been compiled by webpack.
|
144
|
+
|
145
|
+
For example, if you want to create a `<link rel="prefetch">` or `<img />`
|
146
|
+
for an asset used in your pack code you can reference them like this in your view,
|
147
|
+
|
148
|
+
```erb
|
149
|
+
<img src="<%= asset_pack_path 'calendar.png' %>" />
|
150
|
+
<% # => <img src="/webpack/calendar.png" /> %>
|
151
|
+
```
|
152
|
+
|
153
|
+
## Webpack Helper
|
154
|
+
You may use the [React on Rails NPM Package](https://www.npmjs.com/package/react-on-rails), [react-on-rails/webpackConfigLoader](https://github.com/shakacode/react_on_rails/blob/master/webpackConfigLoader.js) to provide your Webpack config with easy access to the YAML settings. Even if you don't use the NPM package, you can use that file to inspire your Webpack configuration.
|
36
155
|
|
37
156
|
## Rake Tasks
|
38
157
|
|
@@ -49,43 +168,22 @@ If you are using different directories for the output paths per RAILS_ENV, this
|
|
49
168
|
RAILS_ENV=test rake webpacker_lite:clobber
|
50
169
|
```
|
51
170
|
|
171
|
+
## Differences from Webpacker
|
52
172
|
|
173
|
+
1. Configuration setup of an optional single file `/config/webpacker_lite.yml`
|
174
|
+
2. Webpacker helpers expect the manifest to contain the server URL when hot reloading. Webpacker Lite expects the manifest to never contain any host information.
|
53
175
|
|
54
|
-
## Hot Reloading
|
55
|
-
Similary, you can also control and configure `webpack-dev-server` settings from
|
56
|
-
`config/webpack/development.server.yml` file
|
57
|
-
|
58
|
-
```yml
|
59
|
-
# config/webpack/development.server.yml
|
60
|
-
enabled: true
|
61
|
-
host: localhost
|
62
|
-
port: 8080
|
63
|
-
```
|
64
|
-
|
65
|
-
## Getting asset path
|
66
|
-
|
67
|
-
Webpacker provides `asset_pack_path` helper to get the path of any given asset that's been compiled by webpack.
|
176
|
+
## Hot Reloading
|
68
177
|
|
69
|
-
|
70
|
-
|
178
|
+
1. Tell Rails and Webpacker Lite that you're hot reloading by setting the ENV value of `HOT_RELOADING=YES` if you are not hot reloading by default by setting the `hot_reloading_enabled_by_default` key in your config file.
|
179
|
+
1. By default, the `stylesheet_pack_tag` helper will not create a tag when hot reloading is enabled. Per the note above, when hot-reloading, the extract-text-plugin (extracted CSS from being inlined in the JavaScript)is not supported. Therefore, all your hot-reloaded Webpack-compiled CSS will be inlined and we will skip the CSS file by default.
|
71
180
|
|
72
|
-
```erb
|
73
|
-
|
74
|
-
|
75
|
-
|
181
|
+
```erb
|
182
|
+
<%= stylesheet_pack_tag('main', enabled_when_hot_loading: true) %> <% # Default is false %>
|
183
|
+
```
|
184
|
+
|
76
185
|
|
77
|
-
## Example for Development vs Hot Reloading vs Production Mode
|
78
|
-
```html
|
79
|
-
<!-- In development mode with webpack-dev-server -->
|
80
|
-
<script src="http://localhost:8080/main.js"></script>
|
81
|
-
<link rel="stylesheet" media="screen" href="http://localhost:8080/main.css">
|
82
|
-
<!-- In development mode -->
|
83
|
-
<script src="/packs/main.js"></script>
|
84
|
-
<link rel="stylesheet" media="screen" href="/packs/main.css">
|
85
|
-
<!-- In production mode -->
|
86
|
-
<script src="/packs/main-0bd141f6d9360cf4a7f5.js"></script>
|
87
|
-
<link rel="stylesheet" media="screen" href="/packs/main-dc02976b5f94b507e3b6.css">
|
88
|
-
```
|
89
186
|
|
90
|
-
##
|
91
|
-
|
187
|
+
## Prerequisites
|
188
|
+
* Ruby 2+
|
189
|
+
* Rails 4.2+
|
data/Rakefile
CHANGED
data/lib/tasks/webpacker.rake
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
tasks = {
|
2
|
-
"webpacker_lite:clobber"
|
2
|
+
"webpacker_lite:clobber" => "Remove the webpack compiled output directory as defined in config/webpack/paths.yml",
|
3
3
|
"webpacker_lite:check_node" => "Verifies if Node.js is installed",
|
4
4
|
"webpacker_lite:check_yarn" => "Verifies if yarn is installed",
|
5
5
|
"webpacker_lite:verify_install" => "Verifies if webpacker is installed"
|
@@ -3,7 +3,7 @@ require "webpacker_lite/configuration"
|
|
3
3
|
namespace :webpacker_lite do
|
4
4
|
desc "Remove the webpack compiled output directory as defined in config/webpack/paths.yml"
|
5
5
|
task clobber: ["webpacker_lite:verify_install", :environment] do
|
6
|
-
output_path = WebpackerLite::Configuration.
|
6
|
+
output_path = WebpackerLite::Configuration.webpack_public_output_dir
|
7
7
|
FileUtils.rm_r(output_path) if File.exist?(output_path)
|
8
8
|
puts "Removed webpack output path directory #{output_path}"
|
9
9
|
end
|
@@ -3,9 +3,9 @@ require "webpacker_lite/configuration"
|
|
3
3
|
namespace :webpacker_lite do
|
4
4
|
desc "Verifies if webpacker_lite is installed"
|
5
5
|
task verify_install: [:check_node, :check_yarn] do
|
6
|
-
if File.exist?(WebpackerLite::
|
6
|
+
if File.exist?(WebpackerLite::Env.file_path)
|
7
7
|
puts "WebpackerLite is installed 🎉 🍰"
|
8
|
-
puts "Using #{WebpackerLite::
|
8
|
+
puts "Using #{WebpackerLite::Env.file_path} file for setting up webpack paths"
|
9
9
|
else
|
10
10
|
puts "Configuration config/webpack/paths.yml file not found. \n"\
|
11
11
|
"Make sure webpacker_lite:install is run successfully before " \
|
data/lib/webpacker_lite.rb
CHANGED
@@ -4,30 +4,46 @@ require "webpacker_lite/env"
|
|
4
4
|
|
5
5
|
class WebpackerLite::Configuration < WebpackerLite::FileLoader
|
6
6
|
class << self
|
7
|
-
def
|
8
|
-
Rails.root.join(
|
7
|
+
def manifest_path
|
8
|
+
Rails.root.join(webpack_public_output_dir,
|
9
|
+
configuration.fetch(:manifest, "manifest.json"))
|
9
10
|
end
|
10
11
|
|
11
|
-
def
|
12
|
-
Rails.root.join(
|
12
|
+
def webpack_public_output_dir
|
13
|
+
Rails.root.join(
|
14
|
+
File.join("public", configuration.fetch(:webpack_public_output_dir, "webpack")))
|
13
15
|
end
|
14
16
|
|
15
|
-
def
|
16
|
-
|
17
|
+
def base_path
|
18
|
+
"/#{configuration.fetch(:webpack_public_output_dir, "webpack")}"
|
17
19
|
end
|
18
20
|
|
19
|
-
|
20
|
-
|
21
|
+
# Uses the hot_reloading_host if appropriate
|
22
|
+
def base_url
|
23
|
+
if WebpackerLite::Env.hot_loading?
|
24
|
+
host = configuration[:hot_reloading_host]
|
25
|
+
if host.blank?
|
26
|
+
raise "WebpackerLite's /config/webpacker_lite.yml needs a configuration value for the "\
|
27
|
+
"`hot_reloading_host` for environment #{Rails.env}."
|
28
|
+
end
|
29
|
+
if host.starts_with?("http")
|
30
|
+
host
|
31
|
+
else
|
32
|
+
"http://#{host}"
|
33
|
+
end
|
34
|
+
else
|
35
|
+
base_path
|
36
|
+
end
|
21
37
|
end
|
22
38
|
|
23
|
-
def
|
39
|
+
def configuration
|
24
40
|
load if WebpackerLite::Env.development?
|
25
41
|
raise WebpackerLite::FileLoader::FileLoaderError.new("WebpackerLite::Configuration.load must be called first") unless instance
|
26
42
|
instance.data
|
27
43
|
end
|
28
44
|
|
29
|
-
def
|
30
|
-
Rails.root.join(
|
45
|
+
def file_path
|
46
|
+
Rails.root.join("config", "webpacker_lite.yml")
|
31
47
|
end
|
32
48
|
end
|
33
49
|
|
data/lib/webpacker_lite/env.rb
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
# Singleton registry for determining NODE_ENV from config/
|
1
|
+
# Singleton registry for determining NODE_ENV from config/webpacker_lite.yml
|
2
2
|
require "webpacker_lite/file_loader"
|
3
3
|
|
4
4
|
class WebpackerLite::Env < WebpackerLite::FileLoader
|
@@ -13,11 +13,14 @@ class WebpackerLite::Env < WebpackerLite::FileLoader
|
|
13
13
|
end
|
14
14
|
|
15
15
|
def hot_loading?
|
16
|
-
ENV["
|
16
|
+
(ENV["HOT_RELOADING"].present? && (
|
17
|
+
ENV["HOT_RELOADING"].upcase == "YES" ||
|
18
|
+
ENV["HOT_RELOADING"].upcase == "TRUE")) ||
|
19
|
+
current["hot_reloading_enabled_by_default"]
|
17
20
|
end
|
18
21
|
|
19
22
|
def file_path
|
20
|
-
Rails.root.join("config", "
|
23
|
+
Rails.root.join("config", "webpacker_lite.yml")
|
21
24
|
end
|
22
25
|
end
|
23
26
|
|
@@ -1,4 +1,4 @@
|
|
1
|
-
# Provides a base singleton-configuration pattern for loading a file, given a path
|
1
|
+
# Provides a base singleton-configuration pattern for loading a JSON or YAML file, given a path
|
2
2
|
class WebpackerLite::FileLoader
|
3
3
|
class NotFoundError < StandardError; end
|
4
4
|
class FileLoaderError < StandardError; end
|
@@ -10,6 +10,10 @@ class WebpackerLite::FileLoader
|
|
10
10
|
def load(path = file_path)
|
11
11
|
self.instance = new(path)
|
12
12
|
end
|
13
|
+
|
14
|
+
def file_path
|
15
|
+
raise "Subclass of WebpackerLite::FileLoader should override this method"
|
16
|
+
end
|
13
17
|
end
|
14
18
|
|
15
19
|
private
|
@@ -8,27 +8,28 @@ module WebpackerLite::Helper
|
|
8
8
|
# Examples:
|
9
9
|
#
|
10
10
|
# In development mode:
|
11
|
-
# <%= asset_pack_path 'calendar.js' %> # => "/
|
11
|
+
# <%= asset_pack_path 'calendar.js' %> # => "/public/webpack/development/calendar-1016838bab065ae1e122.js"
|
12
12
|
# In production mode:
|
13
|
-
# <%= asset_pack_path 'calendar.css' %> # => "/
|
13
|
+
# <%= asset_pack_path 'calendar.css' %> # => "/public/webpack/production/calendar-1016838bab065ae1e122.css"
|
14
14
|
def asset_pack_path(name, **options)
|
15
|
-
|
15
|
+
path = WebpackerLite::Configuration.base_path
|
16
|
+
file = WebpackerLite::Manifest.lookup(name)
|
17
|
+
asset_path("#{path}/#{file}", **options)
|
16
18
|
end
|
17
|
-
|
18
|
-
#
|
19
|
-
# app/javascript/packs/*.js. In production mode, the digested reference is automatically looked up.
|
19
|
+
|
20
|
+
# Creates a script tag that references the named pack file, as compiled by Webpack.
|
20
21
|
#
|
21
22
|
# Examples:
|
22
23
|
#
|
23
|
-
#
|
24
|
+
# In development mode:
|
24
25
|
# <%= javascript_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
|
25
|
-
# <script src="/
|
26
|
+
# <script src="/public/webpack/development/calendar-1016838bab065ae1e314.js" data-turbolinks-track="reload"></script>
|
26
27
|
#
|
27
28
|
# # In production mode:
|
28
29
|
# <%= javascript_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
|
29
|
-
# <script src="/
|
30
|
+
# <script src="/public/webpack/production/calendar-1016838bab065ae1e314.js" data-turbolinks-track="reload"></script>
|
30
31
|
def javascript_pack_tag(name, **options)
|
31
|
-
javascript_include_tag(
|
32
|
+
javascript_include_tag(asset_source(name, :javascript), **options)
|
32
33
|
end
|
33
34
|
|
34
35
|
# Creates a link tag that references the named pack file(s), as compiled by Webpack per the entries list
|
@@ -42,48 +43,25 @@ module WebpackerLite::Helper
|
|
42
43
|
#
|
43
44
|
# # In development mode:
|
44
45
|
# <%= stylesheet_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
|
45
|
-
# <link rel="stylesheet" media="screen" href="/public/webpack/development/calendar.css" data-turbolinks-track="reload" />
|
46
|
-
#
|
47
|
-
# The key options are `static` and `hot` which specify what you want for static vs. hot. Both of
|
48
|
-
# these params are optional, and support either a single value, or an array.
|
46
|
+
# <link rel="stylesheet" media="screen" href="/public/webpack/development/calendar-1016838bab065ae1e122.css" data-turbolinks-track="reload" />
|
49
47
|
#
|
50
|
-
#
|
51
|
-
#
|
52
|
-
#
|
53
|
-
# hot: 'application_non_webpack',
|
54
|
-
# media: 'all',
|
55
|
-
# 'data-turbolinks-track' => "reload") %>
|
48
|
+
# # In development mode with hot-reloading
|
49
|
+
# <%= stylesheet_pack_tag('main') %> <% # Default is false for enabled_when_hot_loading%>
|
50
|
+
# # No output
|
56
51
|
#
|
57
|
-
#
|
58
|
-
#
|
59
|
-
#
|
52
|
+
# # In development mode with hot-reloading and enabled_when_hot_loading
|
53
|
+
# # <%= stylesheet_pack_tag('main', enabled_when_hot_loading: true) %>
|
54
|
+
# <link rel="stylesheet" media="screen" href="/public/webpack/development/calendar-1016838bab065ae1e122.css" />
|
60
55
|
#
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
# 'data-turbolinks-track': 'reload') %>
|
65
|
-
#
|
66
|
-
|
67
|
-
def stylesheet_pack_tag(*args, **kwargs)
|
68
|
-
manifested_names = []
|
69
|
-
default_case = args.any?
|
70
|
-
if default_case
|
71
|
-
args.flatten!
|
72
|
-
manifested_names += get_manifests(args)
|
73
|
-
end
|
74
|
-
asset_type = WebpackerLite::Env.hot_loading? ? :hot : :static
|
75
|
-
names = Array(kwargs[asset_type])
|
76
|
-
manifested_names += get_manifests(names)
|
77
|
-
|
78
|
-
options = kwargs.delete_if { |key, _value| %i(hot static).include?(key) }
|
79
|
-
stylesheet_link_tag(*manifested_names, options)
|
56
|
+
def stylesheet_pack_tag(name, **options)
|
57
|
+
return "" if WebpackerLite::Env.hot_loading? && !options[:enabled_when_hot_loading].presence
|
58
|
+
stylesheet_link_tag(asset_source(name, :stylesheet), **options)
|
80
59
|
end
|
81
60
|
|
82
61
|
private
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
62
|
+
def asset_source(name, type)
|
63
|
+
url = WebpackerLite::Configuration.base_url
|
64
|
+
path = WebpackerLite::Manifest.lookup("#{name}#{compute_asset_extname(name, type: type)}")
|
65
|
+
"#{url}/#{path}"
|
87
66
|
end
|
88
|
-
end
|
89
67
|
end
|
@@ -1,9 +1,9 @@
|
|
1
|
-
# Singleton registry for accessing the
|
1
|
+
# Singleton registry for accessing the output path using generated manifest.
|
2
2
|
# This allows javascript_pack_tag, stylesheet_pack_tag, asset_pack_path to take a reference to,
|
3
|
-
# say, "calendar.js" or "calendar.css" and turn it into "/
|
4
|
-
# "/
|
5
|
-
# files, # "/
|
6
|
-
# "/
|
3
|
+
# say, "calendar.js" or "calendar.css" and turn it into "/public/webpack/calendar.js" or
|
4
|
+
# "/public/webpack/calendar.css" in development. In production mode, it returns compiles
|
5
|
+
# files, # "/public/webpack/calendar-1016838bab065ae1e314.js" and
|
6
|
+
# "/webpack/calendar-1016838bab065ae1e314.css" for long-term caching
|
7
7
|
|
8
8
|
require "webpacker_lite/file_loader"
|
9
9
|
require "webpacker_lite/env"
|
@@ -18,7 +18,18 @@ class WebpackerLite::Manifest < WebpackerLite::FileLoader
|
|
18
18
|
def lookup(name)
|
19
19
|
load if WebpackerLite::Env.development? || instance.data.empty?
|
20
20
|
raise WebpackerLite::FileLoader::FileLoaderError.new("WebpackerLite::Manifest.load must be called first") unless instance
|
21
|
-
instance.data[name.to_s] ||
|
21
|
+
instance.data[name.to_s] || missing_file_error(name)
|
22
|
+
end
|
23
|
+
|
24
|
+
def missing_file_error(name)
|
25
|
+
msg = <<-MSG
|
26
|
+
WebpackerLite can't find #{name} in your manifest #{file_path}. Possible causes:
|
27
|
+
1. You are hot reloading
|
28
|
+
2. Webpack is not running
|
29
|
+
3. You have misconfigured WebpackerLite's config/webpacker_lite.yml file.
|
30
|
+
4. Your Webpack configuration is not creating a manifest.
|
31
|
+
MSG
|
32
|
+
raise(WebpackerLite::FileLoader::NotFoundError.new(msg))
|
22
33
|
end
|
23
34
|
end
|
24
35
|
|
@@ -0,0 +1,13 @@
|
|
1
|
+
require "webpacker_test"
|
2
|
+
|
3
|
+
class ConfigurationTest < Minitest::Test
|
4
|
+
def test_manifest_path
|
5
|
+
manifest_path = File.join(File.dirname(__FILE__), "test_app/public/webpack", "manifest.json").to_s
|
6
|
+
assert_equal WebpackerLite::Configuration.manifest_path.to_s, manifest_path
|
7
|
+
end
|
8
|
+
|
9
|
+
def test_output_path
|
10
|
+
output_path = File.join(File.dirname(__FILE__), "test_app/public/webpack").to_s
|
11
|
+
assert_equal WebpackerLite::Configuration.webpack_public_output_dir.to_s, output_path
|
12
|
+
end
|
13
|
+
end
|
data/test/env_test.rb
ADDED
@@ -0,0 +1,12 @@
|
|
1
|
+
require "webpacker_test"
|
2
|
+
|
3
|
+
class EnvTest < Minitest::Test
|
4
|
+
def test_current_env
|
5
|
+
assert_equal WebpackerLite::Env.current, "production"
|
6
|
+
end
|
7
|
+
|
8
|
+
def test_file_path
|
9
|
+
correct_path = File.join(File.dirname(__FILE__), "test_app/config", "webpacker_lite.yml").to_s
|
10
|
+
assert_equal WebpackerLite::Env.file_path.to_s, correct_path
|
11
|
+
end
|
12
|
+
end
|
data/test/helper_test.rb
ADDED
@@ -0,0 +1,23 @@
|
|
1
|
+
require "webpacker_test"
|
2
|
+
|
3
|
+
class HelperTest < ActionView::TestCase
|
4
|
+
def setup
|
5
|
+
@view = ActionView::Base.new
|
6
|
+
@view.extend WebpackerLite::Helper
|
7
|
+
end
|
8
|
+
|
9
|
+
def test_asset_pack_path
|
10
|
+
assert_equal @view.asset_pack_path("bootstrap.js"), "/webpack/bootstrap-300631c4f0e0f9c865bc.js"
|
11
|
+
assert_equal @view.asset_pack_path("bootstrap.css"), "/webpack/bootstrap-c38deda30895059837cf.css"
|
12
|
+
end
|
13
|
+
|
14
|
+
def test_javascript_pack_tag
|
15
|
+
script = %(<script src="/webpack/bootstrap-300631c4f0e0f9c865bc.js"></script>)
|
16
|
+
assert_equal @view.javascript_pack_tag("bootstrap.js"), script
|
17
|
+
end
|
18
|
+
|
19
|
+
def test_stylesheet_pack_tag
|
20
|
+
expected_style = %(<link rel="stylesheet" media="screen" href="/webpack/bootstrap-c38deda30895059837cf.css" />)
|
21
|
+
assert_equal @view.stylesheet_pack_tag("bootstrap.css"), expected_style
|
22
|
+
end
|
23
|
+
end
|
@@ -0,0 +1,31 @@
|
|
1
|
+
require "webpacker_test"
|
2
|
+
|
3
|
+
class ManifestTest < Minitest::Test
|
4
|
+
def test_file_path
|
5
|
+
file_path = File.join(File.dirname(__FILE__), "test_app/public/webpack", "manifest.json").to_s
|
6
|
+
assert_equal WebpackerLite::Manifest.file_path.to_s, file_path
|
7
|
+
end
|
8
|
+
|
9
|
+
def test_lookup_exception
|
10
|
+
manifest_path = File.join(File.dirname(__FILE__), "test_app/public/webpack", "manifest.json").to_s
|
11
|
+
asset_file = "calendar.js"
|
12
|
+
msg = <<-MSG
|
13
|
+
WebpackerLite can't find #{asset_file} in your manifest #{manifest_path}. Possible causes:
|
14
|
+
1. You are hot reloading
|
15
|
+
2. Webpack is not running
|
16
|
+
3. You have misconfigured WebpackerLite's config/webpacker_lite.yml file.
|
17
|
+
4. Your Webpack configuration is not creating a manifest.
|
18
|
+
MSG
|
19
|
+
|
20
|
+
error = assert_raises WebpackerLite::FileLoader::NotFoundError do
|
21
|
+
WebpackerLite::Manifest.lookup(asset_file)
|
22
|
+
end
|
23
|
+
|
24
|
+
assert_equal error.message, msg
|
25
|
+
end
|
26
|
+
|
27
|
+
def test_lookup_success
|
28
|
+
asset_file = "bootstrap.js"
|
29
|
+
assert_equal WebpackerLite::Manifest.lookup(asset_file), "bootstrap-300631c4f0e0f9c865bc.js"
|
30
|
+
end
|
31
|
+
end
|
@@ -0,0 +1,14 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
require "minitest/autorun"
|
4
|
+
require "rails"
|
5
|
+
require "rails/test_help"
|
6
|
+
require "webpacker_lite"
|
7
|
+
|
8
|
+
module TestApp
|
9
|
+
class Application < ::Rails::Application
|
10
|
+
config.root = File.join(File.dirname(__FILE__), "test_app")
|
11
|
+
end
|
12
|
+
end
|
13
|
+
|
14
|
+
TestApp::Application.initialize!
|
data/yarn.lock
ADDED
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: webpacker_lite
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version:
|
4
|
+
version: 2.0.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- David Heinemeier Hansson, Justin Gordon
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2017-05-
|
11
|
+
date: 2017-05-23 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: activesupport
|
@@ -94,7 +94,15 @@ files:
|
|
94
94
|
- lib/webpacker_lite/manifest.rb
|
95
95
|
- lib/webpacker_lite/railtie.rb
|
96
96
|
- lib/webpacker_lite/version.rb
|
97
|
+
- test/configuration_test.rb
|
98
|
+
- test/env_test.rb
|
99
|
+
- test/helper_test.rb
|
100
|
+
- test/manifest_test.rb
|
101
|
+
- test/test_app/config/secrets.yml
|
102
|
+
- test/test_app/public/webpack/manifest.json
|
103
|
+
- test/webpacker_test.rb
|
97
104
|
- webpacker.gemspec
|
105
|
+
- yarn.lock
|
98
106
|
homepage: https://github.com/shakacode/webpacker_lite
|
99
107
|
licenses:
|
100
108
|
- MIT
|
@@ -119,4 +127,11 @@ rubygems_version: 2.6.8
|
|
119
127
|
signing_key:
|
120
128
|
specification_version: 4
|
121
129
|
summary: Asset Helpers for Webpack
|
122
|
-
test_files:
|
130
|
+
test_files:
|
131
|
+
- test/configuration_test.rb
|
132
|
+
- test/env_test.rb
|
133
|
+
- test/helper_test.rb
|
134
|
+
- test/manifest_test.rb
|
135
|
+
- test/test_app/config/secrets.yml
|
136
|
+
- test/test_app/public/webpack/manifest.json
|
137
|
+
- test/webpacker_test.rb
|