Giter VIP home page Giter VIP logo

react-app-rewired-esbuild's Introduction

react-app-rewired-esbuild

Use esbuild in your create-react-app.

react-scripts When the project grows, the compilation speed is slow, and the development uses esbuild to improve the compilation speed.

It is recommended to use the development mode to ensure stability !!!

Features

  • Relpace babel-loader to esbuild-loader for faster build time
  • Relpace TerserPlugin to ESBuildMinifyPlugin for faster build time

Installation

npm i react-app-rewired-esbuild -D

Usage

This project is based on react-app-rewired.

/* config-overrides.js */

const rewiredEsbuild = require("react-app-rewired-esbuild");

module.exports = function override(config, env) {
  // your config ...
  return rewiredEsbuild()(config, env);
};

// use `customize-cra`
const { override } = require("customize-cra");

module.exports = override(rewiredEsbuild());

Options

specification esbuild-loader

ESBuildLoaderOptions

Type: object
Default:

{
    loader: useTypeScript ? 'tsx' : 'jsx',
    target: 'es2015',
}

ESBuildMinifyOptions

Type: object
Default:

{
    loader: useTypeScript ? 'tsx' : 'jsx',
    css: true,
}

onlyMinimizer

Type: boolean
Use only for minimizer. It is recommended to add this parameter to the production environment.

FQA

ReferenceError: React is not defined

Added react introduction in the first line of the error file,Originally, babel-plugin-react-app handled this situation, but esbuild did not.

Why is it faster?

Originally, create-react-app was compiled with babel, and esbuild would be faster to compile

License

MIT ยฉ fupengl

react-app-rewired-esbuild's People

Contributors

fupengl avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

react-app-rewired-esbuild's Issues

Trouble to add esbuild config on config-overrides.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const rewiredEsbuild = require("react-app-rewired-esbuild");
module.exports = function override(config, env) {
	console.log('REACT_JENKINS_JOB_NAME in react-app-rewired: ', process.env.REACT_JENKINS_JOB_NAME);
	console.log('REACT_JENKINS_BUILD_NUMBER in react-app-rewired: ', process.env.REACT_JENKINS_BUILD_NUMBER);

	return {
		...config,
		plugins: [
			...config.plugins,
			new HtmlWebpackPlugin({
				template: './public/index.html',
				jenkinsJobName: process.env.REACT_JENKINS_JOB_NAME,
				jenkinsBuildNumber: process.env.REACT_JENKINS_BUILD_NUMBER,
			}),
			new BundleAnalyzerPlugin({ defaultSizes: 'parsed' }),
		],
		resolve: {
			alias: {
				'bn.js': path.join(__dirname, 'node_modules/bn.js/lib/bn.js'),
			},
		},
	};
};

Hello, ๐Ÿ‘‹
I have config-overrides.js like above codes,
How actually add return rewiredEsbuild()(config, env); into my code ? to run esbuild ?
Can you please give a example of code ? thanks

How to tell if working?

I followed the README but not sure if the performance I'm getting is what's promised - seems to take about the same time, is there any way to check if esbuild is being run correctly for the dev server / prod builds?

Seems much slower than Vite for devserver, but I would expect them to take roughly the same amount of time as they're both using esbuild.

ReferenceError: React is not defined

I get a screen with "ReferenceError: React is not defined" error
There is something about it in the readme but It is not clear what I should do to fix it.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.