Skip to content

Commit 1493036

Browse files
natterstefannatterstefan
committed
added build logic (es, umd, ...) and optimised bundling
1 parent 08082b9 commit 1493036

12 files changed

+476
-767
lines changed

‎.eslintignore

+5-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,5 @@
1-
**/dist
1+
**/dist
2+
**/es
3+
**/esm
4+
**/lib
5+
**/node_modules

‎.gitignore

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
.DS_Store
22
node_modules
3-
4-
# logs and temporary files
53
*.log
64
tmp
75

86
# build
97
build
108
dist
9+
es
10+
esm
11+
lib
1112
*.tgz
1213

1314
# tests
14-
coverage
15+
coverage

‎.storybook/config.js

+8-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,14 @@ import '@storybook/addon-console'
77

88
function loadStories() {
99
const req = require.context('../packages', true, /\.stories\.js$/)
10-
req.keys().forEach(filename => req(filename))
10+
req.keys().forEach(filename => {
11+
// exclude node_modules, as sub-packages can contain node_modules folder w/
12+
// stories
13+
if (filename.includes('node_modules')) {
14+
return
15+
}
16+
return req(filename)
17+
})
1118
}
1219

1320
addDecorator(

‎.storybook/webpack.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
module.exports = function(baseConfig, env, defaultConfig) {
66
defaultConfig.module.rules.push({
77
test: /\.stories\.jsx?$/,
8+
exclude: /node_modules/,
89
loaders: [require.resolve('@storybook/addon-storysource/loader')],
910
enforce: 'pre',
1011
})

‎babel.config.js

+26-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,31 @@
1+
// inspired by https://github.com/mui-org/material-ui/blob/next/babel.config.js
2+
let defaultPresets
3+
const environemnt = process.env.BABEL_ENV || 'umd'
4+
5+
// We release a ES version of the package.
6+
// It's something that matches the latest official supported features of JavaScript.
7+
// Nothing more (stage-1, etc), nothing less (require, etc).
8+
if (environemnt === 'es') {
9+
defaultPresets = []
10+
} else {
11+
defaultPresets = [
12+
[
13+
'@babel/preset-env',
14+
{
15+
modules: ['esm', 'umd'].includes(environemnt) ? false : 'commonjs',
16+
},
17+
],
18+
]
19+
}
20+
121
module.exports = {
2-
presets: ['@babel/preset-env', '@babel/preset-react'],
22+
presets: [...defaultPresets, '@babel/preset-react'],
323
plugins: [
24+
/** mainly required to make storybook work, see
25+
* - https://github.com/storybooks/storybook/issues/3346#issuecomment-415982589
26+
* - https://github.com/storybooks/storybook/issues/3346#issuecomment-423719241
27+
*/
28+
'@babel/plugin-transform-modules-commonjs',
429
[
530
'babel-plugin-styled-components',
631
{

‎package.json

+15-7
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,14 @@
1919
"lint-js": "eslint ./packages",
2020
"lint-md": "remark .",
2121
"lint-lerna": "lerna run lint --stream --parallel",
22+
"postinstall": "yarn bootstrap",
23+
"posttest": "yarn clean-dist",
2224
"prepublishOnly": "yarn clean && yarn && yarn build",
25+
"pretest": "yarn build",
2326
"publish": "lerna publish",
2427
"setup": "yarn && yarn clean && yarn bootstrap",
2528
"start": "yarn clean-dist && start-storybook -p 9001 -c .storybook --ci",
26-
"pretest": "yarn build",
27-
"test": "jest --detectOpenHandles",
28-
"posttest": "yarn clean-dist"
29+
"test": "jest --detectOpenHandles"
2930
},
3031
"publishConfig": {
3132
"access": "public",
@@ -49,9 +50,13 @@
4950
"url": "git+https://github.com/natterstefan/react-component-library-lerna.git"
5051
},
5152
"workspaces": {
52-
"packages": ["packages/*"]
53+
"packages": [
54+
"packages/*"
55+
]
5356
},
54-
"keywords": ["lerna"],
57+
"keywords": [
58+
"lerna"
59+
],
5560
"author": "Stefan Natter",
5661
"license": "MIT",
5762
"bugs": {
@@ -105,10 +110,13 @@
105110
"stylelint": "9.10.1",
106111
"stylelint-config-recommended": "2.1.0",
107112
"stylelint-config-styled-components": "0.1.1",
108-
"stylelint-processor-styled-components": "1.5.2"
113+
"stylelint-processor-styled-components": "1.5.2",
114+
"webpack": "4.29.3",
115+
"webpack-cli": "3.2.3"
109116
},
110117
"dependencies": {
111118
"react": "^16.8.1",
112-
"react-dom": "^16.8.1"
119+
"react-dom": "^16.8.1",
120+
"styled-components": "4.1.3"
113121
}
114122
}

‎packages/button/package.json

+12-6
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,24 @@
22
"name": "@natterstefan/ns-button-js",
33
"version": "0.1.0",
44
"description": "Example button component",
5-
"main": "./dist/index.js",
6-
"module": "./src/index.js",
7-
"files": ["dist"],
5+
"main": "lib/index.js",
6+
"module": "src/index.js",
7+
"files": ["dist", "es", "esm", "lib"],
88
"directories": {
99
"lib": "src"
1010
},
1111
"private": true,
1212
"scripts": {
13-
"prebuild": "rimraf dist",
14-
"build": "babel --root-mode upward src --ignore */*.test.js,**/*.test.js,*/*.stories.js,**/stories.js --out-dir dist",
13+
"prebuild": "rimraf dist && rimraf es && rimraf esm && rimraf lib",
14+
"build": "yarn build-csj && yarn build-es && yarn build-esm && yarn build-umd",
15+
"build-csj": "BABEL_ENV=cjs babel --root-mode upward src --ignore */*.test.js,**/*.test.js,*/*.stories.js,**/stories.js --out-dir lib",
16+
"build-esm": "BABEL_ENV=esm babel --root-mode upward src --ignore */*.test.js,**/*.test.js,*/*.stories.js,**/stories.js --out-dir esm",
17+
"build-es": "BABEL_ENV=es babel --root-mode upward src --ignore */*.test.js,**/*.test.js,*/*.stories.js,**/stories.js --out-dir es",
18+
"build-umd": "webpack --mode=production",
19+
"lint": "yarn lint-js && yarn lint-css",
20+
"lint-js": "eslint src",
21+
"lint-css": "stylelint 'src/**/*.js'",
1522
"pretest": "yarn build",
16-
"lint": "eslint src",
1723
"test": "jest"
1824
},
1925
"publishConfig": {

‎packages/button/webpack.config.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
const config = require('../../webpack.config')
2+
3+
const pack = require('./package.json')
4+
5+
module.exports = {
6+
...config,
7+
entry: `${__dirname}/src/index.js`,
8+
output: {
9+
library: pack.name,
10+
libraryTarget: 'umd',
11+
path: `${__dirname}/dist`,
12+
filename: 'index.js',
13+
},
14+
}

‎packages/card/package.json

+13-8
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,24 @@
22
"name": "@natterstefan/ns-card-js",
33
"version": "0.1.0",
44
"description": "Example card component",
5-
"main": "./dist/index.js",
6-
"module": "./src/index.js",
7-
"files": [
8-
"dist"
9-
],
5+
"main": "lib/index.js",
6+
"module": "src/index.js",
7+
"files": ["dist", "es", "esm", "lib"],
108
"directories": {
119
"lib": "src"
1210
},
1311
"private": true,
1412
"scripts": {
15-
"prebuild": "rimraf dist",
16-
"build": "babel --root-mode upward src --ignore */*.test.js,**/*.test.js,*/*.stories.js,**/stories.js --out-dir dist",
17-
"lint": "eslint src",
13+
"prebuild": "rimraf dist && rimraf es && rimraf esm && rimraf lib",
14+
"build": "yarn build-csj && yarn build-es && yarn build-esm && yarn build-umd",
15+
"build-csj": "BABEL_ENV=cjs babel --root-mode upward src --ignore */*.test.js,**/*.test.js,*/*.stories.js,**/stories.js --out-dir lib",
16+
"build-esm": "BABEL_ENV=esm babel --root-mode upward src --ignore */*.test.js,**/*.test.js,*/*.stories.js,**/stories.js --out-dir esm",
17+
"build-es": "BABEL_ENV=es babel --root-mode upward src --ignore */*.test.js,**/*.test.js,*/*.stories.js,**/stories.js --out-dir es",
18+
"build-umd": "webpack --mode=production",
19+
"lint": "yarn lint-js && yarn lint-css",
20+
"lint-js": "eslint src",
21+
"lint-css": "stylelint 'src/**/*.js'",
22+
"pretest": "yarn build",
1823
"test": "jest"
1924
},
2025
"publishConfig": {

‎packages/card/webpack.config.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
const config = require('../../webpack.config')
2+
3+
const pack = require('./package.json')
4+
5+
module.exports = {
6+
...config,
7+
entry: `${__dirname}/src/index.js`,
8+
output: {
9+
library: pack.name,
10+
libraryTarget: 'umd',
11+
path: `${__dirname}/dist`,
12+
filename: 'index.js',
13+
},
14+
}

‎webpack.config.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
const babelConfig = require('./babel.config')
2+
3+
module.exports = {
4+
resolve: {
5+
extensions: ['.js'],
6+
// mainFields: ['main', 'module'], // https://github.com/webpack/webpack/issues/5756#issuecomment-405468106
7+
},
8+
devtool: 'source-map',
9+
mode: 'development',
10+
module: {
11+
rules: [
12+
{
13+
test: /\.js$/,
14+
exclude: /node_modules/,
15+
use: [
16+
{
17+
loader: 'babel-loader',
18+
options: babelConfig,
19+
},
20+
],
21+
},
22+
],
23+
},
24+
}

0 commit comments

Comments
 (0)