github/JavaScriptServices
1
1
Fork 0
mirror of https://github.com/aspnet/JavaScriptServices.git synced 2025-12-22 17:47:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update Aurelia SPA template

Browse Source
This commit is contained in:
Meirion Hughes
2017-04-09 08:53:22 +01:00
parent ea429cccf4
commit 37df30929c
7 changed files with 126 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
templates/AureliaSpa/ClientApp/app/components/app/app.ts
View File

@@ -1,4 +1,4 @@
import { Aurelia } from 'aurelia-framework'; import { Aurelia, PLATFORM } from 'aurelia-framework';
import { Router, RouterConfiguration } from 'aurelia-router'; import { Router, RouterConfiguration } from 'aurelia-router';
export class App { export class App {
@@ -10,21 +10,21 @@ export class App {
route: [ '', 'home' ], route: [ '', 'home' ],
name: 'home', name: 'home',
settings: { icon: 'home' }, settings: { icon: 'home' },
moduleId: '../home/home', moduleId: PLATFORM.moduleName('../home/home'),
nav: true, nav: true,
title: 'Home' title: 'Home'
}, { }, {
route: 'counter', route: 'counter',
name: 'counter', name: 'counter',
settings: { icon: 'education' }, settings: { icon: 'education' },
moduleId: '../counter/counter', moduleId: PLATFORM.moduleName('../counter/counter'),
nav: true, nav: true,
title: 'Counter' title: 'Counter'
}, { }, {
route: 'fetch-data', route: 'fetch-data',
name: 'fetchdata', name: 'fetchdata',
settings: { icon: 'th-list' }, settings: { icon: 'th-list' },
moduleId: '../fetchdata/fetchdata', moduleId: PLATFORM.moduleName('../fetchdata/fetchdata'),
nav: true, nav: true,
title: 'Fetch data' title: 'Fetch data'
}]); }]);

4
templates/AureliaSpa/ClientApp/boot.ts
View File

@@ -1,5 +1,5 @@
import 'isomorphic-fetch'; import 'isomorphic-fetch';
import { Aurelia } from 'aurelia-framework'; import { Aurelia, PLATFORM } from 'aurelia-framework';
import 'bootstrap/dist/css/bootstrap.css'; import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap'; import 'bootstrap';
declare const IS_DEV_BUILD: boolean; // The value is supplied by Webpack during the build declare const IS_DEV_BUILD: boolean; // The value is supplied by Webpack during the build
@@ -11,5 +11,5 @@ export function configure(aurelia: Aurelia) {
aurelia.use.developmentLogging(); aurelia.use.developmentLogging();
} }
aurelia.start().then(() => aurelia.setRoot('app/components/app/app')); aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app/components/app/app')));
} }

2
templates/AureliaSpa/Startup.cs
View File

@@ -43,7 +43,7 @@ namespace WebApplicationBasic
app.UseDeveloperExceptionPage(); app.UseDeveloperExceptionPage();
app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions { app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions {
HotModuleReplacement = false // Aurelia Webpack Plugin HMR currently has issues. Leave this set to false. HotModuleReplacement = true
}); });
} }
else else

60
templates/AureliaSpa/package.json
View File

@@ -1,50 +1,30 @@
{ {
"name": "WebApplicationBasic",
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"aurelia-bootstrapper-webpack": "^1.0.0", "aurelia-bootstrapper": "^2.0.1",
"aurelia-event-aggregator": "^1.0.0", "aurelia-fetch-client": "^1.0.1",
"aurelia-fetch-client": "^1.0.0", "aurelia-framework": "^1.1.0",
"aurelia-framework": "^1.0.0", "aurelia-loader-webpack": "^2.0.0",
"aurelia-history-browser": "^1.0.0", "aurelia-pal": "^1.3.0",
"aurelia-loader-webpack": "^1.0.0", "aurelia-router": "^1.2.1",
"aurelia-logging-console": "^1.0.0",
"aurelia-pal-browser": "^1.0.0",
"aurelia-polyfills": "^1.0.0",
"aurelia-route-recognizer": "^1.0.0",
"aurelia-router": "^1.0.2",
"aurelia-templating-binding": "^1.0.0",
"aurelia-templating-resources": "^1.0.0",
"aurelia-templating-router": "^1.0.0",
"bootstrap": "^3.3.7", "bootstrap": "^3.3.7",
"isomorphic-fetch": "^2.2.1", "isomorphic-fetch": "^2.2.1",
"jquery": "^2.2.1" "jquery": "^3.2.1"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^6.0.45", "@types/node": "^7.0.12",
"aspnet-webpack": "^1.0.11", "aspnet-webpack": "^1.0.28",
"aurelia-webpack-plugin": "^1.1.0", "aurelia-webpack-plugin": "^2.0.0-rc.2",
"copy-webpack-plugin": "^3.0.1", "css-loader": "^0.28.0",
"css": "^2.2.1", "extract-text-webpack-plugin": "^2.1.0",
"css-loader": "^0.25.0", "file-loader": "^0.11.1",
"expose-loader": "^0.7.1", "html-loader": "^0.4.5",
"extract-text-webpack-plugin": "2.0.0-beta.4",
"file-loader": "^0.9.0",
"html-loader": "^0.4.4",
"html-webpack-plugin": "^2.22.0",
"json-loader": "^0.5.4", "json-loader": "^0.5.4",
"raw-loader": "^0.5.1", "style-loader": "^0.16.1",
"style-loader": "^0.13.1", "ts-loader": "^2.0.3",
"to-string-loader": "^1.1.5", "typescript": "^2.2.2",
"ts-loader": "^0.8.2", "url-loader": "^0.5.8",
"typescript": "^2.2.1", "webpack": "^2.3.3",
"url-loader": "^0.5.7", "webpack-hot-middleware": "^2.18.0"
"webpack": "2.1.0-beta.25",
"webpack-hot-middleware": "^2.10.0"
},
"aurelia": {
"build": {
"includeDependencies": "aurelia-*"
}
} }
} }

2
templates/AureliaSpa/tsconfig.json
View File

@@ -6,7 +6,7 @@
"experimentalDecorators": true, "experimentalDecorators": true,
"emitDecoratorMetadata": true, "emitDecoratorMetadata": true,
"skipDefaultLibCheck": true, "skipDefaultLibCheck": true,
"lib": [ "es6", "dom" ], "lib": [ "es2015", "dom" ],
"types": [ "node" ] "types": [ "node" ]
}, },
"exclude": [ "bin", "node_modules" ], "exclude": [ "bin", "node_modules" ],

92
templates/AureliaSpa/webpack.config.js
View File

@@ -1,45 +1,51 @@
var isDevBuild = process.argv.indexOf('--env.prod') < 0; const path = require('path');
var path = require('path'); const webpack = require('webpack');
var webpack = require('webpack'); const { AureliaPlugin } = require('aurelia-webpack-plugin');
var AureliaWebpackPlugin = require('aurelia-webpack-plugin');
var bundleOutputDir = './wwwroot/dist'; module.exports = ({ prod } = {}) => {
module.exports = { const isDevBuild = !prod;
resolve: { extensions: [ '.js', '.ts' ] }, const isProdBuild = prod;
entry: { 'app': 'aurelia-bootstrapper-webpack' }, // Note: The aurelia-webpack-plugin will add your app's modules to this bundle automatically const bundleOutputDir = './wwwroot/dist';
output: {
path: path.resolve(bundleOutputDir), return {
publicPath: '/dist', resolve: {
filename: '[name].js' extensions: [".ts", ".js"],
}, modules: ["ClientApp", "node_modules"],
module: { },
loaders: [ entry: { 'app': 'aurelia-bootstrapper' },
{ test: /\.ts$/, include: /ClientApp/, loader: 'ts-loader', query: { silent: true } }, output: {
{ test: /\.html$/, loader: 'html-loader' }, path: path.resolve(bundleOutputDir),
{ test: /\.css$/, loaders: [ 'style-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] }, publicPath: "/dist/",
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }, filename: '[name].js'
{ test: /\.json$/, loader: 'json-loader' } },
module: {
rules: [
{ test: /\.css$/i, use: [isDevBuild ? 'css-loader' : 'css-loader?minimize'] },
{ test: /\.html$/i, use: ["html-loader"] },
{ test: /\.ts$/i, loaders: ['ts-loader'], exclude: path.resolve(__dirname, 'node_modules') },
{ test: /\.json$/i, loader: 'json-loader', exclude: path.resolve(__dirname, 'node_modules') },
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader', query: { limit: 8192 } }
]
},
plugins: [
new webpack.DefinePlugin({ IS_DEV_BUILD: JSON.stringify(isDevBuild) }),
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
}),
new AureliaPlugin({ aureliaApp: "boot" }),
...when(isDevBuild, [
new webpack.SourceMapDevToolPlugin({
filename: '[file].map',
moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]')
})
]),
...when(isProdBuild, [
new webpack.optimize.UglifyJsPlugin()
])
] ]
}, };
plugins: [ }
new webpack.DefinePlugin({ IS_DEV_BUILD: JSON.stringify(isDevBuild) }),
new webpack.DllReferencePlugin({ const ensureArray = (config) => config && (Array.isArray(config) ? config : [config]) || []
context: __dirname, const when = (condition, config, negativeConfig) => condition ? ensureArray(config) : ensureArray(negativeConfig)
manifest: require('./wwwroot/dist/vendor-manifest.json')
}),
new AureliaWebpackPlugin({
root: path.resolve('./'),
src: path.resolve('./ClientApp'),
baseUrl: '/'
})
].concat(isDevBuild ? [
// Plugins that apply in development builds only
new webpack.SourceMapDevToolPlugin({
filename: '[file].map', // Remove this line if you prefer inline source maps
moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
})
] : [
// Plugins that apply in production builds only
new webpack.optimize.UglifyJsPlugin()
])
};

