babel-plugin-source
Extract source code to strings at build-time
Last updated 4 months ago by tannerlinsley .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install babel-plugin-source 
SYNC missed versions from official npm registry.

babel-plugin-source

Extract source code to strings at build-time

Build Status Code Coverage version downloads MIT License

All Contributors PRs Welcome Donate Code of Conduct Examples

Star on GitHub Watch on GitHub Tweet

The 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 MyCompSource
const 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 MyCompSource
const MyComp = () => <div>Hello there!</div>;
// @Source

After:

let MyCompSource = `const MyComp = () => <div>Hello there!</div>`;

const MyComp = () => <div>Hello there!</div>;

Configure with Babel

Via .babelrc (Recommended)

.babelrc

{
  "plugins": ["source"]
}

Via CLI

babel --plugins source script.js

Via Node API

require("babel-core").transform("code", {
  plugins: ["source"]
});

Examples

FAQ

How is this different from webpack loaders?

This 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

Current Tags

  • 0.0.6                                ...           latest (4 months ago)

6 Versions

  • 0.0.6                                ...           4 months ago
  • 0.0.5                                ...           4 months ago
  • 0.0.4                                ...           5 months ago
  • 0.0.3                                ...           5 months ago
  • 0.0.2                                ...           2 years ago
  • 0.0.1                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 12
Last Day 0
Last Week 12
Last Month 21
Dependencies (6)
Dependents (1)

Copyright 2014 - 2017 © taobao.org |