All Projects → dashed → react-app-rewire-babel-loader

dashed / react-app-rewire-babel-loader

Licence: MIT License
Rewire babel-loader loader in your create-react-app project using react-app-rewired.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to react-app-rewire-babel-loader

Create React Library
⚡CLI for creating reusable react libraries.
Stars: ✭ 4,554 (+22670%)
Mutual labels:  babel, create-react-app
React App
Create React App with server-side code support
Stars: ✭ 614 (+2970%)
Mutual labels:  babel, create-react-app
React Modern Library Boilerplate
Boilerplate for publishing modern React modules with Rollup
Stars: ✭ 285 (+1325%)
Mutual labels:  babel, create-react-app
Starter React Flux
Generate your React PWA project with TypeScript or JavaScript
Stars: ✭ 65 (+225%)
Mutual labels:  babel, create-react-app
react-app-rewire-webpack-bundle-analyzer
Add webpack-bundle-analyzer to a react-app-rewired config.
Stars: ✭ 24 (+20%)
Mutual labels:  create-react-app, react-app-rewired
babel-note
Some examples of babel
Stars: ✭ 12 (-40%)
Mutual labels:  babel, babel-loader
Ts Monorepo
Template for setting up a TypeScript monorepo
Stars: ✭ 459 (+2195%)
Mutual labels:  babel, create-react-app
React Redux Auth0 Kit
Minimal starter boilerplate project with CRA, React, Redux, React Router and Auth0 authentication
Stars: ✭ 115 (+475%)
Mutual labels:  babel, create-react-app
cra-multi-page-template
Create-react-app Multi-page application configuration template, including dva and ant-design, enabled PWA, compatible with IE11.
Stars: ✭ 17 (-15%)
Mutual labels:  create-react-app, react-app-rewired
react-app-rewire-workbox
Customise the service worker for create-react-app apps without ejecting - using Google's Workbox webpack plugins instead of the old sw-precache
Stars: ✭ 44 (+120%)
Mutual labels:  create-react-app, react-app-rewired
react-full-stack-starter
🎈Full-stack React boilerplate using `create-react-app`, Babel, Node.js, and express
Stars: ✭ 22 (+10%)
Mutual labels:  babel, create-react-app
nuxt-babel
Use normal .babelrc file with your Nuxt app
Stars: ✭ 32 (+60%)
Mutual labels:  babel
hello-3d-world
Plot 3d points, lines, and polygon on an svg. A demonstration of what you can do with the BareMinimum3d package
Stars: ✭ 53 (+165%)
Mutual labels:  create-react-app
babel-plugin-source-map-support
A Babel plugin which automatically makes stack traces source-map aware
Stars: ✭ 41 (+105%)
Mutual labels:  babel
react-flux-gulp-starter
A universal boilerplate for building React/Flux apps using Gulp and ES6.
Stars: ✭ 46 (+130%)
Mutual labels:  babel
djcra
Django ❤️ create-react-app integration example
Stars: ✭ 12 (-40%)
Mutual labels:  create-react-app
rollup-lib-bundler
Simple lib bundler
Stars: ✭ 13 (-35%)
Mutual labels:  babel
react-innertext
Returns the innerText of a React JSX object.
Stars: ✭ 37 (+85%)
Mutual labels:  babel
create-react-app-typescript-web-worker-setup
Using Web Workers in a TypeScript React project based on create-react-app.
Stars: ✭ 21 (+5%)
Mutual labels:  create-react-app
tmpnote
🍒 Share self-destructing encrypted notes
Stars: ✭ 22 (+10%)
Mutual labels:  create-react-app

react-app-rewire-babel-loader npm version

Rewire babel-loader loader in your create-react-app project using react-app-rewired.

Say there is an awesome library you found on npm that you want to use within your un-ejected create-react-app project, but unfortunately, it's published in ES6+ (since node_modules doesn't go through babel-loader), so you cannot really use it.

However, with react-app-rewired and this library, react-app-rewire-babel-loader, you can use that awesome library you've found.

See below for usage.

🚨 Not maintained for react-app-rewired v2.x.x+

I'm not maintaining this library for react-app-rewired v2.x.x+.

Instead, please consider using: https://github.com/arackaf/customize-cra

The following essentially emulates react-app-rewire-babel-loader which you can copy & paste into your override config file:

// NOTE as of customize-cra v0.2.11

const { babelInclude, getBabelLoader } = require("customize-cra");

const include = (config, ...includes) => {
    return babelInclude(includes)(config);
};

const babelExclude = exclude => config => {
  getBabelLoader(config).exclude = exclude;
  return config;
};

const exclude = (config, ...excludes) => {
    return babelExclude(excludes)(config);
};

Install

$ yarn add react-app-rewire-babel-loader
# npm v5+
$ npm install react-app-rewire-babel-loader
# before npm v5
$ npm install --save react-app-rewire-babel-loader

Usage

// config-overrides.js
// see: https://github.com/timarney/react-app-rewired

const path = require("path");
const fs = require("fs");

const rewireBabelLoader = require("react-app-rewire-babel-loader");

// helpers

const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);

module.exports = function override(config, env) {

  // white-list some npm modules to the babel-loader pipeline
  // see: https://webpack.js.org/configuration/module/#rule-include

  config = rewireBabelLoader.include(
    config,
    resolveApp("node_modules/isemail")
  );

  // black-list some modules from the babel-loader pipeline
  // see: https://webpack.js.org/configuration/module/#rule-exclude

  config = rewireBabelLoader.exclude(
    config,
    /(node_modules|bower_components)/
  );

  return config;

};

Development

Chores

  • Lint: yarn run lint
  • Prettier: yarn run pretty
  • Test: yarn run test
  • Pre-publish: yarn run prepublish
  • Build: yarn run build

License

MIT.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].