Webpack
raw-loader
implemented asbabel-plugin-macros
and SWC plugins
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.
Alternatively you can use SWC plugins and skip installing babel-plugins-macros
entirely.
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.
If you want to use custom encoding (by default it will use utf-8
), you can pass it to the second argument
import raw from "raw.macro";
const binary = raw("./path/to/binary", "binary");
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:
You can also use raw.macro
in a swc-based project (e.g: Next.js) by using the SWC plugins.
Due to how the plugins is loaded, you have to pass rootDir
option pointing to the root directory of your project (where your node_modules
directory lives). Typically it's enough to pass __dirname
.
// next.config.js
module.exports = {
experimental: {
swcPlugins: [
[
"raw.macro/swc",
{
rootDir: __dirname,
},
],
],
},
};
Note that currently SWC plugins only support reading text file from relative path and node_modules content. Using custom encoding or dynamic path import is not supported.
MIT