SymfonyCasts stands united with the people of Ukraine
gstreamer0.10-ffmpeg
gstreamer0.10-plugins-good packages.
Babel is pretty amazing. But, it's even doing something else automatically that we haven't realized yet! Back in admin_article_form.js, and it doesn't matter where, but down in ReferenceList, I'm going to add var stuff = new WeakSet([]);:
| ... lines 1 - 47 | |
| class ReferenceList | |
| { | |
| constructor($element) { | |
| var stuff = new WeakSet([]); | |
| ... lines 52 - 81 | |
| } | |
| ... lines 83 - 136 | |
| } | |
| ... lines 138 - 163 |
WeakSet is an object that was introduced to JavaScript, um, ECMAScript in 2015. Because the Encore watch script is running, go over and refresh the built file. Here it is: var stuff = new WeakSet([]);.
That's not surprising, right? I mean, we're telling Babel that we only need to support really new browsers, so there's no need to rewrite this to some old, compatible code... right? Well... it's more complicated than that. WeakSet is not a new syntax that Babel can simply change to some old syntax: it's an entirely new feature! There are a bunch of these and some are really important, like the Promise object and the fetch() function for AJAX calls.
To support totally new features, you need something called a polyfill. A polyfill is a normal JavaScript library that adds a feature if it's missing. For example, there's a polyfill just for WeakSet, which you can import if you want to make sure that WeakSet will work in any browser.
But, keeping track of whether or not you imported a polyfill... and whether or not you even need a polyfill - maybe the feature is already available in the browsers you need to support - is a pain! So... Encore pre-configures Babel to... just do it for us.
Check it out. Go back to package.json and change this to support older browsers:
| { | |
| ... lines 2 - 25 | |
| "browserslist": [ | |
| "> .05%" | |
| ] | |
| } |
Then, just like before, go to your terminal and manually clear the Babel cache:
rm -rf node_modules/.cache/babel-loader/
And restart Encore:
yarn watch
Ok, let's go back to the browser, refresh the built JavaScript file and search for WeakSet. It still looks exactly like our original code. But now, just search for "weak". Woh. This is a bit hard to read, but it's importing something called core-js/modules/es.weak-set.
This core-js package is a library full of polyfills. Babel realized that we're trying to use WeakSet and so it automatically added an import statement for the polyfill! This is identical to us manually going to the top of the file and adding import 'core-js/modules/es.weak-set'. How cool is that?!
And... this is not the first time Babel has automatically added a polyfill! Open up build/app.js. Back in the editor, the get_nice_message module used a String method called repeat():
| export default function(exclamationCount) { | |
| return 'Hello Webpack Encore! Edit me in assets/js/app.js'+'!'.repeat(exclamationCount); | |
| }; |
Whelp, it turns out that repeat() is a fairly new feature!
Search for "repeat" in the built file. There it is: it's importing core-js/modules/es.string.repeat. When I used this function, I wasn't even thinking about whether or not that feature was new and if it was available in the browsers we need to support! But because Encore has our back, it wasn't a problem. That's a powerful idea.
By the way, this is all configured in webpack.config.js: it's this .configureBabel() method:
| ... lines 1 - 2 | |
| Encore | |
| ... lines 4 - 48 | |
| // enables @babel/preset-env polyfills | |
| .configureBabel(() => {}, { | |
| useBuiltIns: 'usage', | |
| corejs: 3 | |
| }) | |
| ... lines 54 - 76 | |
| ; | |
| ... lines 78 - 79 |
Generally-speaking, this is how you can configure Babel. The useBuiltIns: 'usage' and corejs: 3 are the key parts. Together, these say:
Please, automatically import polyfills when you see that I'm using a new feature and I've already installed version 3 of
corejs.
That package was pre-installed in the original package.json we got from the recipe.
Next: let's demystify a feature that we disabled way back at the beginning of this tutorial: the single runtime chunk.
Hey Krzysztof K.!
Does it transpile/poly-fill code from node_modules too?
Excellent question! By default, no, it does not. Actually, it's a setting of Babel and Encore pre-configures it to not process things in node_modules/ - here is some info about that - https://github.com/symfony/webpack-encore/issues/558. We do this for performance - Babel slows things down and usually you don't need Babel to be executed on node_modules stuff (that's not always true, but running it all the time when you usually don't need it would be a huge pain). You had an interesting situation where you had a 3rd party module that didn't support IE11. In a sense, you were "fixing" their code. Ideally, 3rd party libraries would support all "reasonable" version of browsers.
What about: "@babel/plugin-transform-runtime", is this plugin required for anything?
To be honest with you, I'm not sure. You could try adding this and see if it has any affect. I'm not familiar with this plugin... it might save on some filesize - but I really don't know. Sorry I can't give you a better answer on that one!
Cheers!
SOLVED: seems that includeNodeModules does the job!
Hi Ryan, is it possible that you could add option to encore configuration to specify which libraries form node_modules should be transpiled?
Vue cli seems to have such option: transpileDependencies
Can we have something similar for webpack encore?
At the moment each time I have such issue (related to IE11), I just copy the library to my private vendor folder, but this is poor solution.
I tried including a custom build of CKEditor5 in my Webpack Encore config, which not too easy. I made it work, but I have one question left. In my assets directory, I created a directory 'ckeditor5', which contains all the code for my custom build. Babel should not transpile this code because, well.. the editor does not work with older versions of JS (even when transpiled). So I wanted to exclude this directory and everything in it from Babel. I tried
`
.configureBabel(() => {}, {
exclude: /assets\/ckeditor5/
)}
`
That did not work. What does work is:
`
.configureBabel(() => {}, {
exclude: {
exclude: /assets\/ckeditor5/
}
)}
`
But why? (ps. sorry for the layout of the code. Even though I tried to edit it to make it look normal, it does not seem to work).
Hey Dirk!
Sorry for my slow reply!
Wow... that is WEIRD! I can't explain this fully. But, I can give you some info that might help. There are (and this confused me, I had to triple-check some logic) two different "exclude" things going on. First, the "exclude" option here is meant to tell Webpack to *not* process matching paths through "babel-loader". That appears to be working correctly (from double-checking and dumping some files in Encore). I can't explain why the first would be not working and the second *would* be working. Also, Babel itself has an "exclude" option - that is something totally different - just mentioning to avoid confusion.
Btw, the "exclude" option defaults to ignoring node_modules. When you override it, you replace that default. But, that should be happening on both "variations" of what you're doing - so I don't think it's really related.
Sorry I can't give you a more clear answer on this one - it's a bit of a mystery!
Ohhhhhhhhhhhh. THANK YOU. Of COURSE. Ultimately, the "exclude" is passed to an "exclude" on the "loader". That *usually* is a regexp (e.g. /node_modules) but you can *also* set it to an "object" where (by coincidence) "exclude" is an option: :p. I'm still not sure why you weren't able to pass it to the top-level exclude... but I at least know why that was parsing correctly.
Cheers!
ha, it's good to have an explanation ;). I have come up with a better solution using regex:exclude: /node_modules(?!(\\)@ckeditor)/
Not only is this easier to read, it also targets only the files that are part of @ckeditor, and not all files that are being referenced to in /assets/ckeditor5.
ps. There might be better ways to write the regex, I'm not that great with it.
Nice one! My favorite regex is the kind... that works... and ideally one I have a test for - because it's not easy for me either ;)
Cheers!
Hi Ryan,
We need to support IE11 and higher, so in my package.json I added:
```
"browserslist": [
"ie >= 11"
]
```
However, I run `yarn dev` I get a javascript error about `Object.assign not found`. But if I run `yarn build` for a production build everything works in IE11. I have tried deleting the node_modules cache like it instructed in this video. Why does the transpiling for IE11 not work for a dev build? Also if I run `yarn build` without the browserslist it works in IE11. So it seems like it only transpiles down in general if I run a production build, I was assume it would transpile for dev build as well?
Hey Paul Z. !
So it seems like it only transpiles down in general if I run a production build, I was assume it would transpile for dev build as well?
Hmm... yea... it should transpile down in all cases. Well, specifically here, it's all about the "polyfill"... which is also done by Babel... but they're two (sort of) separate things (rewriting syntax == transpiling vs adding features == polyfill). Either way, I can't see anything that would cause this behavior... so we'll need to do a bit of digging to figure it out... if you're up for it ;).
First, you can see where the "Encore.isProduction()" value is used internally in Encore - it's just a few places: https://github.com/symfony/webpack-encore/search?q=isProduction&unscoped_q=isProduction
The easiest way to debug this would be to manually go into node_modules/@symfony/webpack-encore and "tweak" these settings ones-by-one and see if there is a difference. I'm particularly interested in tweaking lib/loaders/babel.js - https://github.com/symfony/webpack-encore/blob/5414a1dd9215e5baf005396bae9135a91187a278/lib/loaders/babel.js#L29 - I would change that line to "false" (the value for the production build) and see if it changes the behavior of the dev build. I'm also interested in the "mode" key - https://github.com/symfony/webpack-encore/blob/fe404d61b77628910b0f9a4762ce0e599a9b84ac/lib/config-generator.js#L66 - hardcoding that to "production". Basically, we want to see what is triggering the behavior change... which is super weird.
If you don't care so much... and don't want to debug - I understand! But if you are curious... then I think with a bit of digging, we can find the root cause.
Cheers!
Hi Ryan,
Thanks for getting back to me. Changing the mode to 'production' in https://github.com/symfony/...
fixed it, but that still doesn't really tell me much unless you have an idea? I had turned the babel cache directory off earlier hoping that was the issue and that didn't work either.
Hey Paul Z.!
Hmm, I was afraid that one would be the problem :/. I say "afraid" because that's a Webpack setting that controls a variety of things - https://webpack.js.org/conf... - so it's tough to know which is causing the real issue :/. If you are willing to a bit more digging, I would:
A) Set the mode back to development... or basically.. undo any hacks you added for debugging
B) Go to the optimization config - https://github.com/symfony/... - and start changing some of the keys from their development-mode defaults https://webpack.js.org/conf... to their production mode values - https://webpack.js.org/conf... - optimization isn't the only spot where these two modes change config, but it is the most significant (note that each mode also enables different plugins, but this is actually caused by the optimization flags usually - e.g. if you change minimize to true, it *causes* the TerserPlugin to be added).
The fact that the development mode is the problem and production works is really odd - I would (if anything) expect the opposite, as code is minified in production... so in theory you could "lose more". That's why I'm a bit perplexed as to which of these configs could be causing the issue... :/
Let me know what you find out!
Cheers!
// composer.json
{
"require": {
"php": "^7.1.3",
"ext-iconv": "*",
"aws/aws-sdk-php": "^3.87", // 3.91.4
"composer/package-versions-deprecated": "^1.11", // 1.11.99
"knplabs/knp-markdown-bundle": "^1.7", // 1.7.1
"knplabs/knp-paginator-bundle": "^2.7", // v2.8.0
"knplabs/knp-time-bundle": "^1.8", // 1.9.0
"league/flysystem-aws-s3-v3": "^1.0", // 1.0.22
"league/flysystem-cached-adapter": "^1.0", // 1.0.9
"liip/imagine-bundle": "^2.1", // 2.1.0
"nexylan/slack-bundle": "^2.0,<2.2.0", // v2.1.0
"oneup/flysystem-bundle": "^3.0", // 3.0.3
"php-http/guzzle6-adapter": "^1.1", // v1.1.1
"sensio/framework-extra-bundle": "^5.1", // v5.3.1
"stof/doctrine-extensions-bundle": "^1.3", // v1.3.0
"symfony/asset": "^4.0", // v4.2.5
"symfony/console": "^4.0", // v4.2.5
"symfony/flex": "^1.9", // v1.17.6
"symfony/form": "^4.0", // v4.2.5
"symfony/framework-bundle": "^4.0", // v4.2.5
"symfony/orm-pack": "^1.0", // v1.0.6
"symfony/security-bundle": "^4.0", // v4.2.5
"symfony/serializer-pack": "^1.0", // v1.0.2
"symfony/twig-bundle": "^4.0", // v4.2.5
"symfony/validator": "^4.0", // v4.2.5
"symfony/web-server-bundle": "^4.0", // v4.2.5
"symfony/webpack-encore-bundle": "^1.4", // v1.5.0
"symfony/yaml": "^4.0", // v4.2.5
"twig/extensions": "^1.5" // v1.5.4
},
"require-dev": {
"doctrine/doctrine-fixtures-bundle": "^3.0", // 3.1.0
"easycorp/easy-log-handler": "^1.0.2", // v1.0.7
"fzaninotto/faker": "^1.7", // v1.8.0
"symfony/debug-bundle": "^3.3|^4.0", // v4.2.5
"symfony/dotenv": "^4.0", // v4.2.5
"symfony/maker-bundle": "^1.0", // v1.11.5
"symfony/monolog-bundle": "^3.0", // v3.3.1
"symfony/phpunit-bridge": "^3.3|^4.0", // v4.2.5
"symfony/profiler-pack": "^1.0", // v1.0.4
"symfony/var-dumper": "^3.3|^4.0" // v4.2.5
}
}// package.json
{
"devDependencies": {
"@symfony/webpack-encore": "^0.27.0", // 0.27.0
"autocomplete.js": "^0.36.0",
"autoprefixer": "^9.5.1", // 9.5.1
"bootstrap": "^4.3.1", // 4.3.1
"core-js": "^3.0.0", // 3.0.1
"dropzone": "^5.5.1", // 5.5.1
"font-awesome": "^4.7.0", // 4.7.0
"jquery": "^3.4.0", // 3.4.0
"popper.js": "^1.15.0",
"postcss-loader": "^3.0.0", // 3.0.0
"sass": "^1.29.0", // 1.29.0
"sass-loader": "^7.0.1", // 7.3.1
"sortablejs": "^1.8.4", // 1.8.4
"webpack-notifier": "^1.6.0" // 1.7.0
}
}
Hello Ryan, could you tell something more about Babel? Does it transpile/poly-fill code from node_modules too? I had issue with one dependency from node_modules under IE11, and to resolve it I copied it to asset/vendor folder ad now it works.
Before this tutorial I had different babel configuration through encore, not sure what are the differences, but I had poly-fills included in my main.js, but I have changed it now to your setup and all works :)
What about: "@babel/plugin-transform-runtime", is this plugin required for anything?