95
templates/AureliaSpa/webpack.config.vendor.js
View File

@@ -1,52 +1,55 @@
var isDevBuild = process.argv.indexOf('--env.prod') < 0;
var path = require('path'); var path = require('path');
var webpack = require('webpack'); var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin'); var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractCSS = new ExtractTextPlugin('vendor.css'); var extractCSS = new ExtractTextPlugin('vendor.css');
module.exports = { module.exports = ({ prod } = {}) => {
resolve: { const isDevBuild = !prod;
extensions: [ '.js' ]
}, return {
module: { resolve: {
loaders: [ extensions: ['.js']
{ test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' }, },
{ test: /\.css(\?|$)/, loader: extractCSS.extract([ isDevBuild ? 'css-loader' : 'css-loader?minimize' ]) } module: {
] loaders: [
}, { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' },
entry: { { test: /\.css(\?|$)/, loader: extractCSS.extract([isDevBuild ? 'css-loader' : 'css-loader?minimize']) }
vendor: [ ]
'aurelia-event-aggregator', },
'aurelia-fetch-client', entry: {
'aurelia-framework', vendor: [
'aurelia-history-browser', 'aurelia-event-aggregator',
'aurelia-logging-console', 'aurelia-fetch-client',
'aurelia-pal-browser', 'aurelia-framework',
'aurelia-polyfills', 'aurelia-history-browser',
'aurelia-route-recognizer', 'aurelia-logging-console',
'aurelia-router', 'aurelia-pal-browser',
'aurelia-templating-binding', 'aurelia-polyfills',
'aurelia-templating-resources', 'aurelia-route-recognizer',
'aurelia-templating-router', 'aurelia-router',
'bootstrap', 'aurelia-templating-binding',
'bootstrap/dist/css/bootstrap.css', 'aurelia-templating-resources',
'jquery' 'aurelia-templating-router',
], 'bootstrap',
}, 'bootstrap/dist/css/bootstrap.css',
output: { 'jquery'
path: path.join(__dirname, 'wwwroot', 'dist'), ],
publicPath: '/dist/', },
filename: '[name].js', output: {
library: '[name]_[hash]', path: path.join(__dirname, 'wwwroot', 'dist'),
}, publicPath: '/dist/',
plugins: [ filename: '[name].js',
extractCSS, library: '[name]_[hash]',
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable) },
new webpack.DllPlugin({ plugins: [
path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'), extractCSS,
name: '[name]_[hash]' new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
}) new webpack.DllPlugin({
].concat(isDevBuild ? [] : [ path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) name: '[name]_[hash]'
]) })
].concat(isDevBuild ? [] : [
new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })
])
}
}; };