Consuming pure ES2015 libraries with Webpack 2 - ecmascript-6

Context
I've been using a monolithic src tree internally and have recently split it into separate smaller libraries for reuse. Since this is all internal, I have no need for these libraries to produce ES5. I want our webpack 2 apps to be able to consume pure ES2015 libraries.
Problem
The problem is, when I produce a pure ES2015 library, my webpack transpiled app fails with:
Uncaught TypeError: Class constructor RouteConfig cannot be invoked without 'new'
The source of this is:
import {RouteConfig} from '#acme/ui/config'
Sanity check
For verification that I'm not doing anything obviously wrong, I verified:
the library built as ES5 works
the app including the library (with the ES2015 preset added to it) via source alias works
Details
Library .babelrc
{ // produce a pure es2015 build
"presets": [
"es2017",
"es2016",
"stage-0",
"react"
],
"plugins": [
"babel-relay-plugin-loader",
"flow-react-proptypes",
"transform-flow-strip-types",
"lodash",
"transform-runtime"
],
"env": {
"production": {
"presets": [
"react-optimize"
],
"plugins": [
["react-remove-properties", {"properties": ["data-test"]}]
]
}
}
}
Application .babelrc:
{
"presets": [
"es2017",
"es2016",
["es2015", {"modules": false}], // allows webpack2 to interpret ES2015 modules+
"stage-0", // if omitted, this leaves `export Log from './Log'`
"react"
],
"plugins": [
"babel-relay-plugin-loader",
"flow-react-proptypes",
"transform-flow-strip-types",
"lodash",
"transform-runtime",
"react-hot-loader/babel"
],
"env": {
"production": {
"presets": [
"react-optimize"
],
"plugins": [
["react-remove-properties", {"properties": ["data-test"]}]
]
}
}
}
TLDR;
We have many libraries and many apps that are internal and don't need ES5
I want to author both a library and an app in ES2015+.
Each library will create a pure ES2015 build for the private npm package.
I want to take advantage of as much webpack 2 tree shaking/optimization as possible.
Our library works as an ES5 package
Our library works as a source alias to the app with the 2015 preset added to it's .babelrc
Source alias usage for all our libraries is not desirable
Question
What config is needed to get webpack 2 to consume a pure ES2015 library?

It's possible you're excluding the node_modules folder in your babel-loader. If so, you can try modifying the exclude regex.
ie.
test: /\.js$/,
use: [
'babel-loader'
],
exclude: [/.*node_modules((?!folder_name_here).)*$/]

Related

PhpStorm: what are php-cs-fixer files and how to ignore them

