diff --git a/.gitignore b/.gitignore index c32ce1134c8b64..0e3a22a5207479 100644 --- a/.gitignore +++ b/.gitignore @@ -9,6 +9,7 @@ test/regressions/screenshots/output # Exclude compiled files /lib +/dist icon-builder/js icon-builder/jsx @@ -23,3 +24,4 @@ jsconfig.json # tmp tmp* +*~ diff --git a/README.md b/README.md index d275080a733e20..cfc29e8d033dc1 100644 --- a/README.md +++ b/README.md @@ -74,6 +74,22 @@ font in mind. So be sure to include it in your project. Here are [some instructions](http://www.google.com/fonts#UsePlace:use/Collection:Roboto:400,300,500) on how to do so. +### Packaging for use with separate React + +For using with React and React DOM from a CDN or as separate minified scripts, you can build +files with UMD module support as follows: + + npm install + npm run build:umd + npm run build:min + +This will build two archives into the /dist folder + +To see what's going on under the hood, you can use webpack directly: + + webpack --display-reasons --display-modules --progress --optimize-minimize --colors --entry ./src/index.js + + ## Usage Beginning with v0.15.0, Material-UI components require a theme to be provided. The quickest way to get up and running is by using the `MuiThemeProvider` to inject the theme into your application context. Following that, you can to use any of the components as demonstrated in the documentation. diff --git a/package.json b/package.json index f4480b62262436..28a774c4fe183d 100644 --- a/package.json +++ b/package.json @@ -21,10 +21,12 @@ }, "homepage": "http://material-ui.com/", "scripts": { - "build": "npm run build:babel && npm run build:copy-files", + "build": "npm run build:babel && npm run build:copy-files && npm run build:umd && npm run build:min", "build:icon-index": "babel-node ./scripts/icon-index-generator.js", "build:babel": "babel ./src --ignore *.spec.js --out-dir ./build", "build:copy-files": "babel-node ./scripts/copy-files.js", + "build:umd": "cross-env NODE_ENV=development webpack src/index.js --output-filename material-ui.js", + "build:min": "cross-env NODE_ENV=production webpack -p src/index.js --output-filename material-ui.min.js", "build:docs": "babel-node ./scripts/build-api-docs.js", "clean": "npm run clean:build", "clean:docs": "rimraf docs/api/*", diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 00000000000000..9d5b141263cde2 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,61 @@ +/* eslint-disable flowtype/require-valid-file-annotation */ +// webpack.config.js + +const path = require('path'); + +const libraryName = 'material-ui'; +const outputFile = `${libraryName}.js`; + +const INDEX = path.join(__dirname, 'src/index.js'); +const DIST = path.join(__dirname, 'dist'); + +const config = { + entry: { + 'material-ui': INDEX, + }, + devtool: 'source-map', + output: { + path: DIST, + filename: outputFile, + library: libraryName, + libraryTarget: 'umd', + umdNamedDefine: true, + }, + externals: [ + 'react-addons-create-fragment', + 'react-addons-transition-group', + { + react: { + root: 'React', + commonjs2: './react', + commonjs: ['./react'], + amd: 'react', + }, + }, + { + 'react-dom': { + root: 'ReactDOM', + commonjs2: './react-dom', + commonjs: ['./react-dom'], + amd: 'react-dom', + }, + }, + ], + + module: { + loaders: [ + { + test: /(\.jsx|\.js)$/, + loader: 'babel', + exclude: /(node_modules)/, + }, + ], + }, + resolve: { + root: path.resolve('./src'), + extensions: ['', '.js'], + }, +}; + +module.exports = config; +