building with monobrow

joshwnj · joshwnj · commit 5e8240ab06c5 · 2016-12-22T14:11:51.000+11:00
diff --git a/monobrow/babel.js b/monobrow/babel.js
@@ -0,0 +1,7 @@
+const babelify = require('babelify')
+
+module.exports = function setup (b, opts) {
+  b.transform(babelify, {
+    presets: [ 'es2015', 'react' ]
+  })
+}
diff --git a/monobrow/config.js b/monobrow/config.js
@@ -0,0 +1,18 @@
+const m = require('monobrow')
+const browserDeps = require('./deps').modules
+
+module.exports = {
+  entry: 'src/index.js',
+  outDir: 'dist',
+
+  // disable browserify-incremental as css-modulesify is not yet compatible
+  inc: false,
+
+  setup: [
+    require('./babel'),
+    require('./css-modules'),
+
+    // browser dependencies will be included in a separate bundle
+    m.external(browserDeps)
+  ]
+}
diff --git a/monobrow/css-modules.js b/monobrow/css-modules.js
@@ -0,0 +1,11 @@
+module.exports = function setup (b, opts) {
+  b.plugin('css-modulesify', {
+    output: 'dist/main.css',
+    postcssBefore: [
+      require('postcss-color-rebeccapurple')
+    ],
+    postcssAfter: [
+      require('autoprefixer')
+    ]
+  })
+}
diff --git a/monobrow/deps.js b/monobrow/deps.js
@@ -0,0 +1,9 @@
+const browserDeps = [
+  'react',
+  'react-dom'
+]
+
+module.exports = {
+  modules: browserDeps,
+  outFile: 'dist/deps.js'
+}
diff --git a/package.json b/package.json
@@ -9,7 +9,9 @@
     "browserify": "browserify -t [babelify --presets es2015 --presets react] -p [css-modulesify --before postcss-color-rebeccapurple --after autoprefixer --autoprefixer.browsers \"> 5%\" -o dist/main.css --json dist/css-modules.json] -o dist/index.js src/index.js",
     "watchify": "watchify -v -t [babelify --presets es2015 --presets react] -p [css-modulesify --after postcss-color-rebeccapurple --after autoprefixer --autoprefixer.browsers \"> 5%\" -o dist/main.css] -o dist/index.js src/index.js",
     "copy": "cp src/index.html dist/index.html && cp src/components/0-Logo/logo.svg dist/logo.svg",
-    "build": "npm run clean && npm run copy && npm run browserify",
+    "build-app": "monobrow -c monobrow/config.js",
+    "build-deps": "monobrow -c monobrow/deps.js",
+    "build": "npm run clean && npm run copy && npm run build-deps && npm run build-app",
     "budo": "budo src/index.js:index.js --open --dir=dist -- -t [babelify --presets es2015 --presets react] -p [css-modulesify --after postcss-color-rebeccapurple --after autoprefixer --autoprefixer.browsers \"> 5%\" -o dist/main.css --json dist/css-modules.json] -o dist/index.js src/index.js",
     "start": "npm run clean && npm run copy && npm run budo",
     "deploy": "npm run build && gh-pages -d dist -m \"Updates --skip-ci\""
@@ -35,6 +37,7 @@
     "css-modulesify": "^0.25.1",
     "gh-pages": "git://github.com/markdalgleish/gh-pages#cli-message",
     "hyperscript": "^1.4.6",
+    "monobrow": "^2.1.0",
     "postcss-color-rebeccapurple": "^2.0.0",
     "postcss-modules-extract-imports": "^1.0.0",
     "postcss-modules-local-by-default": "^1.0.0",
diff --git a/src/index.html b/src/index.html
@@ -6,6 +6,7 @@
   </head>
   <body>
     <div id="outlet"></div>
+    <script src="deps.js"></script>
     <script src="index.js"></script>
   </body>
 </html>
