From af2ad0dbd797f300ca5f995d9c29010560482297 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=CC=88rn=20Zaefferer?= Date: Sun, 20 Nov 2016 11:44:11 +0100 Subject: [PATCH 1/3] Experimental datepicker example --- index.js | 10 ++++++++-- package.json | 5 ++++- webpack-config.js | 8 ++++++++ 3 files changed, 20 insertions(+), 3 deletions(-) diff --git a/index.js b/index.js index aef2630..cee5b35 100644 --- a/index.js +++ b/index.js @@ -2,11 +2,17 @@ require('./main.css'); require('jquery-ui/themes/base/core.css'); require('jquery-ui/themes/base/menu.css'); require('jquery-ui/themes/base/autocomplete.css'); +require('jquery-ui/themes/base/calendar.css'); +require('jquery-ui/themes/base/datepicker.css'); require('jquery-ui/themes/base/theme.css'); var $ = require('jquery'); -var autocomplete = require('jquery-ui/ui/widgets/autocomplete'); +var Autocomplete = require('jquery-ui/ui/widgets/autocomplete'); +var Datepicker = require('jquery-ui/ui/widgets/datepicker'); $('

Welcome to the programming languages quiz

').appendTo('body'); -new autocomplete({ +new Autocomplete({ source: ['javascript', 'css', 'c', 'objectivec'] }).element.appendTo('body').focus(); + +$('

When do you want to start the quiz?

').appendTo('body'); +new Datepicker({}).element.appendTo('body'); diff --git a/package.json b/package.json index aea1f7a..00c7815 100644 --- a/package.json +++ b/package.json @@ -18,11 +18,14 @@ "author": "Jörn Zaefferer", "license": "MIT", "dependencies": { + "cldr-data": "^30.0.1", + "globalize": "^1.1.2", "jquery": "^2.1.4", - "jquery-ui": "1.12.x" + "jquery-ui": "github:jquery/jquery-ui#datepicker" }, "devDependencies": { "clean-webpack-plugin": "^0.1.3", + "globalize-webpack-plugin": "^0.3.6", "css-loader": "^0.16.0", "extract-text-webpack-plugin": "^0.8.2", "file-loader": "^0.8.4", diff --git a/webpack-config.js b/webpack-config.js index f12147d..ddec1fb 100644 --- a/webpack-config.js +++ b/webpack-config.js @@ -1,6 +1,7 @@ var Clean = require('clean-webpack-plugin'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var HtmlWebpackPlugin = require('html-webpack-plugin'); +var GlobalizePlugin = require('globalize-webpack-plugin'); module.exports = { entry: { @@ -25,6 +26,13 @@ module.exports = { plugins: [ new Clean(['dist']), new ExtractTextPlugin("app.[hash].css"), + new GlobalizePlugin({ + // toggle this for actual production builds + production: false, + developmentLocale: "de", + supportedLocales: [ "de" ], + output: "globalize-compiled-data-[locale].[hash].js" + }), new HtmlWebpackPlugin({ title: 'jQuery UI Autocomplete demo, built with webpack' }) From 55605f423d7edab7f2a831a46da5ff1608c67500 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=CC=88rn=20Zaefferer?= Date: Mon, 21 Nov 2016 09:08:19 +0100 Subject: [PATCH 2/3] Ignore questionable dependencies, globalize-webpack-plugin should provide those --- webpack-config.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/webpack-config.js b/webpack-config.js index ddec1fb..641005d 100644 --- a/webpack-config.js +++ b/webpack-config.js @@ -11,6 +11,10 @@ module.exports = { path: './dist', filename: 'app.[hash].js' }, + externals: { + 'globalize-locales': 'var {}', + 'globalize/date': 'var {}' + }, module: { loaders: [ { From 2f03de15fe05c4c55d841f9c9338cc8d941f830b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=CC=88rn=20Zaefferer?= Date: Mon, 21 Nov 2016 15:20:43 +0100 Subject: [PATCH 3/3] Add production flag --- package.json | 5 +++-- webpack-config.js | 50 +++++++++++++++++++++++++++++++++++------------ 2 files changed, 41 insertions(+), 14 deletions(-) diff --git a/package.json b/package.json index 00c7815..e28557a 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "main": "index.js", "scripts": { "start": "webpack-dev-server --config webpack-config.js", - "build": "webpack --config webpack-config.js" + "build": "webpack --production --config webpack-config.js" }, "keywords": [ "jquery-ui", @@ -25,11 +25,12 @@ }, "devDependencies": { "clean-webpack-plugin": "^0.1.3", - "globalize-webpack-plugin": "^0.3.6", "css-loader": "^0.16.0", "extract-text-webpack-plugin": "^0.8.2", "file-loader": "^0.8.4", + "globalize-webpack-plugin": "^0.3.6", "html-webpack-plugin": "^1.6.1", + "nopt": "^3.0.6", "style-loader": "^0.12.3", "webpack": "^1.12.2", "webpack-dev-server": "^1.11.0" diff --git a/webpack-config.js b/webpack-config.js index 641005d..68e5741 100644 --- a/webpack-config.js +++ b/webpack-config.js @@ -1,15 +1,33 @@ +var webpack = require( "webpack" ); var Clean = require('clean-webpack-plugin'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var HtmlWebpackPlugin = require('html-webpack-plugin'); +var CommonsChunkPlugin = require( 'webpack/lib/optimize/CommonsChunkPlugin' ); var GlobalizePlugin = require('globalize-webpack-plugin'); +var nopt = require( "nopt" ); + +var options = nopt({ + production: Boolean +}); module.exports = { - entry: { - main: './index.js' - }, + entry: options.production ? { + main: './index.js', + vendor: [ + 'globalize', + 'globalize/dist/globalize-runtime/number', + 'globalize/dist/globalize-runtime/currency', + 'globalize/dist/globalize-runtime/date', + 'globalize/dist/globalize-runtime/message', + 'globalize/dist/globalize-runtime/plural', + 'globalize/dist/globalize-runtime/relative-time', + 'globalize/dist/globalize-runtime/unit' + ] + } : "./index.js", + debug: !options.production, output: { path: './dist', - filename: 'app.[hash].js' + filename: options.production ? 'app.[hash].js' : 'app.js' }, externals: { 'globalize-locales': 'var {}', @@ -19,7 +37,7 @@ module.exports = { loaders: [ { test: /\.css$/, - loader: ExtractTextPlugin.extract("style-loader", "css-loader") + loader: ExtractTextPlugin.extract('style-loader', 'css-loader') }, { test: /\.(jpg|png)$/, @@ -29,16 +47,24 @@ module.exports = { }, plugins: [ new Clean(['dist']), - new ExtractTextPlugin("app.[hash].css"), + new ExtractTextPlugin('app.[hash].css'), new GlobalizePlugin({ - // toggle this for actual production builds - production: false, - developmentLocale: "de", - supportedLocales: [ "de" ], - output: "globalize-compiled-data-[locale].[hash].js" + production: options.production, + developmentLocale: 'de', + supportedLocales: [ 'de' ], + output: 'globalize-compiled-data-[locale].[hash].js' }), new HtmlWebpackPlugin({ + production: options.production, title: 'jQuery UI Autocomplete demo, built with webpack' }) - ] + ].concat( options.production ? [ + new webpack.optimize.DedupePlugin(), + new CommonsChunkPlugin( "vendor", "vendor.[hash].js" ), + new webpack.optimize.UglifyJsPlugin({ + compress: { + warnings: false + } + }) + ] : [] ) };