Hi there,

I've been working on a plugin over this past weekend and was just trying to make some transformations to TemplateLiterals but I'm confused about the difference between the raw value and the cooked value inside the TemplateElement. When debugging, I can see that they are essentially the same value and so I just decided to update both for my plugin. However, I don't know if that's okay to do and wanted to know what the difference was between the two.

I took a look at the babel-handbook that's recommended and it was definitely helpful for getting started but I could not find any mention of what a cooked value is.

Here's the interface of TemplateLiteral and TemplateElement in case you need a refresher (taken from the typescript types):

export interface TemplateElement extends BaseNode {
  type: "TemplateElement";
  value: { raw: string, cooked?: string };
  tail: boolean;
}

export interface TemplateLiteral extends BaseNode {
  type: "TemplateLiteral";
  quasis: Array<TemplateElement>;
  expressions: Array<Expression>;
}

I'm currently working on a preact app that connects with firebase.

My problem is this

Since adding firebase to the project build times get seriously affected, jumping from an average of 10s to almost a minute.

From what I read online this is merely an information and not an error (kinda obvious with the 'Note:' bit).

Question: Is there any way to disable optimization for specific modules?

Thanks

I recently wrote a babel transform that allows you to use inline functions in the render method of React components without wastefully re-rendering pure components:

https://github.com/flexport/reflective-bind

Here is the blog post that explains the motivation and the high level logic of the babel transform:

https://flexport.engineering/ending-the-debate-on-inline-functions-in-react-8c03fabd144

Would love some feedback on the code and am open to suggestions/contributions to make it better!

I assume so since yellow is Babel's color. Coworkers and myself have always argued on how to pronounce 'Babel' and I think this will finally settle the pronunciation.

https://adropincalm.com/blog/babel-in-less-than-5-mins/

This introduction cover some of the core ideas such as `@babel/core`, `@babel/cli`, plugins, presets and the config file.

Hi I'm getting this error and I'm using babel 6.24 version and not using webpack or any module bundler for that matter. I'm running a Windows 10 Machine. Can any one please help me resolve this

I've been doing front-end web development for a little over a year now and I'm beginning to develop a sense of why Babel exists. I'm hoping the community can validate my understanding of some of the primary uses for Babel. Two that I can think of are:

1. Support for older browsers (this may soon be a thing of the past correct?)

2. In development/production, usage of new JS features not yet released (e.g. https://github.com/tc39/proposal-class-fields)

Is my thinking along the right track? Are there any other Babel use cases that I'm not thinking of?

Babel 7's TypeScript support seems appropriate for existing projects that wish to adopt Typescript within an existing tool chain. For new projects, though, I consider Babel + TypeScript to be adding complexity without adding value over TypeScript's out-of-the-box tsc compiler. What is your opinion?

Quick question for you guys (hopefully). I'm still somewhat new to babel, and I'm having trouble finding a good solution for solving all of my polyfill woes. I'm shooting for IE10 compatibility for my reactjs project, and I've run into three separate issues with polyfills, two of which I've solved in two different ways based on googling. The third one seems solvable, but in yet a different way. So I'm hoping someone can point me to a single solution that will solve all 3 of my issues in a consistent way that I can apply going forward.

My three issues are promises, Object.assign, and Object.values. I solved the promise issue by using npm to install es6-promise, and then adding this to my index.js file: require('es6-promise').polyfill(); Problem solved.

Object.assign I solved by adding this to my babel options:

plugins: [require('babel-plugin-transform-object-assign')], Problem solved, albeit a completely different way.

So now I'm working on getting Object.values working, and a post here seems to suggest the right way is to add the es2017 preset to my babel config. YET A THIRD way to add a polyfill. I haven't bothered to actually test this solution out yet as I'd really like to solve all three of these in the same exact way.

Sorry if I'm not using the right terminology for any of this, and thanks in advance for any advice. I'll also be cross-posting to /r/webpack, hopefully no one minds.

Hi, everyone. We recently set up a Discord server for all things JavaScript and it’s called SpeakJS. It’s just starting out but there are already some great conversations going on. It’s going to be heavily community-driven, meaning that it’s the users who will decide the direction it’s taken. If you want a text channel for a new library then ask and it’ll be created; if you want a voice channel for pairing up with other members to review each other’s code then you’ll get it.

As the creator, one thing I can say for certain is that it’s a server that welcomes everyone. Whether you’re considering learning JavaScript or you’re a developer with years of experience there’ll be a place for you. The idea for the server came when browsing posts on here and seeing all the questions people had about JavaScript. With this server, we can ask these questions in dedicated text channels and have open, often real-time, discussions. I believe the Discord team are also considering adding screen-sharing so it’s exciting to imagine how beneficial something like that would be in a server that’s all about learning from each other.

We now have a name, we’re working on a nice logo, and we’ve already started creating roles for some of the regular users – moderators, trusted members, etc. Whatever you think is best.

Communities can’t start without people giving something a chance so please join, say hello, and help get this party started. We’re looking forward to talking about all things JavaScript.

Here’s the link – https://discord.gg/dAF4F28

I have react component with the .jsx extension. I am importing it another file let's say app.js. Now I want to import this app.js file in index.js file which is supposed to run on a NodeJS environment. I will be running some tests for the jsx component inside the index.js file.

But the issue I'm facing while importing app.js inside index.js is "unrecognised extension .jsx". The jsx file and app.js file are in a package of type "module" and the index.js file is also inside a package of type "module". I've tried all kinds of transpiling with presets and env with Babel. But still the issue persists. I'm new to this Babel thing. Any help would be appreciated.

I have a babel plugin that transforms my code into a code that is again transformed by some other babel plugin from a totally different library. How can I make sure that the other babel plugin runs only after my babel plugin is done tranforming?