Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use babel-runtime in Babel 6?

I'm trying to create npm module and I can't find single instruction on official babeljs website. How do you use babel-runtime package? From name I'm guessing it should be placed in "dependencies" section of package.json, right?

Absolutely no information here: https://github.com/babel/babel/tree/master/packages/babel-runtime

Found one example here: https://strongloop.com/strongblog/javascript-babel-future/ but when I run "babel -h" it doesn't list --optional as a valid parameter.

like image 302
cosmosb Avatar asked Dec 03 '15 21:12

cosmosb


People also ask

What is Babel runtime used for?

Babel is a tool that helps you write code in the latest version of JavaScript. When your supported environments don't support certain features natively, Babel will help you compile those features down to a supported version.

Is Babel runtime required?

Interestingly, the plugin itself is still a development dependency only. It requires @babel/runtime is listed as a dependency in order to work though.

What is use of Babel plugin transform runtime?

This is where the @babel/plugin-transform-runtime plugin comes in: all of the helpers will reference the module @babel/runtime to avoid duplication across your compiled output. The runtime will be compiled into your build. Another purpose of this transformer is to create a sandboxed environment for your code.

How do I run Babel script?

Simply add a "scripts" field to your package. json and put the babel command inside there as build . This will run Babel the same way as before and the output will be present in lib directory, only now we are using a local copy. Alternatively, you can reference the babel cli inside of node_modules .


2 Answers

Rationale

When transpiling your code, Babel will actually inject helpers to emulate features not supported by the ES version you target.

For example: class MyClass {} leverages the inline helper _classCallCheck, which can also be accessed through require('babel-runtime/helpers/classCallCheck').

By default, those helpers are not shared between the compilation units (the files). The Babel team though it might be interesting to factorize them in one place, allowing to save space when they are used multiple times.

This issue has been addressed by creating the babel-plugin-transform-runtime plugin, which walks the AST and replaces the helpers injections by the appropriate requires of the babel-runtime module. That way the helpers are shared across the codebase and the duplication is avoided.

How to use it

Assuming you have a running Babel environment:

  1. Install babel-plugin-transform-runtime (as a devDependency), which transforms your code to remove the helpers and uses the ones in babel-runtime. You need to add it to the plugins array of your Babel configuration
  2. Install babel-runtime (as a dependency), which is the actual library babel-plugin-transform-runtime assumes you are going to have in your dependencies, it will be used by your transpiled code at runtime. You do not need to require it anywhere in your code.

Minimal snippet

  • npm run build compiles the lib folder into dist
  • npm start starts the dist folder (which depends on babel-runtime)

package.json

{   "scripts": {     "build": "babel lib --out-dir=dist",     "start": "node dist"   },   "dependencies": {     "babel-runtime": "^6.9.2"   },   "devDependencies": {     "babel-cli": "^6.10.1",     "babel-plugin-transform-runtime": "^6.9.0"   },   "babel": {     "plugins": [       "transform-runtime"     ]   } } 
like image 161
aymericbeaumet Avatar answered Oct 05 '22 17:10

aymericbeaumet


The runtime is optional, but like everything else in Babel 6, it is primarily enabled by adding a plugin. In this case, you need http://babeljs.io/docs/plugins/transform-runtime/

plugins: ["transform-runtime"] 
  • babel-runtime is a package that contains a polyfill and many other things that Babel can reference. You'd install it in your app with npm install babel-runtime
  • transform-runtime is a Babel plugin to process your source code and inject import foo from "babel-runtime" statements so that babel-runtime is actually used. You'd also install this with npm install babel-plugin-transform-runtime.
like image 35
loganfsmyth Avatar answered Oct 05 '22 19:10

loganfsmyth