webpack: support for building multiple browsers

honestbleeps · Apr 25, 2016 · e73723e · e73723e
1 parent 355430f
commit e73723e
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 82 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,32 +1,3 @@
 {
-	"passPerPreset": true,
-	"presets": [
-		"stage-0",
-		{ "plugins": ["transform-runtime"] },
-		{ "plugins": [
-			"transform-decorators-legacy",
-			"transform-es2015-modules-commonjs",
-			"transform-dead-code-elimination",
-			"transform-node-env-inline",
-			"lodash"
-		] }
-	],
-	"env": {
-		"safari": {
-			"presets": [
-				"es2015",
-				"stage-0",
-				{ "plugins": [
-					"transform-decorators-legacy",
-					"transform-es2015-modules-commonjs",
-					"transform-dead-code-elimination",
-					"transform-node-env-inline",
-					"lodash"
-				] }
-			]
-		},
-		"test": {
-			"sourceMaps": "inline"
-		}
-	}
+	"extends": "./.babelrc.json"
 }
diff --git a/.babelrc.json b/.babelrc.json
@@ -0,0 +1,32 @@
+{
+	"passPerPreset": true,
+	"presets": [
+		"stage-0",
+		{ "plugins": ["transform-runtime"] },
+		{ "plugins": [
+			"transform-decorators-legacy",
+			"transform-es2015-modules-commonjs",
+			"transform-dead-code-elimination",
+			"transform-node-env-inline",
+			"lodash"
+		] }
+	],
+	"env": {
+		"safari": {
+			"presets": [
+				"es2015",
+				"stage-0",
+				{ "plugins": [
+					"transform-decorators-legacy",
+					"transform-es2015-modules-commonjs",
+					"transform-dead-code-elimination",
+					"transform-node-env-inline",
+					"lodash"
+				] }
+			]
+		},
+		"test": {
+			"sourceMaps": "inline"
+		}
+	}
+}
diff --git a/README.md b/README.md
@@ -104,7 +104,7 @@ Sass (`.scss`) files in `lib/` will be compiled with [Sass](http://sass-lang.com
 
 **`npm run build [-- <browsers>]`** will clean `dist/`, then build RES (release mode). Each build output will be compressed to a .zip file in `dist/zip/`.
 
-`<browsers>` is a comma-separated list of browsers to target, e.g. `chrome,firefox,safari,node`. By default, all will be targeted.
+`<browsers>` is a comma-separated list of browsers to target, e.g. `chrome,firefox,safari,node`. By default, `chrome` will be targeted.
 
 **`npm run add-module -- module.js`** will add `module.js`, a new module, to the manifest for each browser.
 

diff --git a/package.json b/package.json
@@ -13,15 +13,12 @@
     "external-deps": "gem install scss_lint",
     "preinstall": "npm -v && node -v && python --version && git rev-parse HEAD && git status --porcelain",
     "prestart": "rimraf dist",
-    "start": "cross-env NODE_ENV=development webpack --watch --browser",
+    "start": "cross-env NODE_ENV=development webpack --watch --browsers",
     "preonce": "rimraf dist",
-    "once": "cross-env NODE_ENV=development webpack --browser",
+    "once": "cross-env NODE_ENV=development webpack --browsers",
     "prebuild": "rimraf dist",
-    "build": "cross-env NODE_ENV=production webpack --browser",
+    "build": "cross-env NODE_ENV=production webpack --browsers",
     "postbuild": "gulp zip",
-    "prebuild-all": "rimraf dist",
-    "build-all": "cross-env NODE_ENV=production webpack --browser=chrome && cross-env NODE_ENV=production webpack --browser=firefox && cross-env NODE_ENV=production webpack --browser=safari",
-    "postbuild-all": "gulp zip",
     "test": "ava",
     "eslint": "eslint .",
     "scsslint": "scss-lint",

diff --git a/webpack.config.babel.js b/webpack.config.babel.js
@@ -1,6 +1,7 @@
 import InertEntryPlugin from 'inert-entry-webpack-plugin';
 import ProgressBarPlugin from 'progress-bar-webpack-plugin';
 import autoprefixer from 'autoprefixer';
+import babelrc from './.babelrc.json';
 import webpack from 'webpack';
 import yargs from 'yargs';
 import { basename, join } from 'path';
@@ -28,51 +29,55 @@ const browserConfig = {
 	}
 };
 
