I'm trying to add react to a very large solution, but one component on the site uses preact. My current .bablerc is
{
"presets": ["env"],
"ignore": [
"**/what-input.js",
"**/HostedPCIAdapter.js",
"InstantPreview/**/*.js",
"Wishlist/**/*.js"
],
"plugins": [
"transform-object-rest-spread",
"transform-react-jsx"
]
}
Original .baberc looked like this:
{
"sourceMaps": true,
"presets": [],
"plugins": [
[
"transform-react-jsx",
{
"pragma": "preact.h"
}
],
"transform-object-assign",
[
"transform-es2015-classes",
{
"loose": true
}
],
"transform-es2015-arrow-functions",
"transform-es2015-block-scoping",
"transform-es2015-template-literals"
]
}
So can I add pragma back for just the wishlist feature? Any help would be appreciated. I'm using gulp as a taskrunner and webpack to build my assets.
Babel files can be nested in sub-directories with unique settings which is pretty cool stuff.
So if you have a folder structure like this:
app
reactCode
.babelrc
index.js
preactCode
.babelrc
index.js
You can add a separate .babelrc file for branch.
I don't think it's ideal but if you're working with a large monolithic solution that has lots of different frameworks and requirements it certainly can fix a lot of bugs and QA work.
Related
I am new to Babel+Webpack and have some confusion regarding .babelrc configuration.
FIRST CONFIGURATION
{
"presets": [
[
"#babel/env",
{
"modules": false,
"useBuiltIns": "usage",
"targets": "> 0.25%, not dead",
"corejs": {
"version": 3,
"proposals": true
}
}
]
],
"plugins": [
"#babel/transform-runtime"
]
}
SECOND CONFIGURATION:
{
"presets": [
[
"#babel/env",
{
"modules": false,
}
]
],
"plugins": [
[
"#babel/plugin-transform-runtime", //target environment are not supported
{
"corejs": 3,
"helpers": true,
"regenerator": true
}
]
]
}
Facts that are true for second configuration's are:
Increased bundle size
Core-js-pure will include ponyfills that will not pollute global environment.
My question is we are going to export a "umd" library for public use with a Library Name "XYZ" and i am confused which of the above settings are suitable as one thing really confuse me is that if the bundle i.e created at the end is minified and built completely on esm pattern(use-strict mode) and for public use they can access like "XYZ.method()", then how the second configuration is suitable and it stop polluting global namespace.
Can anyone explain me with an example and help me clearing this concept?
For libraries Rollup is a much better option than WebPack.
This a good starting point.
https://github.com/rollup/rollup-starter-lib
If you must use webpack, avoid using regenerater, as it adds a lot of bloat to the output of Babel, if you code needs it, then the consuming app should include it, so you don’t end up having it twice in the end app
Ran into this myself, in the past. Honestly, Webpack is terrible with anything that exports more than a single default, which is why you see most libraries use Rollup or Parcel for bundling.
I have multi packages in monorepo.
/pkg1
/pkg2
/pkg3
- react-app
- cypress
- src
- package.json
I am using #cypress/instrument-cra to collect coverage and it works only to cover the code inside react-app.
I need to go further because react-app is actually just a playground while the src has to be covered along with other packages that are used inside the react-app. I am importing packages as following:
import pkg1 from #myProject/pkg1
How can I use code coverage for pkg1?
I tried to config nyc but it didn't work
"nyc": {
"all": true,
"include": [
"node_modules"
],
"excludeNodeModules": false
}
Thanks!
Create .nycrc file in your root folder and:
{
"all": true,
"include": [
"pkg1/src/**"
],
"exclude": [
"**/test/**"
],
}
The following error is emitted in my Node JS/React JS application after upgrading Node JS to v.12. I'm currently using #babel/core 7.10.1. How should this error be resolved?
Here is my babel.config.js:
module.exports = {
presets: [
[
'#babel/preset-env',
{
targets: {
node: 'current',
},
},
],
'#babel/preset-react',
'#babel/preset-typescript',
],
plugins: [
'#babel/plugin-proposal-class-properties',
['#babel/plugin-proposal-decorators', { legacy: true }],
'#babel/plugin-proposal-export-default-from',
'#babel/plugin-proposal-export-namespace-from',
'#babel/plugin-syntax-dynamic-import',
'#babel/plugin-transform-react-constant-elements',
'#babel/plugin-transform-react-inline-elements',
],
ignore: ['node_modules', 'build'],
};
Try to remove "type": "module" from package.json.
I've spend many hours with no luck and finally found this commend in discussion:
https://github.com/manuelbieh/geolib/issues/208#issuecomment-556994420
You have ignore: ['node_modules', 'build'], maybe, that's the reason?
I had nested package.json files within my application. These package.json files defined dependencies. I believe that parts of the app were being transpiled with different versions of Babel. I flattened my application and removed the nested package.json files. This action solved my problem.
In Atom 1.18 every time I open the editor my .babelrc file defaults to the JSON file type, which makes syntax highlighting look way off. And I have to keep changing it back to the Babel type.
How to fix (temporarily):
Have to reset it every time I close and open the .babelrc file.
Now I realize this is a file that will be rarely touched, but would be helpful to know how to fix this for other file type.
There is a very specific way to set this up in the config.cson
https://discuss.atom.io/t/how-do-i-make-atom-recognize-a-file-with-extension-x-as-language-y/26539
http://flight-manual.atom.io/using-atom/sections/basic-customization/#configuring-with-cson
"*":
core:
customFileTypes:
"source.js.jsx": [
"js"
"es6"
"es"
"babel"
"babelrc"
"jsx"
]
The way I removed these errors was to just make the file JSON compatible.
Not the perfect solution but works.
//.babelrc
{
"plugins": [
"transform-class-properties"
],
"presets": [
["es2015", { "modules": false}],
"react",
],
}
I'm looking for a way to completely disable generator functions transform with babel. With babel 5 there was a blacklist option, but it seems that with babel 6 there is no way to do that (at least I did not find any documentation on the official website).
My current configuration
{
"presets": [
"react",
],
"plugins": [
"transform-object-rest-spread",
]
}
Disabling it like described here https://babeljs.io/docs/plugins/transform-regenerator/ did not help.
Any ideas?
Have you tried "exclude"? Like:
{
"presets": [
["env", {
"exclude": ["transform-regenerator"]
}]
]
}
Please see https://babeljs.io/docs/plugins/preset-env/#optionsexclude for details.