I keep getting "Multiple definitions exist for class..." warnings in PhpStorm, and upon inspection, I see these a bunch of these huge php-cs-fixer files (100K+ lines) with the comment "This file is part of PHP CS Fixer.".
I found that there are multiple copies of several other files named phploc, composer, php-scoper, etc., under vendor/library_name/tools/ in various libraries for some reason. They are all huge compiled files that PhpStorm detects.
I tried ignoring these files in PhpStorm one by one, and once re-indexing finishes, these files disappear, leading me to believe they're IDE-generated files. However, it makes no sense the IDE would generate them and in turn include them hinting code.
composer.json
{
"name": "magento/project-community-edition",
"description": "eCommerce Platform for Growth (Community Edition)",
"type": "project",
"license": [
"OSL-3.0",
"AFL-3.0"
],
"config": {
"preferred-install": "dist",
"sort-packages": true
},
"require": {
"magento/composer-root-update-plugin": "~1.0",
"magento/product-community-edition": "2.4.1"
},
"require-dev": {
"allure-framework/allure-phpunit": "~1.2.0",
"dealerdirect/phpcodesniffer-composer-installer": "^0.5.0",
"friendsofphp/php-cs-fixer": "~2.16.0",
"lusitanian/oauth": "~0.8.10",
"magento/magento-coding-standard": "*",
"magento/magento2-functional-testing-framework": "^3.0",
"pdepend/pdepend": "~2.7.1",
"phpcompatibility/php-compatibility": "^9.3",
"phpmd/phpmd": "^2.8.0",
"phpstan/phpstan": ">=0.12.3 <=0.12.23",
"phpunit/phpunit": "^9",
"sebastian/phpcpd": "~5.0.0",
"squizlabs/php_codesniffer": "~3.5.4"
},
"conflict": {
"gene/bluefoot": "*"
},
"autoload": {
"psr-4": {
"Magento\\Framework\\": "lib/internal/Magento/Framework/",
"Magento\\Setup\\": "setup/src/Magento/Setup/",
"Magento\\": "app/code/Magento/",
"Zend\\Mvc\\Controller\\": "setup/src/Zend/Mvc/Controller/"
},
"psr-0": {
"": [
"app/code/",
"generated/code/"
]
},
"files": [
"app/etc/NonComposerComponentRegistration.php",
"app/helper.php"
],
"exclude-from-classmap": [
"**/dev/**",
"**/update/**",
"**/Test/**"
]
},
"autoload-dev": {
"psr-4": {
"Magento\\Sniffs\\": "dev/tests/static/framework/Magento/Sniffs/",
"Magento\\Tools\\": "dev/tools/Magento/Tools/",
"Magento\\Tools\\Sanity\\": "dev/build/publication/sanity/Magento/Tools/Sanity/",
"Magento\\TestFramework\\Inspection\\": "dev/tests/static/framework/Magento/TestFramework/Inspection/",
"Magento\\TestFramework\\Utility\\": "dev/tests/static/framework/Magento/TestFramework/Utility/",
"Magento\\PhpStan\\": "dev/tests/static/framework/Magento/PhpStan/"
}
},
"version": "2.4.0",
"minimum-stability": "stable",
"repositories": [
{
"type": "composer",
"url": "https://repo.magento.com/"
}
],
"extra": {
"magento-force": "override"
}
}
PhpStorm ignored files (adding php-cs-fixer and phploc here somehow removed all/multiple copies from the vendor directories):
These files are in your vendor directory as you must have install your dependencies from sources, not distributions.
Let's use sebastian/code-unit as an example to see how it works:
the file obviously is in the repository: https://github.com/sebastianbergmann/code-unit/tree/1.0.8/tools
but excluded from being exported to distribution (the archive file you are actually downloading from GitHub when installing package): https://github.com/sebastianbergmann/code-unit/blob/1.0.8/.gitattributes#L6 - you can see that it's not present in file you download from https://github.com/sebastianbergmann/code-unit/releases/tag/1.0.8
So, you must have install your dependencies using composer install --prefer-source (or composer update --prefer-source as it's the other command with that option) and you want to use --prefer-dist or actually not using any of these flags as the latter is the default. You can find more information about it in official documentation: https://getcomposer.org/doc/03-cli.md#install-i
Remove your vendor directory and install dependencies once more without --prefer-source flag.
AFAIR there was also an issue when you did not have curl extension installed, then simply add this extension.

Babel with babel-preset-env seems to ignore browserslist config

I’m testing Babel with browserslist in an npm script.
Here is my current package.json, in which Babel is doing what I expect:
{
"name": "npm-scripts-igloo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"devserver": "live-server",
"watch-sass": "node-sass sass/style.scss css/style.css --output-style expanded --watch",
"compile-sass": "node-sass sass/style.scss css/style.compiled.css --output-style expanded",
"prefix-css": "postcss css/style.compiled.css --use autoprefixer -o css/style.prefix.css",
"compress-css": "node-sass css/style.prefix.css css/style.min.css --output-style compressed",
"build-css": "npm-run-all compile-sass prefix-css compress-css",
"babel": "babel app.js --watch -o js/app.compiled.js",
"start": "npm-run-all -p devserver watch-sass babel"
},
"browserslist": [
"last 5 versions"
],
"babel": {
"presets": [
[
"env",
{
"targets": {
"browsers": [
"cover 99.5%"
]
}
}
]
]
},
"author": "",
"license": "ISC",
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.6.1",
"autoprefixer": "^9.4.7",
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0",
"live-server": "^1.2.1",
"node-sass": "^4.11.0",
"npm-run-all": "^4.1.5",
"postcss-cli": "^6.1.1"
}
}
I’m not using a .babelrc file or any other configuration of Babel.
I’ve tried to target Edge 16 using the browserslist key:
"browserslist": [
"Edge 16"
]
With this configuration, Babel should NOT convert const to var, but it does, as explained here:
Babel doesn’t change const since Edge 16 supports it
https://github.com/browserslist/browserslist-example
However, if I target Edge 16 using the babel key:
"babel": {
"presets": [
[
"env",
{
"targets": {
"browsers": [
"Edge 16"
]
}
}
]
]
}
then Babel correctly doesn’t change const to var since Edge 16 supports it.
I would prefer to use the browserslist key, as it’s the recommended practice
https://github.com/browserslist/browserslist
Also, I could then simply share this browserslist option with autoprefixer, which is how it’s supposed to work.
But, the problem is that Babel seems to ignore the browserslist key.
The same is true if I use a .browserslistrc file containing:
Edge 16
There is an asterisked note on this slide:
https://slides.com/ai/browserslist#/14
that reports:
Only Babel 7 supports config file
So, I tried updating Babel to v7:
npm install #babel/core -D
This produced the following in devDependencies:
"#babel/core": "^7.3.4"
Unfortunately, that didn’t seem to make any difference.
So, my questions are:
Why does the browserslist key not appear to be affecting Babel? Is there something wrong with my syntax?
Does it matter where in package.json the browserslist key appears? i.e. does key order matter?
A little bit late for the party but I was reading through the docs and found out this:
"By default #babel/preset-env will use browserslist config sources unless either the targets or ignoreBrowserslistConfig options are set."
source: here
So in your case you need to get rid of targets property otherwise it will take precedence and neither .browserlistrc nor browserslist property in package.json will take effect.
Hope it helps!
try to clean cache in node_modules/.cache/babel-loader
Its worked for me with babel#7.6.0 with following config in .babelrc fie
'#babel/preset-env', {
'useBuiltIns': 'usage',
'corejs': 3,
'targets': {
'browsers': ['chrome 74']
}
}
Found more info here.
An or combiner can use the keyword or as well as ,. last 1 version or > 1% is equal to last 1 version, > 1%.
and query combinations are also supported to perform an intersection of the previous query: last 1 version and > 1%.

