Permalink
Browse files

webpack: support for building multiple browsers

  • Loading branch information...
1 parent 355430f commit e73723ed936b165a8a726bbe07de6cc54e53b87d @erikdesjardins erikdesjardins committed with erikdesjardins Apr 24, 2016
Showing with 87 additions and 82 deletions.
  1. +1 −30 .babelrc
  2. +32 −0 .babelrc.json
  3. +1 −1 README.md
  4. +3 −6 package.json
  5. +50 −45 webpack.config.babel.js
View
@@ -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"
}
View
@@ -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"
+ }
+ }
+}
View
@@ -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.
View
@@ -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",
@@ -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];
+ }
+ };
+});

0 comments on commit e73723e

Please sign in to comment.