rm

raw.macro

Read file contents at build time via babel-plugin-macros. webpack-less raw-loader

Showing:

Popularity

Downloads/wk

4.3K

GitHub Stars

123

Maintenance

Last Commit

1mo ago

Contributors

6

Package

Dependencies

1

Size (min+gzip)

54.0KB

License

MIT

Type Definitions

Built-In

Tree-Shakeable

No?

Categories

Readme

raw.macro

Actions Status Babel Macro

Webpack raw-loader implemented as babel-plugin-macros

Installation

In order to use raw.macro in your own project, you can use one of the following commands:

$ yarn add --dev raw.macro
# or
$ npm install --save-dev raw.macro

Make sure babel-plugin-macros already installed. If you're using Create React App, it's installed by default.

Usage

raw.macro is similar to Node’s require call:

import raw from "raw.macro";

const markdown = raw("./README.md");

Note: Because raw.macro uses babel internally to replace raw() calls, your transpiled code won't be changed if you only change the file that you import. This is because from babel perspective, your JS file is unchanged

One workaround that you can do that doesn't involve restarting your build system is making small changes where you put raw() calls, for example by adding console.log() with different content.

Dynamic path import

You can also use import dynamic path using template literal. You can even use them inside a function / React component!

import raw from "raw.macro";

function Article(props) {
  const content = raw(`../content/${props.locale}.md`);
  return <Markdown content={content} />;
}

This method has 2 caveats:

  1. You can only use up to two variables inside template literal. 1 for directory name, and 1 for file name.
  2. Using dynamic path import will includes all files that matches your dynamic path, which can make your JS bundle a lot bigger. This is also partly the reason of limitation described in #1

License

MIT

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100