How could I use the same tslint.json in submodules, too?

A big Angular 5 project is given with several submodules (from different repositories) and I couldn't specify the path to neither node_modules/codelyzer nor tslint-base.json from a submodule's tslint.json.
The tree is something like this:
tslint-base.json
node_modules
...
modules
submod1
tslint.json
components
...
submod2
tslint.json
components
...
tslint-base.json:
{
"rulesDirectory": [
"node_modules/codelyzer"
],
"rules": {
...
}
}
Of course it works well when we open the root of the project with IDE (IntelliJ IDEA Ultimate), but we often open it from one of the submodules, not the project root. So IDE does not see the node_modules/codelyzer folder from submodule's tslint.json. I have already tried:
1. tslint.json
{
"rulesDirectory": [
"../../node_modules/codelyzer"
]
}
2. tslint.json
{
"rulesDirectory": [
"./../../node_modules/codelyzer"
]
}
3. tslint.json
{
"extends": [
"./../../tslint-base.json"
]
}
4. tslint.json
{
"extends": [
"../../tslint-base.json"
]
}
And I also tried these in combinations. But it doesn't work...
What do I wrong?

How to Debug other project than "main"?

Using Visual Studio Code, I have two directories in my workspace (both node.js projects), but I can only launch one of them. The launch.json file exists in both folders, but only the first is available in debug menu. The launch.json files looks like that:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}\\app.js",
"outFiles": [
"${workspaceFolder}/**/*.js"
]
}
]
}
How can I start debugging the second folder of my workspace?
I removed the first folder from the workspace, started the only project left, then added the removed folder again. Now I have both projects in the launch configurations.
I have found two solutions. Both involve editing your *.code-workspace file.
As OP found, you can reorder the folders. In the *.code-workspace file, place the folder with the desired launch.json at the top of the list of folders.
"folders": [
{
"path": "..\\ProjectWithLaunchJson"
},
{
"path": "..\\MyOtherProject"
}
]
Alternatively, you can include the launch configuration in the *.code-workspace file.
"folders": [
:
:
],
"settings": {
"launch": {
"configurations": [
{
<copy your launch.json's configuration into here>
}
]
}
}
YMMV. I had to tweak the path to the executable. And I had to remove the preLaunchTask property since VS Code could not find the Task. VS Code's support for this will likely evolve.

ava: SyntaxError: Unexpected token import

So ava comes with build-in ES2015 support, which works fine for my actual test files. However, when I do
import {newUser, createUser, login} from './helpers/user';
I can't use import and export in the helper file, I then get:
Users/rowe/Code/fv/foxvision-api/test/api/helpers/user.js:1
(function (exports, require, module, __filename, __dirname) { import request from 'supertest';
SyntaxError: Unexpected token import
I have no specific babel configuration set up as for the test files it works out of the box. Can anyone explain to me why the helper dependencies are not transpiled with babel? Using test/**/helpers is even following ava convention.
Thanks,
Robin
Solution
So based on thangngoc89's solution, what I did to make it work was:
Add a .babelrc with content:
{
"presets": [
"es2015",
"stage-2"
],
"plugins": [
"espower",
"transform-runtime"
]
}
Added to package.json:
"ava": {
"require": ["babel-register"],
"babel": "inherit"
}
AVA only transpile the test files. Not test dependencies so you will need to setup babel in your project (I suppose you did it because you're using ES6 anyway).
Then in AVA's setting, add this :
"ava": {
...
"babel": "inherit"
}
It means that use your project babel setting to transpile the test dependencies. See more information in AVA docs: https://github.com/sindresorhus/ava/blob/master/docs/recipes/babelrc.md
Using rweng, my solution came out a bit simpler.
.babelrc
{
"presets": [
"es2015"
],
"plugins": [
"transform-runtime"
]
}
package.json:
"ava": {
"require": ["babel-register"],
"babel": "inherit"
}
Unfortunately standard solution didn't work for my case.
Here is my solution which worked for ava + quasar + vue project
.babelrc
{
"presets": [
"es2017",
"#ava/stage-4",
"stage-3"
],
"plugins": [
"transform-runtime"
]
}
package.json
"ava": {
"require": [
"babel-register"
],
"babel": "inherit"
},
"scripts": {
"ava": "NODE_ENV=test ava",
"test": "ava",
"test:watch": "ava --watch --verbose"
}
install modules
yarn add babel-register babel-preset-es2017 #ava/babel-preset-stage-4 babel-plugin-transform-runtime babel-preset-stage-3 --dev