@iporaitech/react-scripts
Configuration and scripts for Create React App.
Last updated 3 months ago by hisa_py .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @iporaitech/react-scripts 
SYNC missed versions from official npm registry.

react-scripts

This package includes scripts and configuration used by Create React App

The original docs can be found at:

Backend integration

The build mechanism added in this fork is useful if you want to serve the bundles from a backend like Elixir/Phoenix, Ruby on Rails or similar, that already render HTML templates.

It provides a custom build script that uses as input the original react-scripts' webpack.config.js and outputs a config without:

  • HtmlWebpackPlugin because we are going to use the generated assets in our own index.html.
  • ManifestPlugin because each backend should generate its own manifest.
  • HotModuleReplacementPlugin because this plugin requires WebpackDevServer to work.

build:dev

Outputs bundles using Webpack in development mode.

This script can be called with:

yarn build:dev to generate bundles once

or

yarn build:dev --watch to run Webpack in watch mode.

yarn build:prod

Outputs bundles using Webpack in production mode.

Output

By default the bundles are generated into build/development or build/production dir inside of your CRA depending on the script called, but this can be changed with the following ENV vars:

  • CRA_BUILD_OUTPUT_PATH this variable sets the value of webpack's output.path.

  • CRA_BUILD_PUBLIC_PATH it sets publicPath in webpack config. It defaults to /.

These vars can also be set in .env files as described in the docs

Notice that the generated directories don't contain the static/ prefix used in the original react-scripts.

The name of the initial chunks, the ones that you should include using <script /> tags in your HTML, are always generated without chunkhash, even in production. The name of dynamic chunks, the ones used by code-splitting, do contain a chunkhash in production.

The generated initial .js chunks should be:

  • js/bundle.js
  • js/vendors~main.chunk.js
  • js/main.chunk.js

Additionally, if the output might include the following .css chunks:

  • css/main.chunk.css
  • css/vendors~main.chunk.css

You can take a look at the bundles and index.html generated by yarn build to compare with the ouptut of the custom scripts.

Usage

To create a new CRA app

create-react-app my-app --scripts-version @iporaitech/react-scripts

Or in an existing CRA app

$ yarn remove react-scripts
$ yarn add @iporaitech/react-scripts

and then adding the following scripts to your package.json

"build:dev": "react-scripts build-custom development",
"build:prod": "react-scripts build-custom production",

Example for Elixir/Phoenix

For a Elixir/Phoenix project you might want to use the following

$ export CRA_BUILD_OUTPUT_PATH=/your/app/priv/static
$ yarn build:dev --watch

And then add the script to your layout template

<body>
  <head>
    <!-- other head stuff here (not sure why there's no bundle.css. vendor~main not get generated in your app) -->
    <link rel="stylesheet" href="<%= static_path(@conn, "/css/vendor~main.chunk.css") %>">
    <link rel="stylesheet" href="<%= static_path(@conn, "/css/main.chunk.css") %>">
  </head>

  <!-- your body stuff here -->
  <script src="<%= static_path(@conn, "/js/bundle.js") %>"></script>
  <script src="<%= static_path(@conn, "/js/vendors~main.chunk.js") %>"></script>
  <script src="<%= static_path(@conn, "/js/main.chunk.js") %>"></script>
</body>

For production, don't forget to run mix phx.digest after running yarn build:prod, and let Phoenix take care of cache and compression stuff.

Development

This fork modifies the following files:

  • packages/react-scripts/README.md - add backend integration and instructions for this fork
  • packages/react-scripts/bin/react-scripts.js - add option to execute build-custom.js
  • packages/react-scripts/scripts/init.js - add 'build:dev' and 'build:prod' to appPackage.scripts.
  • packages/react-scripts/scripts/build-custom.js - contains the logic for custom builds for backend integration. If build.js changes in a new version, then checkout the changes and update build-custom.js accordingly.
  • packages/react-scripts/package.json - Updates the repo info; keep version in sync with respect to upstream.

Also, adds a backend integration section, the same as this README to:

  • packages/cra-template-typescript/template/README.md
  • packages/cra-template/template/README.md

See the custom_build.feature for specification of the backend integration feature.

Current Tags

  • 3.4.0-fix-1                                ...           latest (3 months ago)

8 Versions

  • 3.4.0-fix-1                                ...           3 months ago
  • 2.4.2                                ...           a year ago
  • 2.4.1                                ...           a year ago
  • 2.4.0                                ...           a year ago
  • 2.3.0                                ...           a year ago
  • 2.2.2                                ...           a year ago
  • 2.2.1                                ...           2 years ago
  • 2.1.1                                ...           2 years ago

Copyright 2014 - 2016 © taobao.org |