├── lerna.json ├── packages ├── react-app-rewire-lodash │ ├── index.js │ ├── package.json │ └── README.md ├── react-app-rewire-styled │ ├── index.js │ ├── package.json │ └── README.md ├── react-app-rewire-react-library │ ├── package.json │ ├── index.js │ └── README.md └── react-app-rewire-emotion │ ├── package.json │ ├── index.js │ └── README.md ├── package.json ├── README.md ├── LICENSE └── .gitignore /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "lerna": "2.0.0", 3 | "packages": ["packages/*"], 4 | "version": "independent", 5 | "npmClient": "yarn" 6 | } 7 | -------------------------------------------------------------------------------- /packages/react-app-rewire-lodash/index.js: -------------------------------------------------------------------------------- 1 | const { injectBabelPlugin } = require('react-app-rewired'); 2 | 3 | function rewireLodash(config, env, lodashBabelOptions = {}) { 4 | config = injectBabelPlugin(['lodash', lodashBabelOptions], config); 5 | return config; 6 | } 7 | 8 | module.exports = rewireLodash; 9 | -------------------------------------------------------------------------------- /packages/react-app-rewire-styled/index.js: -------------------------------------------------------------------------------- 1 | const { injectBabelPlugin } = require('react-app-rewired'); 2 | 3 | function rewireStyled(config, env, styledComponentsBabelOptions = {}) { 4 | config = injectBabelPlugin(['styled-components', styledComponentsBabelOptions], config); 5 | return config; 6 | } 7 | 8 | module.exports = rewireStyled; 9 | -------------------------------------------------------------------------------- /packages/react-app-rewire-react-library/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-app-rewire-react-library", 3 | "version": "0.1.1", 4 | "description": "Use create-react-app to build react libraries", 5 | "main": "index.js", 6 | "repository": "https://github.com/osdevisnot/react-app-rewire-contrib.git", 7 | "keywords": [], 8 | "author": "osdevisnot ", 9 | "license": "ISC" 10 | } 11 | -------------------------------------------------------------------------------- /packages/react-app-rewire-lodash/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-app-rewire-lodash", 3 | "version": "2.0.0", 4 | "description": "Add lodash babel plugin to create-react-app using react-app-rewired", 5 | "main": "index.js", 6 | "repository": "https://github.com/osdevisnot/react-app-rewire-contrib.git", 7 | "keywords": [], 8 | "author": "osdevisnot ", 9 | "license": "MIT", 10 | "dependencies": { 11 | "babel-plugin-lodash": "^3.2.11" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/react-app-rewire-emotion/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-app-rewire-emotion", 3 | "version": "4.0.0", 4 | "description": "Add emotion/babel babel plugin to create-react-app using react-app-rewired", 5 | "main": "index.js", 6 | "repository": "https://github.com/osdevisnot/react-app-rewire-contrib.git", 7 | "keywords": [], 8 | "author": "osdevisnot ", 9 | "license": "MIT", 10 | "peerDependencies": { 11 | "babel-plugin-emotion": "^8 || ^9" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/react-app-rewire-emotion/index.js: -------------------------------------------------------------------------------- 1 | const { injectBabelPlugin } = require('react-app-rewired'); 2 | 3 | function rewireEmotion(config, env, emotionBabelOptions = {}) { 4 | config = injectBabelPlugin(['emotion', emotionBabelOptions], config); 5 | return config; 6 | } 7 | 8 | function createEmotionRewire(emotionBabelOptions) { 9 | return function (config, env) { 10 | return rewireEmotion(config, env, emotionBabelOptions); 11 | }; 12 | } 13 | 14 | module.exports.rewireEmotion = rewireEmotion; 15 | module.exports.createEmotionRewire = createEmotionRewire; 16 | -------------------------------------------------------------------------------- /packages/react-app-rewire-styled/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-app-rewire-styled", 3 | "version": "1.0.0", 4 | "description": "Add styled-components babel plugin to create-react-app using react-app-rewired", 5 | "main": "index.js", 6 | "repository": "https://github.com/osdevisnot/react-app-rewire-contrib.git", 7 | "keywords": [], 8 | "author": "osdevisnot ", 9 | "license": "MIT", 10 | "dependencies": { 11 | "babel-plugin-styled-components": "^1.2.0" 12 | }, 13 | "peerDependencies": { 14 | "react-app-rewired": "^1.2.5", 15 | "styled-components": "^2.1.2" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-app-rewire-contrib", 3 | "version": "0.1.2", 4 | "private": true, 5 | "repository": "https://github.com/osdevisnot/react-app-rewire-contrib.git", 6 | "author": "osdevisnot ", 7 | "license": "MIT", 8 | "scripts": { 9 | "presetup": "git clean -fdX", 10 | "setup": "yarn", 11 | "postsetup": "lerna bootstrap", 12 | "prepub": "yarn run setup", 13 | "pub": "lerna publish", 14 | "updates": "ncu && lerna exec -- ncu" 15 | }, 16 | "peerDependencies": { 17 | "react-app-rewired": "^1.2.7" 18 | }, 19 | "devDependencies": { 20 | "lerna": "^2.0.0", 21 | "npm-check-updates": "^2.14.2" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-app-rewire-contrib 2 | A collection of rewires for [react-app-rewired](https://github.com/timarney/react-app-rewired) 3 | 4 | ## Packages in this collection 5 | 6 | ### [react-app-rewire-emotion](packages/react-app-rewire-emotion) 7 | Add emotion/babel babel plugin to create-react-app using [react-app-rewired](https://github.com/timarney/react-app-rewired) 8 | 9 | ### [react-app-rewire-lodash](packages/react-app-rewire-lodash) 10 | Add lodash babel plugin to create-react-app using [react-app-rewired](https://github.com/timarney/react-app-rewired) 11 | 12 | ### [react-app-rewire-react-library](packages/react-app-rewire-react-library) 13 | Build react libraries with create-react-app using [react-app-rewired](https://github.com/timarney/react-app-rewired) 14 | 15 | ## Authors 16 | [osdevisnot](https://github.com/osdevisnot) and [contributors](https://github.com/osdevisnot/react-app-rewire-contrib/graphs/contributors). 17 | 18 | ## License 19 | Licensed under MIT License, Copyright @ 2017 osdevisnot. See [LICENSE.md](LICENSE.md) for more details. 20 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 osdevisnot 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Lock files 9 | yarn.lock 10 | package-lock.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | 24 | # nyc test coverage 25 | .nyc_output 26 | 27 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 28 | .grunt 29 | 30 | # Bower dependency directory (https://bower.io/) 31 | bower_components 32 | 33 | # node-waf configuration 34 | .lock-wscript 35 | 36 | # Compiled binary addons (http://nodejs.org/api/addons.html) 37 | build/Release 38 | 39 | # Dependency directories 40 | node_modules/ 41 | jspm_packages/ 42 | 43 | # Typescript v1 declaration files 44 | typings/ 45 | 46 | # Optional npm cache directory 47 | .npm 48 | 49 | # Optional eslint cache 50 | .eslintcache 51 | 52 | # Optional REPL history 53 | .node_repl_history 54 | 55 | # Output of 'npm pack' 56 | *.tgz 57 | 58 | # Yarn Integrity file 59 | .yarn-integrity 60 | 61 | # dotenv environment variables file 62 | .env 63 | 64 | # IDEs 65 | .idea 66 | .vscode 67 | -------------------------------------------------------------------------------- /packages/react-app-rewire-lodash/README.md: -------------------------------------------------------------------------------- 1 | # react-app-rewire-lodash 2 | Add lodash babel plugin to create-react-app using react-app-rewired 3 | 4 | Add the `lodash` to `create-react-app` app via [react-app-rewired](https://github.com/timarney/react-app-rewired) 5 | 6 | ## Installation 7 | ``` 8 | yarn add --dev react-app-rewire-lodash 9 | ``` 10 | OR 11 | ``` 12 | npm install --save-dev react-app-rewire-lodash 13 | ``` 14 | 15 | ## Usage 16 | In the `config-overrides.js` you created for `react-app-rewired` add this code: 17 | 18 | ``` 19 | const rewireLodash = require('react-app-rewire-lodash'); 20 | 21 | /* config-overrides.js */ 22 | module.exports = function override(config, env) { 23 | return rewireLodash(config, env, { ...babelPluginOptions }); 24 | } 25 | ``` 26 | 27 | ## Usage with Storybook 28 | When using `@storybooks/storybook` with CRA via `getstorybook`, create a `webpack.config.js` file in `.storybook` folder and add this code: 29 | 30 | ``` 31 | const rewireLodash = require('react-app-rewire-lodash'); 32 | 33 | module.exports = function override(config, env) { 34 | return rewireLodash(config, env, { ...babelPluginOptions }); 35 | }; 36 | ``` 37 | 38 | ## License 39 | Licensed under MIT License, Copyright @ 2017 osdevisnot. See [LICENSE.md](LICENSE.md) for more details. 40 | -------------------------------------------------------------------------------- /packages/react-app-rewire-styled/README.md: -------------------------------------------------------------------------------- 1 | # react-app-rewire-styled 2 | Add styled-components babel plugin to create-react-app using react-app-rewired 3 | 4 | Add the `styled-components` to `create-react-app` app via [react-app-rewired](https://github.com/timarney/react-app-rewired) 5 | 6 | ## Installation 7 | ``` 8 | yarn add --dev react-app-rewire-styled 9 | ``` 10 | OR 11 | ``` 12 | npm install --save-dev react-app-rewire-styled 13 | ``` 14 | 15 | ## Usage 16 | In the `config-overrides.js` you created for `react-app-rewired` add this code: 17 | 18 | ``` 19 | const rewireStyled = require('react-app-rewire-styled'); 20 | 21 | /* config-overrides.js */ 22 | module.exports = function override(config, env) { 23 | return rewireStyled(config, env, { inline: true }); 24 | } 25 | ``` 26 | 27 | ## Usage with Storybook 28 | When using `@storybooks/storybook` with CRA via `getstorybook`, create a `webpack.config.js` file in `.storybook` folder and add this code: 29 | 30 | ``` 31 | const rewireStyled = require('react-app-rewire-styled'); 32 | 33 | module.exports = function override(config, env) { 34 | return rewireStyled(config, env, { inline: true }); 35 | }; 36 | ``` 37 | 38 | ## Inspirations 39 | [react-app-rewire-styled-components](https://github.com/withspectrum/react-app-rewire-styled-components) by @mxstbr 40 | 41 | ## License 42 | Licensed under MIT License, Copyright @ 2017 osdevisnot. See [LICENSE.md](LICENSE.md) for more details. 43 | -------------------------------------------------------------------------------- /packages/react-app-rewire-react-library/index.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | const rewireReactLibrary = (config, env, options, overrideConfig = false) => { 4 | if (String(overrideConfig).toLowerCase() === 'true') { 5 | /** 6 | * Determine Library Name based on package name 7 | * basename will omit scope name from npm scoped packages 8 | */ 9 | const libraryName = path.basename(options.name); 10 | /** 11 | * Read the entry and output filename from package.json's module and main properties 12 | * Why? Read here: https://github.com/dherman/defense-of-dot-js/blob/master/proposal.md#typical-usage 13 | */ 14 | const entryFile = options.module; 15 | const outFile = path.basename(options.main); 16 | const outDir = options.main.replace(outFile, ''); 17 | /** 18 | * add library configurations to webpack config 19 | */ 20 | config.output.library = libraryName; 21 | config.output.libraryTarget = 'commonjs'; 22 | /** 23 | * Change the webpack entry and output path 24 | */ 25 | config.entry = { [libraryName]: path.resolve(entryFile) }; 26 | config.output.filename = outFile; 27 | config.output.path = path.resolve(outDir); 28 | /** 29 | * Add all package dependencies as externals as commonjs externals 30 | */ 31 | let externals = {}; 32 | Object.keys(options.dependencies).forEach(key => { 33 | externals[key] = `commonjs ${key}`; 34 | }); 35 | config.externals = externals; 36 | /** 37 | * Clear all plugins from CRA webpack config 38 | */ 39 | config.plugins = []; 40 | } 41 | return config; 42 | }; 43 | 44 | module.exports = rewireReactLibrary; 45 | -------------------------------------------------------------------------------- /packages/react-app-rewire-emotion/README.md: -------------------------------------------------------------------------------- 1 | # react-app-rewire-emotion 2 | Add emotion/babel babel plugin to create-react-app using react-app-rewired 3 | 4 | Add the `emotion/babel` to `create-react-app` app via [react-app-rewired](https://github.com/timarney/react-app-rewired) 5 | 6 | ## Installation 7 | ``` 8 | yarn add --dev react-app-rewire-emotion 9 | ``` 10 | OR 11 | ``` 12 | npm install --save-dev react-app-rewire-emotion 13 | ``` 14 | 15 | ## Usage 16 | In the `config-overrides.js` you created for `react-app-rewired` add this code: 17 | 18 | ``` 19 | const { rewireEmotion } = require('react-app-rewire-emotion'); 20 | 21 | /* config-overrides.js */ 22 | module.exports = function override(config, env) { 23 | return rewireEmotion(config, env, { inline: true }); 24 | } 25 | ``` 26 | 27 | If you are using `compose` utility provided by `react-app-rewired` to add multiple rewires, use this code: 28 | ``` 29 | const { compose } = require('react-app-rewired'); 30 | const { createEmotionRewire } = require('react-app-rewire-emotion'); 31 | 32 | /* config-overrides.js */ 33 | module.exports = function override(config, env) { 34 | const rewires = compose( 35 | createRewireForSomeOtherPlugin(), 36 | // ... place more rewires 37 | createEmotionRewire({ inline: true }), 38 | ); 39 | return rewires(config, env); 40 | }; 41 | ``` 42 | 43 | ## Usage with Storybook 44 | When using `@storybooks/storybook` with CRA via `getstorybook`, create a `webpack.config.js` file in `.storybook` folder and add this code: 45 | 46 | ``` 47 | const rewireEmotion = require('react-app-rewire-emotion'); 48 | 49 | module.exports = function override(config, env) { 50 | return rewireEmotion(config, env, { inline: true }); 51 | }; 52 | ``` 53 | 54 | ## Inspirations 55 | [react-app-rewire-styled-components](https://github.com/withspectrum/react-app-rewire-styled-components) by @mxstbr 56 | 57 | ## License 58 | Licensed under MIT License, Copyright @ 2017 osdevisnot. See [LICENSE.md](LICENSE.md) for more details. 59 | -------------------------------------------------------------------------------- /packages/react-app-rewire-react-library/README.md: -------------------------------------------------------------------------------- 1 | # react-app-rewire-react-library 2 | Use create-react-app to build react libraries. 3 | 4 | This gives you ability to reuse most of CRA setup for building your libraries. 5 | 6 | > This package is spin off of [react-app-rewire-create-react-library](https://github.com/osdevisnot/react-app-rewire-create-react-library) in that it accepts all the [conventions](https://github.com/osdevisnot/react-app-rewire-create-react-library#conventions) through configuration options. 7 | 8 | ## Installation 9 | ``` 10 | yarn add --dev react-app-rewire-react-library 11 | 12 | # or use npm if you don't have yarn yet 13 | 14 | npm install --save-dev react-app-rewire-react-library 15 | ``` 16 | 17 | ## Usage 18 | In the `config-overrides.js` you created for [react-app-rewired](https://github.com/timarney/react-app-rewired) add this code: 19 | 20 | ``` 21 | const rewireCreateReactLibrary = require('react-app-rewire-react-library'); 22 | 23 | module.exports = function override(config, env) { 24 | config = rewireCreateReactLibrary(config, env); 25 | return config; 26 | }; 27 | ``` 28 | 29 | In `package.json`, add a separate npm script to build library 30 | 31 | ``` 32 | { 33 | "scripts": { 34 | ... 35 | "build-library": "react-app-rewired build --library", 36 | ... 37 | } 38 | } 39 | ``` 40 | 41 | And you can now use CRA to build your library 💪 42 | 43 | ## Configurations 44 | 45 | name: name of the library / package. 46 | module: name of entry file for webpack. 47 | main: output file for webpack config. 48 | dependencies: list of dependencies to be added as externals to webpack config. 49 | 50 | Although you can pass these options via configuration, it is usually recommended to package the package json config as is. For example: 51 | 52 | ``` 53 | const rewireReactLibrary = require('react-app-rewire-react-library'); 54 | const pkg = require('./package.json'); 55 | 56 | module.exports = function(config, env) { 57 | return rewireReactAppLibrary(config, env, pkg, process.env.ENCW_BUILD_LIB); 58 | }; 59 | ``` 60 | 61 | where package.json has below configurations: 62 | ``` 63 | { 64 | "module": "./src/module.js", 65 | "main": "./build/main.js", 66 | "dependencies": { 67 | "lodash": "4.17.4", 68 | "react": "15.6.1", 69 | "react-dom": "15.6.1" 70 | } 71 | } 72 | ``` 73 | 74 | ## Caveats 75 | 76 | Setting `main` file to be outside of `build` folder would cause CRA to throw error when reporting file sizes. To avoid this, always set `"main"` to be inside `build` folder. For example: 77 | ``` 78 | # GOOD: uses build directory for output 79 | "main": "build/my-library.js", 80 | 81 | # BAD: uses dist directory for output 82 | "main": "dist/my-library.js", 83 | ``` 84 | 85 | `public` folder always gets copied over to build even for library builds. This is currently handled and defaulted inside CRA, there is no way to override this at the moment. However, you can use `.npmignore` to avoid publishing these files to NPM: 86 | ``` 87 | # .npmignore 88 | 89 | ** 90 | !build/*.js 91 | !build/*.map 92 | ``` 93 | 94 | ## License 95 | Licensed under the MIT License, Copyright @ 2017 osdevisnot. See LICENSE.md for more information. 96 | --------------------------------------------------------------------------------