Examples: Include app example using webpack

globalizejs · Aug 24, 2015 · a5cddc2 · a5cddc2
1 parent ba53ea8
commit a5cddc2
Show file tree

Hide file tree

Showing 9 changed files with 184 additions and 0 deletions.
diff --git a/examples/app-npm-webpack/.gitignore b/examples/app-npm-webpack/.gitignore
@@ -0,0 +1,2 @@
+dist/
+.tmp-globalize-webpack/
diff --git a/examples/app-npm-webpack/app/another-module.js b/examples/app-npm-webpack/app/another-module.js
@@ -0,0 +1,6 @@
+var Globalize = require( "globalize" );
+
+// Use Globalize to format dates.
+document.getElementById( "date" ).innerHTML = Globalize.formatDate( new Date(), {
+	datetime: "medium"
+});
diff --git a/examples/app-npm-webpack/app/index.js b/examples/app-npm-webpack/app/index.js
@@ -0,0 +1,28 @@
+var like, number;
+var Globalize = require( "globalize" );
+
+require("./another-module");
+
+// Use Globalize to format numbers.
+number = Globalize.numberFormatter();
+document.getElementById( "number" ).innerHTML = number( 12345.6789 );
+
+// Use Globalize to format currencies.
+document.getElementById( "currency" ).innerHTML = Globalize.formatCurrency( 69900, "USD" );
+
+// Use Globalize to get the plural form of a numeric value.
+document.getElementById( "plural-number" ).innerHTML = number( 12345.6789 );
+document.getElementById( "plural-form" ).innerHTML = Globalize.plural( 12345.6789 );
+
+// Use Globalize to format a message with plural inflection.
+like = Globalize.messageFormatter( "like" );
+document.getElementById( "message-0" ).innerHTML = like( 0 );
+document.getElementById( "message-1" ).innerHTML = like( 1 );
+document.getElementById( "message-2" ).innerHTML = like( 2 );
+document.getElementById( "message-3" ).innerHTML = like( 3 );
+
+// Use Globalize to format a relative time.
+document.getElementById( "relative-time" ).innerText = Globalize.formatRelativeTime( -35, "second" );
+
+document.getElementById( "requirements" ).style.display = "none";
+document.getElementById( "demo" ).style.display = "block";
diff --git a/examples/app-npm-webpack/index-template.html b/examples/app-npm-webpack/index-template.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Globalize App example using Webpack</title>
+</head>
+<body>
+    <h1>Globalize App example using Webpack</h1>
+
+    <div id="requirements">
+        <h2>Requirements</h2>
+        <ul>
+            <li>Read README.md for instructions on how to run the demo.
+            </li>
+        </ul>
+    </div>
+
+    <div id="demo" style="display: none">
+        <h2>Demo output</h2>
+        <p>Now: <span id="date"></span></p>
+        <p>A number: <span id="number"></span></p>
+        <p>A currency: <span id="currency"></span></p>
+        <p>Plural form of <span id="plural-number"></span> is <span id="plural-form"></span></p>
+        <p>Messages:</p>
+        <ul>
+            <li><span id="message-0"></span></li>
+            <li><span id="message-1"></span></li>
+            <li><span id="message-2"></span></li>
+            <li><span id="message-3"></span></li>
+        </ul>
+        <p>Something happened: <span id="relative-time"></span></p>
+    </div>
+
+    {% for (var chunk in o.htmlWebpackPlugin.files.chunks) { %}
+    <script src="{%=o.htmlWebpackPlugin.files.chunks[chunk].entry %}"></script>
+    {% } %}
+
+</body>
+</html>
diff --git a/examples/app-npm-webpack/messages/en.json b/examples/app-npm-webpack/messages/en.json
@@ -0,0 +1,12 @@
+{
+	"en": {
+		"like": [
+			"{0, plural, offset:1",
+			"     =0 {Be the first to like this}",
+			"     =1 {You liked this}",
+			"    one {You and someone else liked this}",
+			"  other {You and # others liked this}",
+			"}"
+		]
+	}
+}
diff --git a/examples/app-npm-webpack/messages/es.json b/examples/app-npm-webpack/messages/es.json
@@ -0,0 +1,12 @@
+{
+	"es": {
+		"like": [
+			"{0, plural, offset:1",
+			"     =0 {Be the first to like this}",
+			"     =1 {You liked this}",
+			"    one {You and someone else liked this}",
+			"  other {You and # others liked this}",
+			"}"
+		]
+	}
+}
diff --git a/examples/app-npm-webpack/messages/zh.json b/examples/app-npm-webpack/messages/zh.json
@@ -0,0 +1,12 @@
+{
+	"zh": {
+		"like": [
+			"{0, plural, offset:1",
+			"     =0 {Be the first to like this}",
+			"     =1 {You liked this}",
+			"    one {You and someone else liked this}",
+			"  other {You and # others liked this}",
+			"}"
+		]
+	}
+}
diff --git a/examples/app-npm-webpack/package.json b/examples/app-npm-webpack/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "globalize-full-app-npm-webpack",
+  "private": true,
+  "devDependencies": {
+    "cldr-data": ">=25",
+    "globalize": "1.1.0-alpha - 1.1.x",
+    "extract-text-webpack-plugin": "^0.8.2",
+    "globalize-webpack-plugin": "git://github.com/rxaviers/globalize-webpack-plugin#master",
+    "html-webpack-plugin": "^1.1.0",
+    "nopt": "^3.0.3",
+    "webpack": "^1.9.0",
+    "webpack-dev-server": "^1.9.0"
+  },
+  "scripts": {
+    "start": "./node_modules/.bin/webpack-dev-server --config webpack-config.js --hot --progress --colors --inline",
+    "build": "./node_modules/.bin/webpack --production --config webpack-config.js"
+  }
+}
diff --git a/examples/app-npm-webpack/webpack-config.js b/examples/app-npm-webpack/webpack-config.js
@@ -0,0 +1,55 @@
+var webpack = require( "webpack" );
+var CommonsChunkPlugin = require( "webpack/lib/optimize/CommonsChunkPlugin" );
+var HtmlWebpackPlugin = require( "html-webpack-plugin" );
+var globalizePlugin = require( "globalize-webpack-plugin" );
+var nopt = require( "nopt" );
+
+var options = nopt({
+	production: Boolean
+});
+
+module.exports = {
+	entry: options.production ?  {
+		main: "./app/index.js",
+		vendor: [
+			"globalize",
+			"globalize/dist/globalize-runtime/number",
+			"globalize/dist/globalize-runtime/plural",
+			"globalize/dist/globalize-runtime/message",
+			"globalize/dist/globalize-runtime/currency",
+			"globalize/dist/globalize-runtime/date",
+			"globalize/dist/globalize-runtime/relative-time"
+		]
+	} : "./app/index.js",
+	debug: !options.production,
+	output: {
+		path: options.production ? "./dist" : "./tmp",
+		publicPath: options.production ? "" : "http://localhost:8080/",
+		filename: options.production ? "app.[hash].js" : "app.js",
+	},
+	resolve: {
+		extensions: [ "", ".js" ],
+	},
+	plugins: [
+		new HtmlWebpackPlugin({
+			production: options.production,
+			template: "./index-template.html",
+		}),
+		new globalizePlugin({
+			production: options.production,
+			developmentLocale: "en",
+			supportedLocales: [ "en", "es", "zh" ],
+			messages: "messages/[locale].json",
+			output: "globalize-compiled-data-[locale].[hash].js"
+		})
+
+	].concat( options.production ? [
+		new webpack.optimize.DedupePlugin(),
+		new CommonsChunkPlugin( "vendor", "vendor.[hash].js" ),
+		new webpack.optimize.UglifyJsPlugin({
+			compress: {
+				warnings: false,
+			},
+		})
+	] : [] )
+};