I am seeing my eslint rules applied in VSCode however they are not working in Babel.
I believe that I need to clear the cache, but I don't know how to do it.
Could you tell me how to do this?
rules
"#typescript-eslint/camelcase": ["warn"],
"camelcase": "off"
Babel output
vscode output
If you are using a babel.config.js file which looks like below. You can turn off the cache by passing false to api.cache(false)
module.exports = function (api) {
const presets = [
[
'#babel/preset-env',
{
useBuiltIns: 'usage',
corejs: { version: 3, proposals: true }
}
],
'#babel/preset-react',
'#babel/preset-flow'
];
const plugins = [
'lodash',
['#babel/plugin-transform-spread', { loose: true }],
['#babel/plugin-proposal-class-properties', { loose: true }],
'#babel/plugin-transform-runtime'
];
/** this is just for minimal working purposes,
* for testing larger applications it is
* advisable to cache the transpiled modules in
* node_modules/.bin/.cache/#babel/register* */
api.cache(false);
return {
presets,
plugins
};
};
You should delete .babel_cache folder that's create parallel to your output folder.
Related
I've recently added #babel/helper-annotate-as-pure to my list of babel plugins:
require('babel-plugin-macros'),
require('#babel/helper-annotate-as-pure').default,
require('babel-plugin-dev-expression'),
[
require('#babel/plugin-proposal-class-properties').default,
{
loose: true,
},
],
[require('#babel/plugin-proposal-decorators').default, { legacy: true }],
require('#babel/plugin-proposal-numeric-separator').default,
[
require('#babel/plugin-transform-runtime').default,
{
corejs: false,
helpers: true,
version: require('#babel/runtime/package.json').version,
regenerator: true,
useESModules: moduleFormat === 'esm',
} as RuntimeOptions,
],
require('#babel/plugin-syntax-dynamic-import').default,
require('#babel/plugin-proposal-optional-chaining').default,
require('#babel/plugin-proposal-nullish-coalescing-operator').default,
isDevelopment && require.resolve('react-refresh/babel'),
I previously used 'babel-plugin-annotate-pure-calls' but after adding the plugin I continually get the same error at different points:
Plugin/Preset did not return an object
If I comment out the plugin, everything works
#babel/helper-annotate-as-pure is a helper utility module that is part of Babel itself, it is not a plugin, so it cannot be used in the plugins array. All plugins in the #babel namespace start with plugin- in their name.
You'd have to see if babel-plugin-annotate-pure-calls, the original plugin you used, works properly.
I am using Protractor with Selenoid. I need to use the dockerized Windows images so that I can test Internet Explorer and Edge from Linux boxes.
I was able to make it work from curl by running:
curl -X POST http://127.0.0.1:4444/wd/hub/session -d '{"capabilities":{"browserName":"MicrosoftEdge","count":1,"alwaysMatch":{"browserName":"MicrosoftEdge","selenoid:options":{"enableVNC":true,"enableVideo":false,"enableLog":true,"logName":"edge-18.0.log"}}}}'
My protractor config looks like:
multiCapabilities: [
{
browserName: "MicrosoftEdge",
"alwaysMatch": {
browserName: "MicrosoftEdge",
"selenoid:options": {
enableVNC: true,
enableVideo: false,
enableLog: true,
logName: "edge-18.0.log"
}
}
}
]
But protractor send it over the selenoid server like this:
{
"desiredCapabilities": {
"browserName": "MicrosoftEdge",
"count": 1,
"alwaysMatch": {
"browserName": "MicrosoftEdge",
"selenoid:options": {
"enableVNC": true,
"enableVideo": false,
"enableLog": true,
"logName": "edge-18.0.log"
}
}
}
}
The issue is that desiredCapabilities should just be 'capabilities`. I have been looking everywhere trying to find out where is that created so that I can created some sort of flag to be able to switch it.
Any ideas?
Using Protractor 6.0 solve my issue, but broke all my tests.
I was able to keep using 5.4.1 by patching the selenium-webdriver package. Looking at the way Protractor 6 did it, I did it to Protractor 5.4.1:
I edited the file located at node_modules/selenium-webdriver/lib/webdriver.js and added the following:
// Capability names that are defined in the W3C spec.
const W3C_CAPABILITY_NAMES = new Set([
'acceptInsecureCerts',
'browserName',
'browserVersion',
'platformName',
'pageLoadStrategy',
'proxy',
'setWindowRect',
'timeouts',
'unhandledPromptBehavior',
]);
Then in the same file I modify the static createSession(executor, capabilities, opt_flow, opt_onQuit) method to add the following:
let W3CCaps = new Capabilities(capabilities);
for (let k of W3CCaps.keys()) {
// Any key containing a colon is a vendor-prefixed capability.
if (!(W3C_CAPABILITY_NAMES.has(k) || k.indexOf(':') >= 0)) {
W3CCaps.delete(k);
}
}
cmd.setParameter('capabilities', W3CCaps);
After all those changes the request getting to Selenoid is like this:
{
"desiredCapabilities": {
"browserName": "MicrosoftEdge",
"version": "18.0",
"enableVNC": true,
"enableVideo": false,
"count": 1
},
"capabilities": {
"browserName": "MicrosoftEdge"
}
}
And my Protractor 5 config looks like this:
multiCapabilities: [{
browserName: 'MicrosoftEdge',
version: '18.0',
enableVNC: true,
enableVideo: false
}]
Note:
So that I don't have to worry about refresh installs or updates I use the package patch-package (https://github.com/ds300/patch-package) to create a patch that is applied when any of those events happen. Here is a great video explaining how to use that package https://www.youtube.com/watch?v=zBPcVGr6XPk
I am using Babel 7.1 together with rollup (v0.67). This is my rollup config:
{
input: 'src/svg.js',
output: {
file: 'dist/myBundle.js',
name: 'myBundle',
sourceMap: true,
format: 'iife'
},
plugins: [
resolve({browser: true}),
commonjs(),
babel({
include: 'src/**',
runtimeHelpers: true,
babelrc: false,
presets: [["#babel/preset-env", {
modules: false,
targets: {
firefox: "63"
},
useBuiltIns: "usage"
}]],
plugins: [["#babel/plugin-transform-runtime", {
corejs: false,
helpers: true,
regenerator: true,
useESModules: true
}]]
})
]
}
I want to polyfill older browsers. According to the docs, I need to include babel-polyfill in my entry point which I did. Now babel should include only the polyfills needed (because of useBuiltIns: "usage"). However, even when specifying the newest Browsers as target, I get the full load of code into my bundle (10000 lines of code).
What I tried:
I tried useBuiltIns: "entry" which fixes it for newer browsers but its not what I want (it just includes all polyfills which are potentially needed by the browser no matter if they are actually used in the code).
change the order of the rollup plugins
not include the babel-polyfill import
I have no idea why this is happening. It would be great if someone could solve this issue. Its driving me crazy!
And if someone knows as a bonus why no sourcemap is generated I dont mind getting an answer for that, too
Hey I made a repo which explores a good babel/rollup setup utilising preset-env and useBuiltIns 'usage'.
// Rollup plugins
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
export default {
input : 'main.js',
output : {
file : 'app.js',
format : 'iife',
name : 'PROJECT'
},
plugins : [
resolve(),
babel({
exclude : 'node_modules/**',
presets : [[
'#babel/env', {
useBuiltIns : 'usage'
}
]],
plugins : [
'#babel/plugin-transform-runtime'
],
runtimeHelpers : true
}),
commonjs()
]
};
Take a look https://github.com/matt3224/rollup-babel7
If you can figure out how to reduce the output further submit a PR
I like how I can use http://browserl.ist/ to see what browsers the targets query will target in #babel/preset-env.
Is there any similar tools to list what Babel plugins (transforms etc.) the env preset actually includes?
I'm using Webpack as my bundler if it matters.
try add debug:true in #babel/preset-env options, it will list all plugin in use
{
"presets": [
[
"#babel/preset-env",
{
"debug": true,
"targets": {
"chrome": 49,
"firefox": 64,
"safari": 9,
"edge": 13,
"ios": 9
}
}
]
]
}
You can always check out the source for #babel/preset-env, namely the available-plugins.js file lists the available plugins in the preset.
It's just a simple config in your .babelrc or babel.config.js file.
"#babel/preset-env",
{
useBuiltIns: "usage",
debug: true, // this will make babel output actual transform plugins and polyfills in terminal
targets: {
chrome: "53",
},
corejs: 3,
},
But this will not work when you use webpack
As pointed out by #rabidpug, available-plugins.js lists all plugins.
However, which ones are being used depend on your config.
E.g.:
The shippedProposals config option is false by default. As per index.js, this already eliminates all files as listed in data/shipped-proposals.js.
Similarly, the recently added bugfixes option adds more plugins (until babel#8 comes along), listed in #babel/compat-data/plugin-bugfixes.
Solution
Luckily, preset-env has a debug option that just prints out all plugins used when the preset is invoked.
Just add debug to your preset-env options and it will list all plugins (and more).
For convinience, I wrote this little script that independently debugs your plugins list (given a custom set of preset-env options). Run it using node list-preset-env-plugins.js in a folder where you have babel installed:
// list-preset-env-plugins.js
const babelCore = require('#babel/core');
const presetEnv = require('#babel/preset-env').default;
/**
* Your preset-env options.
* #see https://babeljs.io/docs/en/babel-preset-env#options
*/
const presetEnvOptions = {
shippedProposals: true,
debug: true
};
/**
* #see https://github.com/babel/babel/blob/master/packages/babel-helper-plugin-utils/src/index.js
*/
const apiStub = {
version: babelCore.version,
assertVersion() { }
};
// invoke the preset
presetEnv(apiStub, presetEnvOptions);
I'm trying to do code splitting and lazy loading with webpack using the import() method
import('./myLazyModule').then(function(module) {
// do something with module.myLazyModule
}
I'm getting
'import' and 'export' may only appear at the top level
Note top level imports are working fine, i'm just getting an issue when I try and using the dynamic variant of import()
var path = require('path');
module.exports = {
entry: {
main: "./src/app/app.module.js",
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name]-application.js"
},
module: {
rules: [
{
test: /\.js$/,
use: [{
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}]
}
]
},
resolve : {
modules : [
'node_modules',
'bower_components'
]
},
devtool : "source-map"
}
EDIT:
If I change it so the syntax reads, it works.... but the chunk comments don't work to label the bundle. I'm confused because the documentation says the the following is depreciated.
The use of System.import in webpack did not fit the proposed spec, so
it was deprecated in webpack 2.1.0-beta.28 in favor of import().
System.import('./myLazyModule').then(function(module) {
// do something with module.myLazyModule
}
You need the plugin syntax-dynamic-import to be able to use the import() function with Babel.
Install it with:
npm install --save-dev #babel/plugin-syntax-dynamic-import
And add it to your plugins:
{
presets: ['es2015'],
plugins: ['#babel/plugin-syntax-dynamic-import']
}