Skip to content
This repository was archived by the owner on Jan 4, 2022. It is now read-only.

Commit d9b593d

Browse files
authored
merge library code (#6)
1 parent 6e3163e commit d9b593d

File tree

7 files changed

+159
-1605
lines changed

7 files changed

+159
-1605
lines changed

.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@ npm-debug.log*
55
yarn-debug.log*
66
yarn-error.log*
77

8+
# Lock files
9+
yarn.lock
10+
package-lock.json
11+
812
# Runtime data
913
pids
1014
*.pid

packages/react-app-rewire-emotion/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
{
22
"name": "react-app-rewire-emotion",
33
"version": "1.0.0",
4+
"description": "Add emotion/babel babel plugin to create-react-app using react-app-rewired",
45
"main": "index.js",
56
"repository": "https://github.com/osdevisnot/react-app-rewire-contrib.git",
7+
"keywords": [],
68
"author": "osdevisnot <osdevisnot@gmail.com>",
79
"license": "MIT",
810
"peerDependencies": {

packages/react-app-rewire-lodash/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
{
22
"name": "react-app-rewire-lodash",
33
"version": "1.0.0",
4+
"description": "Add lodash babel plugin to create-react-app using react-app-rewired",
45
"main": "index.js",
56
"repository": "https://github.com/osdevisnot/react-app-rewire-contrib.git",
7+
"keywords": [],
68
"author": "osdevisnot <osdevisnot@gmail.com>",
79
"license": "MIT",
810
"dependencies": {
Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
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.
Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
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+
42+
console.log('==> config : ', config);
43+
return config;
44+
};
45+
46+
module.exports = rewireReactLibrary;
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"name": "react-app-rewire-react-library",
3+
"version": "0.0.0",
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 <osdevisnot@gmail.com>",
9+
"license": "ISC"
10+
}

0 commit comments

Comments
 (0)