babel-plugin-source
Extract source code to strings at build-timeThe problem
You are writing code that needs to both function and be displayed as raw text. You shouldn't have to write and maintain the code snippet twice (once as real code, and again as a template string).
This solution
babel-plugin-source
allows you to extract arbitrary code blocks into string variables within the file they are located. This allows you to write the code once, then utilize it's raw text immediately in the same file. You can display it, log it, export it, etc.
Before:
let MyCompSource; // @source MyCompSourceconst MyComp = <div>Hello there!</div>;// @source MyCompSource
After:
let MyCompSource = `const MyComp = () => <div>Hello there!</div>`; const MyComp = <div>Hello there!</div>;
Table of Contents
Installation
This module is distributed via npm which is bundled with node and
should be installed as one of your project's devDependencies
:
npm install --save-dev babel-plugin-source
Usage
Before:
let MyCompSource; // @source MyCompSourceconst MyComp = <div>Hello there!</div>;// @Source
After:
let MyCompSource = `const MyComp = () => <div>Hello there!</div>`; const MyComp = <div>Hello there!</div>;
Configure with Babel
.babelrc
(Recommended)
Via .babelrc
Via CLI
babel --plugins source script.js
Via Node API
;
Examples
- React-Charts.js.org - Source code examples
FAQ
webpack loaders?
How is this different fromThis plugin was inspired by webpack's [raw-loader][raw-loader]. The benefit of
using this over that loader (or any other loader) is that it allows more fine-grained
control over the extraction process and integrates tightlyo with
your existing babel pipeline. This is also extremely useful if
you aren't bundling your code with webpack
, but still using
babel.
Other Solutions
I'm not aware of any, so if you are, please make a pull request and add it here!
Contributors
Thanks goes to these people (emoji key):
Tanner Linsley 💻 🎨 📖 💡 |
Kent C. Dodds 💬 💻 🤔 🔌 📢 🔧 |
---|
This project follows the all-contributors specification. Contributions of any kind welcome!
LICENSE
MIT