@kall/babel-preset-react-native-web-quick
v1.4.1
Published
Babel preset that configures itself for both metro/react-native and webpack/react-native-web
Downloads
22
Readme
babel-preset-react-native-web-quick
A babel preset that configures itself for both metro with react-native and webpack with react-native-web. Use this instead of module:metro-react-native-babel-preset
.
This actually doesn't work as well as it originally seemed to, so probably don't use it and just copy and paste this bit into your babel conf:
module.exports = ({ caller }, { noPresetEnv = false }) => {
// is either "metro" or "babel-loader"
const runningIn = caller(({ name }) => name);
return {
/* your config here */
};
};
Usage
Install with npm. core-js@3 is a peer dependency and you might need to install it seperately.
npm install --save-dev @kall/babel-preset-react-native-web-quick
npm install --save-dev core-js@3
Add this babel.config.js
to your project:
module.exports = {
presets: ["@kall/babel-preset-react-native-web-quick"]
};
If you want to provide your own preset env config (in babel.config.js
or babel-loader
config, etc), you can exclude @babel/preset-env
with the option noPresetEnv
.
module.exports = {
presets: [
["@kall/babel-preset-react-native-web-quick", { noPresetEnv: true }]
]
};
Behaviour
When bundling with metro, it simply includes module:metro-react-native-babel-preset
so it shouldn't mess with your normal react native build.
When bundling with webpack/babel-loader, it includes the presets for typescript and flow, the react-native-web plugin, and the plugins from module:metro-react-native-babel-preset
that aren't better handled by @babel/preset-env
: react/jsx specific stuff and proposal features. It also includes @babel/preset-env
set up to automatically pick up .browserslistrc
or browserlist
key in package.json
and include appropriate polyfills.
When running in any other environment, it falls back to the same config as for webpack.
Using with webpack
With this preset, you can bundle a basic react native app for the web with very little or technically no webpack config.
You need to install at least webpack
, babel-loader
and probably babel-cli
.
A minimal webpack.config.js
would be:
const path = require("path");
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx|tsx|ts|mjs)$/,
include: [path.resolve(__dirname, "src")],
use: {
loader: "babel-loader"
}
}
]
},
resolve: {
extensions: [
".web.js",
".js",
".web.ts",
".ts",
".web.tsx",
".tsx",
".web.mjs",
".mjs"
]
}
};
And technically no config file with this command (doesn't work great though)
npx webpack --module-bind js=babel-loader
Don't forget to add a .browserslistrc
to your root directory or your bundle will be huge. For example:
>0.5%
not ie 11
not samsung < 8
Changelog
- 1.4.1 add note to readme
- 1.4.0 require() all babel presets and plugins so they can be resolved even if they are installed in nested node_modules. Is this what you're supposed to do? Well it works...
- 1.3.1 actually add it as a dependency, should have started on 0.x
- 1.3.0 make core-js a peer dependecy
- 1.2.0 add
babel-plugin-react-native-web
as dependency, oops - 1.1.0 add
babel-plugin-module-resolver
as dependency - 1.0.0 Initial Release