- author: CodeDonor
Using the ES Build Service: A Beginner's Guide to Transpiling with ES Build
If you're interested in transpiling with ES Build, you're in luck! The ES Build service is available inside of On Click, and in this article, we'll take you through how you can use it.
Removing the Console Log
The first step we need to take before transpiling our code is to remove the console.log.
Using the Ref and Transform
Once the console log is removed, we can do a ref.current.transform. The transform function is responsible for transpiling our code. It will not do any bundling or joining up of any different modules or handle import statements, but simply transpile the code.
Adding Arguments to Options
Setting the Target to ES 2015
Asynchronous Nature of the Transform Operation
The entire transform operation is asynchronous in nature, so it's important to mark the enclosing function as async and add an await right there. Once transpiling is done, we want to assign the result to a variable called 'result'.
Once we get the result object, we can see that it has any warnings that came out, a map for a source map, and code that is the transpiled code. We'll take that code and use it to update our code piece of state. After transpiling, we can then update the code's Piece of state, which will cause our component to render, and we should show that code inside the pre-element.
We can now do a test. Write in some amount of JSX and submit; we can see that the transpiled code shows up inside the pre-element.
ES Build is handling transpiling really well, but we still have to make sure that we're able to do some bundling too. If we put in an import statement, it is not really handled well, so we need to add in some additional code to make sure that we can deal with bundling, too.
ES Build makes transpiling a breeze, and bundling is also achievable with additional code. If you're a beginner looking to get started with transpiling, ES Build is a great place to start.