Skip to content

Instantly share code, notes, and snippets.

@valichek
Last active October 8, 2017 22:33
Show Gist options
  • Save valichek/5dc7c1e11ed39a82df83913df465cb50 to your computer and use it in GitHub Desktop.
Save valichek/5dc7c1e11ed39a82df83913df465cb50 to your computer and use it in GitHub Desktop.
Aurelia Webpack basic config (jquery, bootstrap, i18n, validation)
var Promise = require('bluebird'); // Promise polyfill for IE11
// Bluebird config
Promise.config({
// Enable warnings
warnings: true,
// Enable long stack traces
longStackTraces: true,
// Enable cancellation
cancellation: false,
// Enable monitoring
monitoring: false
});
import 'intl'; // add this line if having issues with aurelia-18n in safari and ie
import {bootstrap} from 'aurelia-bootstrapper-webpack';
import 'bootstrap-webpack';
import 'font-awesome-webpack';
import XHR from 'i18next-xhr-backend';
function loadLocales(url, options, callback, data) {
try {
// include locale files as webpack chunks
let waitForLocale = require('bundle!json!../locale/'+url+'.json');
waitForLocale((locale) => {
callback(locale, {status: '200'});
})
} catch (e) {
callback(null, {status: '404'});
}
}
bootstrap(function(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-i18n', (instance) => {
// register backend plugin
instance.i18next.use(XHR);
// adapt options to your needs (see http://i18next.com/docs/options/)
return instance.setup({
backend: { // <-- configure backend settings
loadPath: '{{lng}}/{{ns}}',
parse: (data) => data,
ajax: loadLocales
},
lng : 'de',
attributes : ['t','i18n'],
fallbackLng : 'en',
debug : false,
//compatibilityJSON: 'v1',
ns: ['translation']
});
})
.plugin('aurelia-validation', (config) => { config.useLocale('de-DE') })
.plugin('aurelia-dialog');
aurelia.start().then(() => aurelia.setRoot('app', document.body));
});
{
"name": "Aurelia Webpack i18n, bootstrap, jquery basic config",
"version": "0.1.3-pre.21",
"description": "",
"repository": "",
"license": "",
"COMMENT": "use --devtool eval-source-map to enable debug with source maps",
"scripts": {
"dev": "webpack-dev-server --config webpack.config.js --hot --inline --progress --devtool eval",
"build": "webpack --config webpack.config.js --progress --profile",
"prod": "webpack -p --config webpack.prod.config.js --progress --devtool source-map --optimize-max-chunks 1",
"test": "karma start",
"webdriver:update": "./node_modules/.bin/webdriver-manager update",
"webdriver:start": "./node_modules/.bin/webdriver-manager start",
"pree2e": "npm run webdriver:update -- --standalone",
"e2e": "./node_modules/.bin/protractor"
},
"dependencies": {
"aurelia-bootstrapper-webpack": "^1.0.0-beta.1.0.0",
"aurelia-event-aggregator": "^1.0.0-beta.1.1.1",
"aurelia-fetch-client": "^1.0.0-beta.1.1.0",
"aurelia-framework": "^1.0.0-beta.1.1.3",
"aurelia-history-browser": "^1.0.0-beta.1.1.2",
"aurelia-i18n": "^0.5.1",
"aurelia-logging-console": "^1.0.0-beta.1.1.4",
"aurelia-pal-browser": "^1.0.0-beta.1.1.4",
"aurelia-polyfills": "^1.0.0-beta.1.0.0",
"aurelia-router": "^1.0.0-beta.1.1.1",
"aurelia-templating-binding": "^1.0.0-beta.1.1.1",
"aurelia-templating-resources": "^1.0.0-beta.1.1.1",
"aurelia-templating-router": "^1.0.0-beta.1.1.1",
"aurelia-validation": "^0.6.7",
"bluebird": "^3.3.4",
"bootstrap": "^3.3.6",
"bootstrap-webpack": "0.0.5",
"font-awesome": "^4.5.0",
"font-awesome-webpack": "0.0.4",
"i18next-xhr-backend": "^0.5.3",
"jquery": "^2.2.3"
},
"devDependencies": {
"aurelia-tools": "^0.1.18",
"aurelia-webpack-plugin": "^1.0.0-beta.1.0.0",
"babel-core": "^6.7.2",
"babel-eslint": "^5.0.0",
"babel-loader": "^6.2.4",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-es2015-loose": "^7.0.0",
"babel-preset-stage-1": "^6.5.0",
"bundle-loader": "^0.5.4",
"css-loader": "^0.23.1",
"eslint": "^1.10.3",
"exports-loader": "^0.6.3",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.9.0",
"imports-loader": "^0.6.5",
"isomorphic-fetch": "^2.2.1",
"jasmine-core": "^2.4.1",
"json-loader": "^0.5.4",
"karma": "^0.13.21",
"karma-babel-preprocessor": "^6.0.1",
"karma-chrome-launcher": "^0.2.2",
"karma-jasmine": "^0.3.7",
"karma-webpack": "^1.7.0",
"less": "^2.6.1",
"less-loader": "^2.2.3",
"protractor": "^3.2.1",
"raw-loader": "^0.5.1",
"style-loader": "^0.13.0",
"url-loader": "^0.5.7",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1"
}
}
/*eslint-disable no-var*/
var path = require('path');
var AureliaWebpackPlugin = require('aurelia-webpack-plugin');
var ProvidePlugin = require('webpack/lib/ProvidePlugin');
module.exports = {
devServer: {
host: 'localhost',
port: 3000
},
entry: {
main: [
'./src/main'
]
},
output: {
path: path.join(__dirname, 'build'),
filename: 'bundle.js'
},
plugins: [
new AureliaWebpackPlugin({
includeSubModules: [
{ moduleId: "aurelia-i18n" },
{ moduleId: "aurelia-dialog" },
{ moduleId: "aurelia-validation" }
]
}),
new ProvidePlugin({
Promise: 'bluebird',
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
],
resolve: {
root: path.resolve('./src'),
alias: {
"aurelia-validation/strategies":"aurelia-validation/dist/commonjs/strategies"
}
},
module: {
loaders: [
{ test: /\.js$/, loader: 'babel', exclude: /node_modules|local_packages/, query: { presets: ['es2015-loose', 'stage-1'], plugins: ['transform-decorators-legacy'] } },
//{ test: /aurelia-dialog\/dist\/commonjs\/dialog\.css/, loader: 'raw'},
//{ test: /\.css$/, exclude: /aurelia-dialog\/dist\/commonjs\/dialog\.css/, loader: 'style!css' },
{ test: /aurelia-dialog(\\|\/)dist(\\|\/)commonjs(\\|\/)dialog\.css/, loader: 'raw' }, // regex for windows and *nix
{ test: /\.css$/, exclude: /aurelia-dialog(\\|\/)dist(\\|\/)commonjs(\\|\/)dialog\.css/, loader: 'style!css' }, // regex for windows and *nix
{ test: /\.less$/, loader: "style!css!less"},
{ test: /\.html$/, loader: 'html' },
{ test: /\.(png|gif|jpg)$/, loader: 'url?limit=8192' },
{ test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url?limit=10000&mimetype=application/font-woff2' },
{ test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file' }
]
}
};
/*eslint-disable no-var*/
var webpack = require("webpack");
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var AureliaWebpackPlugin = require('aurelia-webpack-plugin');
var ProvidePlugin = require('webpack/lib/ProvidePlugin');
var pkg = require('./package.json');
var outputFileTemplateSuffix = '-' + pkg.version;
module.exports = {
entry: {
main: [
'./src/main'
],
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name]' + outputFileTemplateSuffix + '.js',
chunkFilename: '[id]' + outputFileTemplateSuffix + '.js'
},
plugins: [
new AureliaWebpackPlugin({
includeSubModules: [
{ moduleId: "aurelia-i18n" },
{ moduleId: "aurelia-dialog" },
{ moduleId: "aurelia-validation" }
]
}),
new HtmlWebpackPlugin({
template: 'index.prod.html',
filename: 'index.html',
favicon: 'assets/images/sp_favicon.ico'
}),
new ProvidePlugin({
Promise: 'bluebird',
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
],
resolve: {
root: [
path.resolve('./'), path.resolve('./src')
],
alias: {
"aurelia-validation/strategies":"aurelia-validation/dist/commonjs/strategies"
}
},
module: {
loaders: [
{ test: /\.js$/, loader: 'babel', exclude: /node_modules/, query: { presets: ['es2015-loose', 'stage-1'], plugins: ['transform-decorators-legacy'] } },
//{ test: /aurelia-dialog\/dist\/commonjs\/dialog\.css/, loader: 'raw'},
//{ test: /\.css$/, exclude: /aurelia-dialog\/dist\/commonjs\/dialog\.css/, loader: 'style!css' },
{ test: /aurelia-dialog(\\|\/)dist(\\|\/)commonjs(\\|\/)dialog\.css/, loader: 'raw' }, // regex for windows and *nix
{ test: /\.css$/, exclude: /aurelia-dialog(\\|\/)dist(\\|\/)commonjs(\\|\/)dialog\.css/, loader: 'style!css' }, // regex for windows and *nix
{ test: /\.less$/, loader: "style!css!less"},
{ test: /\.html$/, loader: 'html' },
{ test: /\.(png|gif|jpg)$/, loader: 'url?limit=8192' },
{ test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url?limit=10000&mimetype=application/font-woff2' },
{ test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file' }
]
}
};
@Tseberechts
Copy link

Tseberechts commented Apr 26, 2016

Error: Cannot find module "bundle!json!../locales"(…). I don't really know how to solve this. it doesn't load my translation.json files.

I didn't npm install the bundle and json loader. Thanks for the great example!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment