shakapacker 6.0.1 → 6.1.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.github/ISSUE_TEMPLATE/bug_report.md +1 -1
- data/.github/ISSUE_TEMPLATE/feature-request.md +1 -1
- data/.github/workflows/jest.yml +1 -4
- data/.github/workflows/js-lint.yml +3 -7
- data/.github/workflows/rubocop.yml +3 -20
- data/.github/workflows/ruby.yml +12 -19
- data/.node-version +1 -1
- data/.rubocop.yml +0 -1
- data/CHANGELOG.md +31 -9
- data/Gemfile.lock +1 -1
- data/README.md +29 -7
- data/docs/customizing_babel_config.md +4 -4
- data/docs/using_esbuild_loader.md +128 -0
- data/docs/using_swc_loader.md +153 -0
- data/docs/v6_upgrade.md +32 -12
- data/gemfiles/Gemfile-rails.7.0.x +12 -0
- data/lib/install/config/webpacker.yml +3 -0
- data/lib/webpacker/compiler.rb +2 -2
- data/lib/webpacker/version.rb +1 -1
- data/package/esbuild/index.js +40 -0
- data/package/rules/babel.js +23 -21
- data/package/rules/esbuild.js +23 -0
- data/package/rules/file.js +12 -1
- data/package/rules/index.js +2 -0
- data/package/rules/swc.js +23 -0
- data/package/swc/index.js +50 -0
- data/package/utils/helpers.js +19 -2
- data/package.json +3 -1
- data/test/mounted_app/test/dummy/config/webpacker.yml +1 -0
- data/test/test_app/config/webpacker.yml +1 -0
- data/webpacker.gemspec +1 -1
- data/yarn.lock +161 -1
- metadata +11 -4
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 5e8eb4a9da593290c85f4a4225565a8ebdde75e1a994be209a319da4e85951de
|
|
4
|
+
data.tar.gz: a662b202fa970d2f87713e7f1cb4fbf39b584d6638eb0d05c57a923a024e41d8
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 64c7b38f28f82090984e322e276a15c093acf086262f5dd043e712613aedaf6196bbefa0413679e4629ec8ef547861cb5a9e032b30685c2dae6a6756cb2aa0f8
|
|
7
|
+
data.tar.gz: e0849b58c3025876469b6db0166df9c0496c7cac0c6b3c8a64c91959c61153b2e2e6acc596bf41a9cf6a02fd60c0e4be64e51513059e0b0893195ead4778cf3c
|
|
@@ -7,7 +7,7 @@ assignees: ''
|
|
|
7
7
|
|
|
8
8
|
---
|
|
9
9
|
|
|
10
|
-
A bug is a crash or incorrect behavior. If you have a debugging or troubleshooting question, please open a discussion on
|
|
10
|
+
A bug is a crash or incorrect behavior. If you have a debugging or troubleshooting question, please open a discussion on [Discussions Tab](https://github.com/shakacode/shakapacker/discussions).
|
|
11
11
|
|
|
12
12
|
Ruby version:
|
|
13
13
|
Rails version:
|
|
@@ -7,7 +7,7 @@ assignees: ''
|
|
|
7
7
|
|
|
8
8
|
---
|
|
9
9
|
|
|
10
|
-
A feature request
|
|
10
|
+
A feature request describes a suggested improvement. If you have a debugging or troubleshooting question, please open a discussion on the [Discussions tab](https://github.com/shakacode/shakapacker/discussions).
|
|
11
11
|
|
|
12
12
|
Ruby version:
|
|
13
13
|
Rails version:
|
data/.github/workflows/jest.yml
CHANGED
|
@@ -20,11 +20,8 @@ jobs:
|
|
|
20
20
|
node-version: ${{ matrix.node }}
|
|
21
21
|
cache: yarn
|
|
22
22
|
|
|
23
|
-
- name: Install yarn maybe
|
|
24
|
-
run: which yarn || npm install -g yarn
|
|
25
|
-
|
|
26
23
|
- name: Install dependencies
|
|
27
|
-
run: yarn --frozen-lockfile
|
|
24
|
+
run: yarn --frozen-lockfile --non-interactive --prefer-offline
|
|
28
25
|
|
|
29
26
|
- name: Jest Specs
|
|
30
27
|
run: yarn test
|
|
@@ -3,13 +3,12 @@ name: JS lint
|
|
|
3
3
|
on: [push, pull_request]
|
|
4
4
|
|
|
5
5
|
jobs:
|
|
6
|
-
|
|
6
|
+
lint:
|
|
7
7
|
name: JS Lint
|
|
8
|
-
|
|
9
8
|
strategy:
|
|
10
9
|
matrix:
|
|
11
10
|
os: [ubuntu-latest]
|
|
12
|
-
node: [14]
|
|
11
|
+
node: [12.x, 14.x, 16.x]
|
|
13
12
|
|
|
14
13
|
runs-on: ${{ matrix.os }}
|
|
15
14
|
|
|
@@ -21,11 +20,8 @@ jobs:
|
|
|
21
20
|
node-version: ${{ matrix.node }}
|
|
22
21
|
cache: yarn
|
|
23
22
|
|
|
24
|
-
- name: Install yarn maybe
|
|
25
|
-
run: which yarn || npm install -g yarn
|
|
26
|
-
|
|
27
23
|
- name: Install dependencies
|
|
28
|
-
run: yarn --frozen-lockfile
|
|
24
|
+
run: yarn --frozen-lockfile --non-interactive --prefer-offline
|
|
29
25
|
|
|
30
26
|
- name: Lint
|
|
31
27
|
run: yarn lint
|
|
@@ -6,34 +6,17 @@ jobs:
|
|
|
6
6
|
rubocop:
|
|
7
7
|
name: Rubocop
|
|
8
8
|
runs-on: ${{ matrix.os }}
|
|
9
|
-
env:
|
|
10
|
-
BUNDLE_JOBS: 4
|
|
11
|
-
BUNDLE_RETRY: 3
|
|
12
9
|
strategy:
|
|
13
10
|
matrix:
|
|
14
11
|
os: [ubuntu-latest]
|
|
15
|
-
ruby: [
|
|
16
|
-
2.7
|
|
17
|
-
]
|
|
12
|
+
ruby: ['2.7', '3.0']
|
|
18
13
|
|
|
19
14
|
steps:
|
|
20
15
|
- uses: actions/checkout@v2
|
|
21
|
-
- uses: actions/cache@v2
|
|
22
|
-
with:
|
|
23
|
-
path: /home/runner/bundle
|
|
24
|
-
key: bundle-use-ruby-gems-${{ hashFiles('**/Gemfile.lock') }}
|
|
25
|
-
restore-keys: |
|
|
26
|
-
bundle-use-ruby-gems-
|
|
27
|
-
|
|
28
16
|
- uses: ruby/setup-ruby@v1
|
|
29
17
|
with:
|
|
30
18
|
ruby-version: ${{ matrix.ruby }}
|
|
19
|
+
bundler-cache: true
|
|
31
20
|
|
|
32
|
-
- name:
|
|
33
|
-
run: |
|
|
34
|
-
gem install bundler -v 2.1.4
|
|
35
|
-
bundle config path /home/runner/bundle
|
|
36
|
-
bundle install
|
|
37
|
-
|
|
38
|
-
- name: Ruby linter
|
|
21
|
+
- name: Ruby rubocop
|
|
39
22
|
run: bundle exec rubocop
|
data/.github/workflows/ruby.yml
CHANGED
|
@@ -6,43 +6,36 @@ jobs:
|
|
|
6
6
|
test:
|
|
7
7
|
name: Ruby specs
|
|
8
8
|
runs-on: ${{ matrix.os }}
|
|
9
|
-
continue-on-error: ${{ endsWith(matrix.ruby, 'head') || matrix.ruby == 'debug' || matrix.experimental }}
|
|
10
9
|
strategy:
|
|
11
|
-
fail-fast: false
|
|
12
10
|
matrix:
|
|
13
11
|
os: [ubuntu-latest]
|
|
14
|
-
ruby:
|
|
15
|
-
- 2.7
|
|
16
|
-
- "3.0"
|
|
12
|
+
ruby: ['2.6', '2.7', '3.0']
|
|
17
13
|
gemfile:
|
|
18
14
|
- gemfiles/Gemfile-rails.5.2.x
|
|
19
15
|
- gemfiles/Gemfile-rails.6.0.x
|
|
20
16
|
- gemfiles/Gemfile-rails.6.1.x
|
|
17
|
+
- gemfiles/Gemfile-rails.7.0.x
|
|
18
|
+
- gemfiles/Gemfile-rails-edge
|
|
21
19
|
exclude:
|
|
22
|
-
- ruby: 2.
|
|
23
|
-
gemfile: gemfiles/Gemfile-rails.6.1.x
|
|
24
|
-
- ruby: "3.0"
|
|
25
|
-
gemfile: gemfiles/Gemfile-rails.5.2.x
|
|
26
|
-
experimental: [false]
|
|
27
|
-
include:
|
|
28
|
-
- ruby: 2.7
|
|
20
|
+
- ruby: 2.6
|
|
29
21
|
os: ubuntu-latest
|
|
30
|
-
gemfile: gemfiles/Gemfile-rails
|
|
31
|
-
|
|
32
|
-
- ruby: "3.0"
|
|
22
|
+
gemfile: gemfiles/Gemfile-rails.7.0.x
|
|
23
|
+
- ruby: 2.6
|
|
33
24
|
os: ubuntu-latest
|
|
34
25
|
gemfile: gemfiles/Gemfile-rails-edge
|
|
35
|
-
|
|
26
|
+
- ruby: 3.0
|
|
27
|
+
os: ubuntu-latest
|
|
28
|
+
gemfile: gemfiles/Gemfile-rails.5.2.x
|
|
36
29
|
|
|
37
30
|
env:
|
|
38
31
|
BUNDLE_GEMFILE: ${{ matrix.gemfile }}
|
|
32
|
+
|
|
39
33
|
steps:
|
|
40
34
|
- uses: actions/checkout@v2
|
|
41
|
-
|
|
42
35
|
- uses: ruby/setup-ruby@v1
|
|
43
36
|
with:
|
|
44
37
|
ruby-version: ${{ matrix.ruby }}
|
|
45
|
-
bundler-cache: true
|
|
38
|
+
bundler-cache: true
|
|
46
39
|
|
|
47
40
|
- name: Ruby specs
|
|
48
|
-
run: bundle exec rake
|
|
41
|
+
run: bundle exec rake test
|
data/.node-version
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
16
|
|
1
|
+
16
|
data/.rubocop.yml
CHANGED
data/CHANGELOG.md
CHANGED
|
@@ -1,26 +1,43 @@
|
|
|
1
|
-
* For versions prior to v6, see the [5.x stable branch of rails/webpacker](https://github.com/rails/webpacker/tree/5-x-stable).
|
|
2
|
-
* Please see [
|
|
1
|
+
* For versions prior to v6, see the [5.x stable branch of rails/webpacker](https://github.com/rails/webpacker/tree/5-x-stable).
|
|
2
|
+
* Please see [v6 Upgrade Guide](./docs/v6_upgrade.md) to go from version prior to v6.
|
|
3
3
|
|
|
4
4
|
## Versions
|
|
5
|
-
|
|
5
|
+
## [Unreleased]
|
|
6
6
|
Changes since last non-beta release.
|
|
7
7
|
|
|
8
8
|
*Please add entries here for your pull requests that are not yet released.*
|
|
9
|
+
|
|
10
|
+
## [v6.1.1] - February 6, 2022
|
|
11
|
+
|
|
12
|
+
### Added
|
|
13
|
+
- Support for esbuild-loader. [PR 53](https://github.com/shakacode/shakapacker/pull/53) by [tomdracz](https://github.com/tomdracz).
|
|
14
|
+
|
|
15
|
+
## [v6.1.0] - February 4, 2022
|
|
16
|
+
### Added
|
|
17
|
+
- Support for SWC loader. [PR 29](https://github.com/shakacode/shakapacker/pull/29) by [tomdracz](https://github.com/tomdracz).
|
|
18
|
+
|
|
19
|
+
### Fixed
|
|
20
|
+
- Static asset subdirectories are retained after compilation, matching Webpacker v5 behaviour. [PR 47](https://github.com/shakacode/shakapacker/pull/47) by [tomdracz](https://github.com/tomdracz). Fixes issues [rails/webpacker#2956](https://github.com/rails/webpacker/issues/2956) which broke in [rails/webpacker#2802](https://github.com/rails/webpacker/pull/2802).
|
|
21
|
+
|
|
22
|
+
## [v6.0.2] - January 25, 2022
|
|
23
|
+
### Improved
|
|
24
|
+
- Fix incorrect command name in warning. [PR 33](https://github.com/shakacode/shakapacker/pull/33) by [tricknotes](https://github.com/tricknotes).
|
|
25
|
+
|
|
9
26
|
## [v6.0.1] - January 24, 2022
|
|
10
27
|
### Improved
|
|
11
|
-
- PR #21 removed pnp-webpack-plugin as a dev dependency but did not remove it from the peer dependency list. [PR 30](https://github.com/shakacode/shakapacker/pull/
|
|
28
|
+
- PR #21 removed pnp-webpack-plugin as a dev dependency but did not remove it from the peer dependency list. [PR 30](https://github.com/shakacode/shakapacker/pull/30) by [t27duck](https://github.com/t27duck).
|
|
12
29
|
|
|
13
30
|
## [v6.0.0 changes from v6.0.0.rc.6] - January 22, 2022
|
|
14
31
|
|
|
15
32
|
### Improved
|
|
16
|
-
- Raise on multiple invocations of javascript_pack_tag and stylesheet_pack_tag helpers. [PR 19](https://github.com/shakacode/shakapacker/pull/19) by [tomdracz](https://github.com/tomdracz
|
|
17
|
-
- Remove automatic addition of node_modules into rails asset load path. [PR 20](https://github.com/shakacode/shakapacker/pull/20) by [tomdracz](https://github.com/tomdracz
|
|
18
|
-
- Remove pnp-webpack-plugin. [PR 21](https://github.com/shakacode/shakapacker/pull/21) by [tomdracz](https://github.com/tomdracz
|
|
33
|
+
- Raise on multiple invocations of javascript_pack_tag and stylesheet_pack_tag helpers. [PR 19](https://github.com/shakacode/shakapacker/pull/19) by [tomdracz](https://github.com/tomdracz).
|
|
34
|
+
- Remove automatic addition of node_modules into rails asset load path. [PR 20](https://github.com/shakacode/shakapacker/pull/20) by [tomdracz](https://github.com/tomdracz).
|
|
35
|
+
- Remove pnp-webpack-plugin. [PR 21](https://github.com/shakacode/shakapacker/pull/21) by [tomdracz](https://github.com/tomdracz).
|
|
19
36
|
|
|
20
37
|
|
|
21
38
|
### Merged from rails/webpacker
|
|
22
39
|
|
|
23
|
-
- Make watched_files_digest thread safe. [rails/webpacker #3233](https://github.com/rails/webpacker/pull/3233)
|
|
40
|
+
- Make watched_files_digest thread safe. [rails/webpacker #3233](https://github.com/rails/webpacker/pull/3233)
|
|
24
41
|
- Use single webpack config webpack.config.js. [rails/webpacker #3240](https://github.com/rails/webpacker/pull/3240)
|
|
25
42
|
- Switch to peer dependencies. [rails/webpacker #3234](https://github.com/rails/webpacker/pull/3234)
|
|
26
43
|
|
|
@@ -54,8 +71,13 @@ Changes since last non-beta release.
|
|
|
54
71
|
- Splitchunks enabled by default
|
|
55
72
|
- CSS extraction enabled by default, except when devServer is configured and running
|
|
56
73
|
|
|
74
|
+
## v5.4.3 and prior changes from rails/webpacker
|
|
75
|
+
See [CHANGELOG.md in rails/webpacker (up to v5.4.3)](https://github.com/rails/webpacker/blob/master/CHANGELOG.md)
|
|
57
76
|
|
|
58
|
-
[Unreleased]: https://github.com/shakacode/shakapacker/compare/
|
|
77
|
+
[Unreleased]: https://github.com/shakacode/shakapacker/compare/v6.1.1...master
|
|
78
|
+
[v6.1.1]: https://github.com/shakacode/shakapacker/compare/v6.1.1...v6.1.1
|
|
79
|
+
[v6.1.0]: https://github.com/shakacode/shakapacker/compare/v6.0.2...v6.1.0
|
|
80
|
+
[v6.0.2]: https://github.com/shakacode/shakapacker/compare/v6.0.1...v6.0.2
|
|
59
81
|
[v6.0.1]: https://github.com/shakacode/shakapacker/compare/v6.0.0...v6.0.1
|
|
60
82
|
[v6.0.0 changes from v6.0.0.rc.6]: https://github.com/shakacode/shakapacker/compare/aba79635e6ff6562ec04d3c446d57ef19a5fef7d...v6.0.0
|
|
61
83
|
[v6.0.0.rc.6 changes from v5.4]: https://github.com/rails/webpacker/compare/v5.4.3...aba79635e6ff6562ec04d3c446d57ef19a5fef7d
|
data/Gemfile.lock
CHANGED
data/README.md
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
# Shakapacker
|
|
2
2
|
|
|
3
|
-
_Official, actively maintained
|
|
3
|
+
_Official, actively maintained successor to [rails/webpacker](https://github.com/rails/webpacker). Internal naming for `shakapacker` will continue to use `webpacker` where possible for v6. ShakaCode stands behind long-term maintainence and development of this project for the Rails community._
|
|
4
|
+
|
|
5
|
+
|
|
4
6
|
* See [V6 Upgrade](./docs/v6_upgrade.md) for upgrading from v5 or prior v6 releases.
|
|
5
7
|
|
|
6
8
|
[](https://github.com/shakacode/shakapacker/actions)
|
|
@@ -12,11 +14,12 @@ _Official, actively maintained fork of [rails/webpacker](https://github.com/rail
|
|
|
12
14
|
[](https://rubygems.org/gems/shakapacker)
|
|
13
15
|
[](https://badge.fury.io/js/shakapacker)
|
|
14
16
|
|
|
15
|
-
Webpacker makes it easy to use the JavaScript pre-processor and bundler
|
|
16
|
-
[Webpack v5](https://webpack.js.org/)
|
|
17
|
+
Webpacker makes it easy to use the JavaScript pre-processor and bundler [Webpack v5+](https://webpack.js.org/)
|
|
17
18
|
to manage application-like JavaScript in Rails. It can coexist with the asset pipeline,
|
|
18
19
|
leaving Webpack responsible solely for app-like JavaScript, or it can be used exclusively, making it also responsible for images, fonts, and CSS.
|
|
19
20
|
|
|
21
|
+
Check out 6.1.0.beta.0 for [SWC](https://swc.rs/) support! It's way faster than babel.
|
|
22
|
+
|
|
20
23
|
See a comparison of [webpacker with jsbundling-rails](https://github.com/rails/jsbundling-rails/blob/main/docs/comparison_with_webpacker.md).
|
|
21
24
|
|
|
22
25
|
Discussion forums to discuss debugging and troubleshooting tips. Please open issues for bugs and feature requests:
|
|
@@ -32,10 +35,9 @@ Discussion forums to discuss debugging and troubleshooting tips. Please open iss
|
|
|
32
35
|
- [Features](#features)
|
|
33
36
|
- [Optional support](#optional-support)
|
|
34
37
|
- [Installation](#installation)
|
|
35
|
-
- [Rails v6](#rails-v6)
|
|
36
|
-
- [Rails v7](#rails-v7)
|
|
37
|
-
- [Manual Installation Steps](#manual-installation-steps)
|
|
38
|
+
- [Rails v6+](#rails-v6)
|
|
38
39
|
- [Note for Sprockets usage](#note-for-sprockets-usage)
|
|
40
|
+
- [Note for Yarn v2 usage](#note-for-yarn-v2-usage)
|
|
39
41
|
- [Usage](#usage)
|
|
40
42
|
- [View Helpers](#view-helpers)
|
|
41
43
|
- [Defer for `javascript_pack_tag`](#defer-for-javascript_pack_tag)
|
|
@@ -43,6 +45,8 @@ Discussion forums to discuss debugging and troubleshooting tips. Please open iss
|
|
|
43
45
|
- [Development](#development)
|
|
44
46
|
- [Webpack Configuration](#webpack-configuration)
|
|
45
47
|
- [Babel configuration](#babel-configuration)
|
|
48
|
+
- [SWC configuration](#swc-configuration)
|
|
49
|
+
- [esbuild loader configuration](#esbuild-loader-configuration)
|
|
46
50
|
- [Integrations](#integrations)
|
|
47
51
|
- [React](#react)
|
|
48
52
|
- [Typescript](#typescript)
|
|
@@ -68,7 +72,7 @@ Discussion forums to discuss debugging and troubleshooting tips. Please open iss
|
|
|
68
72
|
|
|
69
73
|
## Prerequisites
|
|
70
74
|
|
|
71
|
-
- Ruby 2.
|
|
75
|
+
- Ruby 2.6+
|
|
72
76
|
- Rails 5.2+
|
|
73
77
|
- Node.js 12.13.0+ || 14+
|
|
74
78
|
- Yarn
|
|
@@ -143,6 +147,12 @@ In order to enable this, make sure you add `node_modules` to the asset load path
|
|
|
143
147
|
Rails.application.config.assets.paths << Rails.root.join('node_modules')
|
|
144
148
|
```
|
|
145
149
|
|
|
150
|
+
### Note for Yarn v2 usage
|
|
151
|
+
|
|
152
|
+
If you are using Yarn v2 (berry), please note that PnP modules are not supported.
|
|
153
|
+
|
|
154
|
+
In order to use Shakapacker with Yarn v2, make sure you set `nodeLinker: node-modules` in your `.yarnrc.yml` file as per the [Yarn docs](https://yarnpkg.com/getting-started/migration#step-by-step) to opt out of Plug'n'Play behaviour.
|
|
155
|
+
|
|
146
156
|
## Usage
|
|
147
157
|
|
|
148
158
|
### View Helpers
|
|
@@ -373,6 +383,18 @@ By default, you will find the Webpacker preset in your `package.json`. Note, you
|
|
|
373
383
|
|
|
374
384
|
Optionally, you can change your Babel configuration by removing these lines in your `package.json` and add [a Babel configuration file](https://babeljs.io/docs/en/config-files) in your project. For an example customization based on the original, see [Customizing Babel Config](./docs/customizing_babel_config.md).
|
|
375
385
|
|
|
386
|
+
### SWC configuration
|
|
387
|
+
|
|
388
|
+
You can try out experimental integration with the SWC loader. You can read more at [SWC usage docs](./docs/using_swc_loader.md).
|
|
389
|
+
|
|
390
|
+
Please note that if you want opt-in to use SWC, you can skip [React](#react) integration instructions as it is supported out of the box.
|
|
391
|
+
|
|
392
|
+
### esbuild loader configuration
|
|
393
|
+
|
|
394
|
+
You can try out experimental integration with the esbuild-loader. You can read more at [esbuild-loader usage docs](./docs/using_esbuild_loader.md).
|
|
395
|
+
|
|
396
|
+
Please note that if you want opt-in to use esbuild-loader, you can skip [React](#react) integration instructions as it is supported out of the box.
|
|
397
|
+
|
|
376
398
|
### Integrations
|
|
377
399
|
|
|
378
400
|
Webpacker out of the box supports JS and static assets (fonts, images etc.) compilation. To enable support for CoffeeScript or TypeScript install relevant packages:
|
|
@@ -39,14 +39,14 @@ module.exports = function (api) {
|
|
|
39
39
|
development: isDevelopmentEnv || isTestEnv,
|
|
40
40
|
useBuiltIns: true
|
|
41
41
|
}
|
|
42
|
-
]
|
|
42
|
+
]
|
|
43
|
+
].filter(Boolean),
|
|
44
|
+
plugins: [
|
|
43
45
|
isProductionEnv && ['babel-plugin-transform-react-remove-prop-types',
|
|
44
46
|
{
|
|
45
47
|
removeImport: true
|
|
46
48
|
}
|
|
47
|
-
]
|
|
48
|
-
].filter(Boolean),
|
|
49
|
-
plugins: [
|
|
49
|
+
],
|
|
50
50
|
process.env.WEBPACK_SERVE && 'react-refresh/babel'
|
|
51
51
|
].filter(Boolean),
|
|
52
52
|
}
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
# Using esbuild-loader
|
|
2
|
+
|
|
3
|
+
:warning: This feature is currently experimental. The configuration and API are subject to change during the beta release cycle.
|
|
4
|
+
|
|
5
|
+
If you face any issues, please report them at https://github.com/shakacode/shakapacker/issues.
|
|
6
|
+
|
|
7
|
+
## About esbuild
|
|
8
|
+
|
|
9
|
+
[esbuild](https://esbuild.github.io/) is a Go-based bundler tool that can offer [significant improvement](https://esbuild.github.io/faq/#benchmark-details) over other similar tools.
|
|
10
|
+
|
|
11
|
+
While esbuild is a complete bundler, through the usage of [esbuild-loader](https://github.com/privatenumber/esbuild-loader), you can still leverage esbuild's speedy transpilation and minifcation in your Webpack-based configs.
|
|
12
|
+
|
|
13
|
+
Please note, that unlike Babel or SWC loader, esbuild-loader has got no support for things like:
|
|
14
|
+
- React Hot Module reload
|
|
15
|
+
- ES5 as a compilation target
|
|
16
|
+
- Automatic polyfills for missing browser features
|
|
17
|
+
|
|
18
|
+
Those are limitations of esbuild itself and might make use of esbuild-loader in your project unfeasible. If you don't care about HMR and don't need to support older browsers, esbuild-loader might be a suitable option for you.
|
|
19
|
+
|
|
20
|
+
## Switching your Shakapacker project to esbuild-loader
|
|
21
|
+
|
|
22
|
+
To use esbuild as your transpiler today. You need to do two things:
|
|
23
|
+
|
|
24
|
+
1. Make sure you've installed `esbuild` and `esbuild-loader` packages.
|
|
25
|
+
|
|
26
|
+
```
|
|
27
|
+
yarn add -D esbuild esbuild-loader
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
2. Add or change `webpacker_loader` value in your default `webpacker.yml` config to `esbuild`
|
|
31
|
+
The default configuration of babel is done by using `package.json` to use the file within the `shakapacker` package.
|
|
32
|
+
|
|
33
|
+
```yml
|
|
34
|
+
default: &default
|
|
35
|
+
source_path: app/javascript
|
|
36
|
+
source_entry_path: /
|
|
37
|
+
public_root_path: public
|
|
38
|
+
public_output_path: packs
|
|
39
|
+
cache_path: tmp/webpacker
|
|
40
|
+
webpack_compile_output: true
|
|
41
|
+
|
|
42
|
+
# Additional paths webpack should look up modules
|
|
43
|
+
# ['app/assets', 'engine/foo/app/assets']
|
|
44
|
+
additional_paths: []
|
|
45
|
+
|
|
46
|
+
# Reload manifest.json on all requests so we reload latest compiled packs
|
|
47
|
+
cache_manifest: false
|
|
48
|
+
|
|
49
|
+
# Select loader to use, available options are 'babel' (default), 'swc' or 'esbuild'
|
|
50
|
+
webpack_loader: 'esbuild'
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### (Optional) Replace minification with esbuild
|
|
54
|
+
|
|
55
|
+
You can gain an additional performance boost if you replace the default Terser minification with esbuild plugin.
|
|
56
|
+
|
|
57
|
+
o do so, you need to modify your webpack configuration and use `ESBuildMinifyPlugin` provided by `esbuild-loader`.
|
|
58
|
+
|
|
59
|
+
Example:
|
|
60
|
+
|
|
61
|
+
```js
|
|
62
|
+
const { webpackConfig: baseWebpackConfig, merge } = require('shakapacker')
|
|
63
|
+
const { ESBuildMinifyPlugin } = require('esbuild-loader')
|
|
64
|
+
|
|
65
|
+
const options = {
|
|
66
|
+
optimization: {
|
|
67
|
+
minimizer: [
|
|
68
|
+
new ESBuildMinifyPlugin({
|
|
69
|
+
target: 'es2015'
|
|
70
|
+
})
|
|
71
|
+
]
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
module.exports = merge({}, baseWebpackConfig, options)
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
For more details, see instructions at https://github.com/shakacode/shakapacker#webpack-configuration and https://github.com/privatenumber/esbuild-loader#js-minification-eg-terser.
|
|
79
|
+
|
|
80
|
+
## Usage
|
|
81
|
+
|
|
82
|
+
### React
|
|
83
|
+
|
|
84
|
+
React is supported out of the box, provided you use `.jsx` or `.tsx` file extension. Shakapacker config will correctly recognize those and tell esbuild to parse the JSX syntax correctly. If you wish to customize the likes of JSX fragment function, you can do that through customizing loader options as described below. You can see available options at https://github.com/privatenumber/esbuild-loader#%EF%B8%8F-options.
|
|
85
|
+
|
|
86
|
+
### Typescript
|
|
87
|
+
|
|
88
|
+
Typescript is supported out of the box and `.tsconfig.json` root file is automatically detected. Only a subset of `.tsconfig.json` options is supported. Please refer to the [loader docs](https://github.com/privatenumber/esbuild-loader#configuration) for additional information.
|
|
89
|
+
|
|
90
|
+
## Customizing loader options
|
|
91
|
+
|
|
92
|
+
You can see the default loader options at [esbuild/index.js](../package/esbuild/index.js).
|
|
93
|
+
|
|
94
|
+
If you wish to customize the loader defaults further, you need to create a `esbuild.config.js` file in your app config folder.
|
|
95
|
+
|
|
96
|
+
This file should have a single default export which is an object with an `options` key. Your customizations will be merged with default loader options. You can use this to override or add additional configurations.
|
|
97
|
+
|
|
98
|
+
Inside the `options` key, you can use any options available to the esbuild-loader. For the options reference, please refer to [esbuild-loader docs](https://github.com/privatenumber/esbuild-loader#%EF%B8%8F-options).
|
|
99
|
+
|
|
100
|
+
See some examples below of potential `config/babel.config.js`.
|
|
101
|
+
|
|
102
|
+
### Example: Specifying esnext target environment
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
```js
|
|
106
|
+
const customConfig = {
|
|
107
|
+
options: {
|
|
108
|
+
target: 'esnext'
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
module.exports = customConfig
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
### Example: Using custom jsxFragment and jsxFactory
|
|
116
|
+
|
|
117
|
+
```js
|
|
118
|
+
const { env } = require('shakapacker')
|
|
119
|
+
|
|
120
|
+
const customConfig = {
|
|
121
|
+
options: {
|
|
122
|
+
jsxFragment: 'Fragment',
|
|
123
|
+
jsxFactory: 'h'
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
module.exports = customConfig
|
|
128
|
+
```
|
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
# Using SWC Loader
|
|
2
|
+
|
|
3
|
+
:warning: This feature is currently experimental. The configuration and API are subject to change during the beta release cycle.
|
|
4
|
+
|
|
5
|
+
If you face any issues, please report at https://github.com/shakacode/shakapacker/issues.
|
|
6
|
+
|
|
7
|
+
## About SWC
|
|
8
|
+
|
|
9
|
+
[SWC (Speedy Web compiler)](https://swc.rs/) is a Rust-based compilation and bundler tool that can be used for Javascript and Typescript files. It claims to be 20x faster than Babel!
|
|
10
|
+
|
|
11
|
+
It supports all ECMAScript features and it's designed to be a drop-in replacement for Babel and its plugins. Out of the box, it supports TS, JSX syntax, React fast refresh, and much more.
|
|
12
|
+
|
|
13
|
+
For comparison between SWC and Babel, see the docs at https://swc.rs/docs/migrating-from-babel.
|
|
14
|
+
|
|
15
|
+
## Switching your Shakapacker project to SWC
|
|
16
|
+
|
|
17
|
+
In order to use SWC as your compiler today. You need to do two things:
|
|
18
|
+
|
|
19
|
+
1. Make sure you've installed `@swc/core` and `swc-loader` packages.
|
|
20
|
+
|
|
21
|
+
```
|
|
22
|
+
yarn add -D @swc/core swc-loader
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
2. Add or change `webpacker_loader` value in your default `webpacker.yml` config to `swc`
|
|
26
|
+
The default configuration of babel is done by using `package.json` to use the file within the `shakapacker` package.
|
|
27
|
+
|
|
28
|
+
```yml
|
|
29
|
+
default: &default
|
|
30
|
+
source_path: app/javascript
|
|
31
|
+
source_entry_path: /
|
|
32
|
+
public_root_path: public
|
|
33
|
+
public_output_path: packs
|
|
34
|
+
cache_path: tmp/webpacker
|
|
35
|
+
webpack_compile_output: true
|
|
36
|
+
|
|
37
|
+
# Additional paths webpack should look up modules
|
|
38
|
+
# ['app/assets', 'engine/foo/app/assets']
|
|
39
|
+
additional_paths: []
|
|
40
|
+
|
|
41
|
+
# Reload manifest.json on all requests so we reload latest compiled packs
|
|
42
|
+
cache_manifest: false
|
|
43
|
+
|
|
44
|
+
# Select loader to use, available options are 'babel' (default) or 'swc'
|
|
45
|
+
webpack_loader: 'swc'
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
## Usage
|
|
49
|
+
|
|
50
|
+
### React
|
|
51
|
+
|
|
52
|
+
React is supported out of the box, provided you use `.jsx` or `.tsx` file extension. Shakapacker config will correctly recognize those and tell SWC to parse the JSX syntax correctly. If you wish to customize the transform options to match any existing `@babel/preset-react` settings, you can do that through customizing loader options as described below. You can see available options at https://swc.rs/docs/configuration/compilation#jsctransformreact.
|
|
53
|
+
|
|
54
|
+
### Typescript
|
|
55
|
+
|
|
56
|
+
Typescript is supported out of the box, but certain features like decorators need to be enabled through the custom config. You can see available customizations options at https://swc.rs/docs/configuration/compilation, which you can apply through customizing loader options as described below.
|
|
57
|
+
|
|
58
|
+
Please note that SWC is not using the settings from `.tsconfig` file. Any non-default settings you might have there will need to be applied to the custom loader config.
|
|
59
|
+
|
|
60
|
+
## Customizing loader options
|
|
61
|
+
|
|
62
|
+
You can see the default loader options at [swc/index.js](../package/swc/index.js).
|
|
63
|
+
|
|
64
|
+
If you wish to customize the loader defaults further, for example, if you want to enable support for decorators or React fast refresh, you need to create a `swc.config.js` file in your app config folder.
|
|
65
|
+
|
|
66
|
+
This file should have a single default export which is an object with an `options` key. Your customizations will be merged with default loader options. You can use this to override or add additional configurations.
|
|
67
|
+
|
|
68
|
+
Inside the `options` key, you can use any options available to the SWC compiler. For the options reference, please refer to [official SWC docs](https://swc.rs/docs/configuration/compilation).
|
|
69
|
+
|
|
70
|
+
See some examples below of potential `config/swc.config.js`.
|
|
71
|
+
|
|
72
|
+
### Example: Enabling top level await and decorators
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
```js
|
|
76
|
+
const customConfig = {
|
|
77
|
+
options: {
|
|
78
|
+
jsc: {
|
|
79
|
+
parser: {
|
|
80
|
+
topLevelAwait: true,
|
|
81
|
+
decorators: true
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
module.exports = customConfig
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
### Example: Matching existing `@babel/present-env` config
|
|
91
|
+
|
|
92
|
+
```js
|
|
93
|
+
const { env } = require('shakapacker')
|
|
94
|
+
|
|
95
|
+
const customConfig = {
|
|
96
|
+
options: {
|
|
97
|
+
jsc: {
|
|
98
|
+
transform: {
|
|
99
|
+
react: {
|
|
100
|
+
development: env.isDevelopment,
|
|
101
|
+
useBuiltins: true
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
module.exports = customConfig
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
### Example: Enabling React Fast Refresh
|
|
112
|
+
|
|
113
|
+
:warning: Remember that you still need to add [@pmmmwh/react-refresh-webpack-plugin](https://github.com/pmmmwh/react-refresh-webpack-plugin) to your webpack config. The setting below just replaces equivalent `react-refresh/babel` Babel plugin.
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
```js
|
|
117
|
+
const { env } = require('shakapacker')
|
|
118
|
+
|
|
119
|
+
const customConfig = {
|
|
120
|
+
options: {
|
|
121
|
+
jsc: {
|
|
122
|
+
transform: {
|
|
123
|
+
react: {
|
|
124
|
+
refresh: env.isDevelopment && env.runningWebpackDevServer
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
module.exports = customConfig
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
### Example: Adding browserslist config
|
|
135
|
+
|
|
136
|
+
```js
|
|
137
|
+
|
|
138
|
+
const customConfig = {
|
|
139
|
+
options: {
|
|
140
|
+
env: {
|
|
141
|
+
targets: '> 0.25%, not dead'
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
module.exports = customConfig
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
|
|
150
|
+
## Known limitations
|
|
151
|
+
|
|
152
|
+
- `browserslist` config at the moment is not being picked up automatically. [Related SWC issue](https://github.com/swc-project/swc/issues/3365). You can add your browserlist config through customizing loader options as outlined above.
|
|
153
|
+
- Using `.swcrc` config file is currently not supported. You might face some issues when `.swcrc` config is diverging from the SWC options we're passing in the Webpack rule.
|