I didn't find it in babel docs so asking here.
I want to use babel-rewire-plugin in my nodejs project.
I'm using babel by require hook:
require('babel/register')
and i'm wonder how to add babel-rewire-plugin to be used with this hook.
Does anyone know?
The require hook can take options. Or you can make a .babelrc file.
require('babel/register')({
plugins: ['babel-require-plugin']
});
Related
I'm looking for a Stylelint (and/or ESLint) plugin/rule that has a rule for avoiding the usage of obsolete CSS properties like grid-row-gap.
I'd like to believe someone already made this, but I couldn't find anything like it via Google, GitHub, or npm.
A plugin that also does the same for [warning] when using experimental properties/selectors would also be welcomed (e.g. :focus-visible).
Recently I started to develop a collection of rules in this plugin.
npm install #isnotdefined/stylelint-plugin
Refer the plugins and rules inside your .stylelintrc file:
{
"plugins":
[
"#isnotdefined/stylelint-plugin"
],
"rules":
{
"#isnotdefined/no-obsolete": true
}
}
At this point I need assistence to find more obsolete properties and values. Just in case someone knows a public list - let me know.
I created a new project with the create-react-app scaffold, and then I wanted to use the optional-chaining plug-in of babel. I installed the package according to the document and configured it, but vscode prompted grammatical errors. What can help me? please.
this is my package.json.
this is the problem:
If you are using CRA there is probably no way instead of ejecting project and applying Babel presets manually (according to https://github.com/facebook/create-react-app/issues/4604).
However, if you are decided to use eject there should be able to add plugin to babel config which is described here https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining. Probably applying stage-0 preset of Babel (https://babeljs.io/docs/en/babel-preset-stage-0) can also be a solution.
Edit: see also Null-safe property access (and conditional assignment) in ES6/2015
The error you are seeing is from Visual Studio Code's built-in JavaScript and/or TypeScript validator. In order to circumvent this, add this to your vscode settings.json file:
"javascript.validate.enable": false
Additionally you can disable the built-in TypeScript validator like this:
"typescript.validate.enable": false
Once those are disabled, eslint will take over and show you the proper errors when applicable.
How to configure babel in non-nodejs Environment/without npm ?
Use babel-standalone. Its documentation emphasize non-Node.js environments just like you do:
babel-standalone is a standalone build of Babel for use in non-Node.js environments, including browsers.
To confogure it, you can use data-presets and data-plugins attributes as also depicted in the Github page usage docs as follows:
<script type="text/babel" data-presets="es2015,stage-2">
I am looking to use the Facebook Static Analyzer Flow with my Ionic project. I am new to the different package managers as Ionic uses Webpack. Every tutorial I see for Flow indicates to configure Babel to use it, but it does not appear that Ionic uses Babel. Is there an issue configuring Flow with Ionic 3 with Babel?
All the references I have found for Typescript use either Babel or Webpack, which is why I am not sure that the two can work together.
There are two parts to Flow, the flow binary, and the flow preset for Babel.
You write JS with added flow type annotations, but the flow type annotations would not be acceptable to your JS interpretter (node, browser etc) - so the source files have to be transpiled to remove the Flow type information.
Babel is your transpiler, with the appropriate presets and plugins.
Webpack is used ahead of that chain to marshall other resources to get from source to build/distribution code.
Webpack can be configured with the babel-loader plugin so that Babel is run as the packing proceeds.
The babel-preset-flow is used to transpile the type-annotated code to plain JS.
So, Webpack uses Babel, Babel uses Flow preset.
There is also a comment mode for Flow which allows you to use Flow without having to do any transpiling which might also be a solution to your problem if you can't configure the tool stack to your liking.
I have one cli project and one boilerplate project. Now I want to install all babel plugins and presets inside the cli, and use the cli to transpile the boilerplate.
The problem is, I'd like to run cli commands in boilerplate directory, and babel always looks for plugins/presets from boilerplate/node_modules instead of cli/node_modules.
How can I config babel to search only cli/node_modules?
I've tried to set sourceRoot and moduleRoot, but neither work.
You can explicitly pass the resolved plugins, e.g.
transform(code, {
preset: [require('babel-preset-es2015')],
});