blob: 46e3f9054a09ca985ed36b5e6f8d053c3c290787 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
---
layout: ../../layouts/content.astro
title: React + babel-plugin-import-global
published: false
---
<div class="notification">
This guide has an example repo:
<a href="https://github.com/snowpackjs/snowpack/examples/react-global-imports">examples/react-global-imports</a>
</div>
_Based on [app-template-react][app-template-react]_
Example of using Snowpack in conjuction with [babel-plugin-import-global][babel-plugin-import-global]. This is useful when you need to need to inject an import statement at the top of every file, such as React:
```jsx
// "import React from 'react'" no longer needed!
function MyComponent() {
// …
}
export default MyComponent;
```
To recreate this setup, follow 2 steps:
1. Create a [babel.config.js](./babel.config.js) file in the root of the project. Copy the settings shown.
2. Install [@snowpack/plugin-babel][snowpack-babel] and add it to [snowpack.config.js](./snowpack.config.js)
### ⚠️ Caveat
When you use [@snowpack/plugin-babel][snowpack-babel], you miss out on the faster builds that come from Snowpack‘s default JS builder, [esbuild][esbuild] (we don‘t run both together to avoid conflict). However, if you skip Babel, you will have to manually place `import` statements yourself at the top of every file.
We‘d recommend being explicit and manually managing every `import` statement yourself. You can simplify your setup, speed up your builds, and you might see benefits from being explicit. In order to do this, simply use our [React starter template][app-template-react]. No setup required.
But if you‘ve weighed the tradeoffs and decide that a slower build is worth it to get global import functionality, then start from the example here.
[app-template-react]: https://github.com/snowpackjs/snowpack/create-snowpack-app/app-template-react
[babel-plugin-import-global]: https://www.npmjs.com/package/babel-plugin-import-global
[esbuild]: https://esbuild.github.io/
[snowpack-babel]: https://github.com/snowpackjs/snowpack/plugins/plugin-babel
|