-const browser = typeof yargs.argv.browser === 'string' ? yargs.argv.browser : 'chrome';
+const browsers = typeof yargs.argv.browsers === 'string' ? yargs.argv.browsers.split(',') : ['chrome'];
 
-// extra transforms for Safari
-if (browser === 'safari') {
-	process.env.BABEL_ENV = 'safari';
-}
+export default browsers.map(browser => {
+	// extra transforms for Safari
+	const babelConfig = {
+		...babelrc,
+		...(browser === 'safari' ? babelrc.env.safari : {}),
+		babelrc: false
+	};
 
-export default {
-	entry: `extricate!interpolate!./${browserConfig[browser].entry}`,
-	bail: process.env.NODE_ENV !== 'development',
-	output: {
-		path: join(__dirname, 'dist', browserConfig[browser].output),
-		filename: basename(browserConfig[browser].entry)
-	},
-	resolve: {
-		alias: {
-			browserEnvironment$: join(__dirname, browserConfig[browser].environment)
-		}
-	},
-	module: {
-		loaders: [
-			{ test: /\.entry\.js$/, loaders: ['spawn?name=[name].js', 'babel'] },
-			{ test: /\.js$/, exclude: join(__dirname, 'node_modules'), loader: 'babel' },
-			{ test: /\.js$/, include: join(__dirname, 'node_modules'), loader: 'babel', query: { plugins: ['transform-dead-code-elimination', 'transform-node-env-inline'], compact: true, babelrc: false } },
-			{ test: /\.hbs$/, loader: 'handlebars' },
-			{ test: /\.scss$/, loaders: ['file?name=[name].css', 'extricate?resolve=\\.js$', 'css', 'postcss', 'sass'] },
-			{ test: /\.html$/, loaders: ['file?name=[name].[ext]', 'extricate', 'html?attrs=link:href script:src'] },
-			{ test: /\.png$/, exclude: join(__dirname, 'lib', 'images'), loader: 'file?name=[name].[ext]' },
-			{ test: /\.png$/, include: join(__dirname, 'lib', 'images'), loader: 'url' }
-		],
-		noParse: [
-			// to use `require` in Firefox and Node
-			/_nativeRequire\.js$/
-		]
-	},
-	plugins: [
-		new ProgressBarPlugin(),
-		new webpack.DefinePlugin({
-			'process.env': {
-				BUILD_TARGET: JSON.stringify(browser)
+	return {
+		entry: `extricate!interpolate!./${browserConfig[browser].entry}`,
+		bail: process.env.NODE_ENV !== 'development',
+		output: {
+			path: join(__dirname, 'dist', browserConfig[browser].output),
+			filename: basename(browserConfig[browser].entry)
+		},
+		resolve: {
+			alias: {
+				browserEnvironment$: join(__dirname, browserConfig[browser].environment)
 			}
-		}),
-		new InertEntryPlugin()
-	],
-	postcss() {
-		return [autoprefixer];
-	}
-};
+		},
+		module: {
+			loaders: [
+				{ test: /\.entry\.js$/, loaders: ['spawn?name=[name].js', `babel?${JSON.stringify(babelConfig)}`] },
+				{ test: /\.js$/, exclude: join(__dirname, 'node_modules'), loader: 'babel', query: babelConfig },
+				{ test: /\.js$/, include: join(__dirname, 'node_modules'), loader: 'babel', query: { plugins: ['transform-dead-code-elimination', 'transform-node-env-inline'], compact: true, babelrc: false } },
+				{ test: /\.hbs$/, loader: 'handlebars' },
+				{ test: /\.scss$/, loaders: ['file?name=[name].css', 'extricate?resolve=\\.js$', 'css', 'postcss', 'sass'] },
+				{ test: /\.html$/, loaders: ['file?name=[name].[ext]', 'extricate', 'html?attrs=link:href script:src'] },
+				{ test: /\.png$/, exclude: join(__dirname, 'lib', 'images'), loader: 'file?name=[name].[ext]' },
+				{ test: /\.png$/, include: join(__dirname, 'lib', 'images'), loader: 'url' }
+			],
+			noParse: [
+				// to use `require` in Firefox and Node
+				/_nativeRequire\.js$/
+			]
+		},
+		plugins: [
+			new ProgressBarPlugin(),
+			new webpack.DefinePlugin({
+				'process.env': {
+					BUILD_TARGET: JSON.stringify(browser)
+				}
+			}),
+			new InertEntryPlugin()
+		],
+		postcss() {
+			return [autoprefixer];
+		}
+	};
+});