Chapters
21 Chapters
|
2:10:39
|
Login to bookmark this video
-
Course Code
Login or register to download the code!Compatible PHP versions: ^7.1.3
Login or register to download the code!Compatible PHP versions: ^7.1.3
-
This Video
Login or register to download the video!
Login or register to download the video!
-
Subtitles
Login or register to download the subtitles!
Login or register to download the subtitles!
-
Course Script
Login or register to download the script!
Login or register to download the script!
18.
Polyfills & Babel
Scroll down to the script below, click on any sentence (including terminal blocks) to jump to that spot in the video!
Subscribe to jump to this part in the video!
This tutorial works great with Symfony5!
What PHP libraries does this tutorial use?
// 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
"doctrine/annotations": "^1.0", // 1.10.1
"doctrine/doctrine-bundle": "^1.6.10", // 1.10.2
"doctrine/doctrine-migrations-bundle": "^1.3|^2.0", // v2.0.0
"doctrine/orm": "^2.5.11", // v2.7.2
"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
"phpdocumentor/reflection-docblock": "^3.0|^4.0", // 4.3.0
"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.21.6
"symfony/form": "^4.0", // v4.2.5
"symfony/framework-bundle": "^4.0", // v4.2.5
"symfony/property-access": "4.2.*", // v4.2.5
"symfony/property-info": "4.2.*", // v4.2.5
"symfony/security-bundle": "^4.0", // v4.2.5
"symfony/serializer": "4.2.*", // v4.2.5
"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/stopwatch": "4.2.*", // v4.2.5
"symfony/var-dumper": "^3.3|^4.0", // v4.2.5
"symfony/web-profiler-bundle": "4.2.*" // v4.2.5
}
}What JavaScript libraries does this tutorial use?
// 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
}
}
14 Comments
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?
Hey Krzysztof K.!
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.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.
Good find Krzysztof K.! It's a pretty new feature - happy it's working for you!
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(() => {}, {
)}
`
That did not work. What does work is:
`
.configureBabel(() => {}, {
)}
`
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!
Hey Ryan,
No need to apologize for taking some time to reply! I can only imagine how busy you are. Maybe this comment helps (scroll down to the second sections, you've seen it before ;)). It was the reason why I even tried such a strange thing.
Cheers, Dirk
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. !
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-encoreand "tweak" these settings ones-by-one and see if there is a difference. I'm particularly interested in tweakinglib/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!
"Houston: no signs of life"
Start the conversation!