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.
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.
Interestingly, the plugin itself is still a development dependency only. It requires @babel/runtime is listed as a dependency in order to work though.
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.
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 .
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.
Assuming you have a running Babel environment:
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 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. 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" ] } }
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
.If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With