Skip to content

Commit 7e98bf4

Browse files
niieaniniieani
committed
feat(skeleton-webpack): use @easy-webpack; break apart into two skeletons
1 parent ac9e149 commit 7e98bf4

File tree

98 files changed

+1437
-2206
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

98 files changed

+1437
-2206
lines changed

‎README.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ This library is part of the [Aurelia](http://www.aurelia.io/) platform and provi
1212

1313
Please see the individual readme file within each skeleton for an explanation of how to get setup.
1414

15-
* **skeleton-webpack** - This project is configured to use either the Babel (ESNext) or the TypeScript transpiler so that you can write your application using either language. It should work well with any standard text editor. This skeleton uses NPM for package management and Webpack for bundling.
15+
* **skeleton-esnext-webpack** - This project is configured to use the Babel transpiler so that you can write your application using either language. It should work well with any standard text editor. This skeleton uses NPM for package management and Webpack for bundling.
16+
* **skeleton-typescript-webpack** - This project is configured to use the TypeScript transpiler so that you can write your application using either language. It should work well with any standard text editor. This skeleton uses NPM for package management and Webpack for bundling.
1617
* **skeleton-esnext** - This project is configured to use the Babel transpiler so that you can write your application with ESNext code. It should work well with any standard text editor. This skeleton uses JSPM for package management and SystemJS for loading and bundling.
1718
* **skeleton-typescript** - This project is configured to use the TypeScript transpiler so that you can write your application using TypeScript. It should work well with any standard text editor, however it has been specially configured to work well with VSCode and Atom, including full TypeScript intellisense for app, unit test and e2e test code. This skeleton uses JSPM for package management and SystemJS for loading and bundling.
1819
* **skeleton-typescript-aspnetcore** - This is an ASP.NET Core web project configured for building a .NET backend and an Aurelia front-end. It is configured for full TypeScript support, similar to the standard skeleton-typescript option. This skeleton uses JSPM for package management and SystemJS for loading and bundling.

‎circle.yml

+3-22
Original file line numberDiff line numberDiff line change
@@ -6,35 +6,16 @@
66
#####
77

88
machine:
9-
environment:
10-
AURELIA_LANGUAGE: unset
119
node:
1210
version: 4.2.6
1311

1412
dependencies:
1513
pre:
1614
- npm install -g npm
1715
override:
18-
- npm install # we expect that peerDependencies will generate an error
19-
- npm run electron:setup
20-
21-
general:
22-
build_dir: skeleton-webpack
16+
- npm install
2317

2418
test:
25-
override:
26-
- npm run link:javascript
27-
- AURELIA_LANGUAGE=javascript npm test
28-
- npm run link:typescript
29-
- AURELIA_LANGUAGE=typescript npm test
3019
post:
31-
- npm run link:javascript
32-
- AURELIA_LANGUAGE=javascript npm run build
33-
- AURELIA_LANGUAGE=javascript npm run build:prod
34-
- AURELIA_LANGUAGE=javascript npm run electron:build
35-
- AURELIA_LANGUAGE=javascript npm run electron:package
36-
- npm run link:typescript
37-
- AURELIA_LANGUAGE=typescript npm run build
38-
- AURELIA_LANGUAGE=typescript npm run build:prod
39-
- AURELIA_LANGUAGE=typescript npm run electron:build
40-
- AURELIA_LANGUAGE=typescript npm run electron:package
20+
- npm run build
21+
- npm run build:prod

‎skeleton-esnext-webpack/.gitignore

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
node_modules
2+
.DS_STORE
3+
npm-debug.log*
4+
/dist
5+
/build
6+
/typings
7+
/.awcache
8+
/electron.js*
9+
/release
10+
/test/coverage

‎skeleton-webpack/README.md ‎skeleton-esnext-webpack/README.md

+90-13
Original file line numberDiff line numberDiff line change
@@ -13,21 +13,21 @@ npm install
1313
This will install all required dependencies, including a local version of Webpack that is going to
1414
build and bundle the app. There is no need to install Webpack globally.
1515

16-
After installation you will be asked to choose which language-version of the skeleton you would like to use. You may choose from:
17-
18-
- TypeScript
19-
- JavaScript
20-
2116
To run the app execute the following command:
2217

2318
```shell
24-
npm run server
19+
npm start
2520
```
2621

2722
This command starts the webpack development server that serves the build bundles.
28-
You can now browse the skeleton app at http://localhost:3000. Changes in the code
23+
You can now browse the skeleton app at http://localhost:9000. Changes in the code
2924
will automatically build and reload the app.
3025

26+
## Feature configuration
27+
28+
Most of the configuration will happen in the `webpack.config.js` file.
29+
There, you may configure advanced loader features or add direct SASS or LESS loading support.
30+
3131
## Bundling
3232

3333
To build a development bundle (output to /dist) execute:
@@ -52,7 +52,76 @@ The production bundle includes all files that are required for deployment.
5252

5353
## Resource and bundling configuration
5454

55-
The aurelia-webpack-plugin has its own configuration options that you may need to set.
55+
You may want to separate out parts of your code to other files.
56+
This can be done by specifying a build resource object inside `package.json`.
57+
58+
For example, if you wanted to lazy-load the /users path of the skeleton you could define it as follows:
59+
60+
```js
61+
// (package.json)
62+
"aurelia": {
63+
"build": {
64+
"resources": [
65+
{
66+
"path": "users",
67+
"bundle": "users",
68+
"lazy": true
69+
}
70+
]
71+
}
72+
},
73+
```
74+
75+
The "path" field can be either a string or an array of strings.
76+
The string should be a path, relative to the src or in case of an external resource, as a require path (e.g. `aurelia-plugin/some-resource.html`).
77+
`.js`, `.ts` and `.html` extensions are optional and will be resolved automatically.
78+
The bundle setting is recursive, therefore any files required by the specified path will also be contained by the bundle, unless they are also contained by another one (iteration is done from first to last resource).
79+
80+
Resources must also be specified in case Aurelia is supposed to load an external file or an external module that was not defined as a resource by any of the dependencies.
81+
Since the syntax is still relatively new, most Aurelia plugins don't define their resources.
82+
There might also be reasons not to declare those resources, in case the plugin is to be consumed only partially.
83+
If you'd like to use external resources, you should declare them yourself, like so:
84+
85+
```js
86+
// (package.json)
87+
"aurelia": {
88+
"build": {
89+
"resources": [
90+
"aurelia-some-ui-plugin/dropdown",
91+
"aurelia-some-ui-plugin/checkbox"
92+
]
93+
}
94+
},
95+
```
96+
97+
You can also combine both features to separate out plugins or resources for lazy-loading:
98+
99+
```js
100+
// (package.json)
101+
"aurelia": {
102+
"build": {
103+
"resources": [
104+
{
105+
"path": "aurelia-animator-css",
106+
"bundle": "animator",
107+
"lazy": true
108+
},
109+
{
110+
"path": [
111+
// lets say we only use the checkbox from within subpage1
112+
// we want those to be bundled together in a bundle called: "subpage1"
113+
"aurelia-some-ui-plugin/checkbox",
114+
"./items/subpage1"
115+
],
116+
"bundle": "subpage1",
117+
"lazy": true
118+
},
119+
"aurelia-some-ui-plugin/dropdown"
120+
]
121+
}
122+
},
123+
```
124+
56125
Please see https://github.com/aurelia/webpack-plugin for more information.
57126

58127
## Running The Unit Tests
@@ -68,19 +137,27 @@ Integration tests are performed with [Protractor](http://angular.github.io/protr
68137

69138
1. Place your E2E-Tests into the folder ```test/e2e/src```
70139

71-
2. Make sure your app runs and is accessible
140+
2. Run the tests by invoking
72141

73142
```shell
74-
npm run server
143+
npm run e2e
75144
```
76145

77-
3. In another console run the E2E-Tests
146+
### Running e2e tests manually
147+
148+
1. Make sure your app runs and is accessible
78149

79150
```shell
80-
npm run e2e
151+
WEBPACK_PORT=19876 npm start
152+
```
153+
154+
3. Once bundle is ready, run the E2E-Tests in another console
155+
156+
```shell
157+
npm run e2e:start
81158
```
82159

83-
## Electron
160+
## Electron (coming soon)
84161

85162
To add Electron support to the skeleton, first run:
86163

‎skeleton-webpack/index.html ‎skeleton-esnext-webpack/index.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<title><%= webpackConfig.metadata.title %></title>
4+
<title><%- webpackConfig.metadata.title %></title>
55
<meta name="viewport" content="width=device-width, initial-scale=1">
6-
<base href="<%= webpackConfig.metadata.baseUrl %>">
6+
<base href="<%- webpackConfig.metadata.baseUrl %>">
77
<!-- imported CSS are concatenated and added automatically -->
88
</head>
99
<body>
1010
<div class="splash">
11-
<div class="message">Aurelia Navigation Skeleton</div>
11+
<div class="message"><%- webpackConfig.metadata.title %></div>
1212
<i class="fa fa-spinner fa-spin"></i>
1313
</div>
1414
<% if (webpackConfig.metadata.ENV === 'development') { %>

‎skeleton-webpack/index.js ‎skeleton-esnext-webpack/index.js

File renamed without changes.

‎skeleton-webpack/jsconfig.json ‎skeleton-esnext-webpack/jsconfig.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
{
22
"compilerOptions": {
33
"target": "es2015",
4-
"module": "es2015",
54
"experimentalDecorators": true
65
},
7-
86
"exclude": [
9-
"node_modules"
7+
"node_modules",
8+
"dist",
9+
"release"
1010
]
11-
}
11+
}

‎skeleton-esnext-webpack/package.json

+142
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
{
2+
"name": "aurelia-skeleton-navigation-webpack",
3+
"version": "1.0.0-beta.1.2.6",
4+
"description": "A starter kit for building a standard navigation-style app with Aurelia and webpack.",
5+
"main": "dist/electron.js",
6+
"productName": "Aurelia Electron",
7+
"scripts": {
8+
"prepublish": "npm run typings:install",
9+
"test": "cross-env NODE_ENV=test ./node_modules/karma/bin/karma start test/karma.conf.js",
10+
"webdriver:update": "cross-env ./node_modules/.bin/webdriver-manager update",
11+
"webdriver:start": "cross-env ./node_modules/.bin/webdriver-manager start",
12+
"pree2e": "npm run webdriver:update -- --standalone",
13+
"e2e": "concurrently --kill-others \"npm run e2e:start-when-ready\" \"cross-env WEBPACK_PORT=19876 npm start\"",
14+
"e2e:start-when-ready": "wait-on --timeout 20000 http-get://localhost:19876/index.html && npm run e2e:start",
15+
"e2e:start": "cross-env ./node_modules/.bin/protractor test/protractor.conf.js",
16+
"e2e:live": "npm run e2e:start -- --elementExplorer",
17+
"clean": "npm cache clean && rimraf node_modules typings test/coverage dist",
18+
"clean:dist": "rimraf dist",
19+
"preclean:install": "npm run clean",
20+
"clean:install": "npm set progress=false && npm install",
21+
"preclean:start": "npm run clean",
22+
"clean:start": "npm start",
23+
"watch": "npm run watch:dev",
24+
"watch:dev": "npm run build:dev -- --watch",
25+
"watch:dev:hmr": "npm run watch:dev -- --hot",
26+
"watch:test": "npm run test -- --auto-watch --no-single-run",
27+
"watch:prod": "npm run build:prod -- --watch",
28+
"build": "cross-env NODE_ENV=development npm run build:dev",
29+
"prebuild:dev": "npm run clean:dist",
30+
"build:dev": "cross-env NODE_ENV=development npm run webpack -- --progress --profile",
31+
"prebuild:prod": "npm run clean:dist",
32+
"build:prod": "cross-env NODE_ENV=production npm run webpack -- --progress --profile",
33+
"start": "npm run server:dev",
34+
"server": "npm run server:dev",
35+
"server:dev": "cross-env NODE_ENV=development node ./node_modules/webpack-dev-server/bin/webpack-dev-server --inline --progress --profile --watch",
36+
"server:dev:hmr": "npm run server:dev -- --hot",
37+
"server:prod": "http-server dist --cors",
38+
"webpack": "cross-env ./node_modules/.bin/webpack",
39+
"webpack-dev-server": "cross-env ./node_modules/.bin/webpack-dev-server",
40+
"typings:install": "cross-env ./node_modules/.bin/typings install"
41+
},
42+
"repository": {
43+
"type": "git",
44+
"url": "git+ssh://[email protected]/aurelia/skeleton-navigation.git"
45+
},
46+
"keywords": [
47+
"aurelia",
48+
"skeleton",
49+
"navigation",
50+
"webpack"
51+
],
52+
"license": "CC0-1.0",
53+
"author": "Rob Eisenberg <[email protected]> (http://robeisenberg.com/)",
54+
"contributors": [
55+
{
56+
"name": "Arjen de Blok"
57+
},
58+
{
59+
"name": "Bazyli Brzóska <[email protected]> (https://invent.life)"
60+
}
61+
],
62+
"bugs": {
63+
"url": "https://github.com/aurelia/skeleton-navigation/issues"
64+
},
65+
"homepage": "https://github.com/aurelia/skeleton-navigation#readme",
66+
"aurelia": {
67+
"build": {
68+
"resources": []
69+
}
70+
},
71+
"dependencies": {
72+
"aurelia-bootstrapper-webpack": "^1.0.0-rc.1.0.0",
73+
"aurelia-event-aggregator": "^1.0.0-rc.1.0.0",
74+
"aurelia-fetch-client": "^1.0.0-rc.1.0.0",
75+
"aurelia-framework": "^1.0.0-rc.1.0.0",
76+
"aurelia-history-browser": "^1.0.0-rc.1.0.0",
77+
"aurelia-loader-webpack": "^1.0.0-rc.1.0.0",
78+
"aurelia-logging-console": "^1.0.0-rc.1.0.0",
79+
"aurelia-pal-browser": "^1.0.0-rc.1.0.0",
80+
"aurelia-polyfills": "^1.0.0-rc.1.0.0",
81+
"aurelia-route-recognizer": "^1.0.0-rc.1.0.0",
82+
"aurelia-router": "^1.0.0-rc.1.0.0",
83+
"aurelia-templating-binding": "^1.0.0-rc.1.0.0",
84+
"aurelia-templating-resources": "^1.0.0-rc.1.0.0",
85+
"aurelia-templating-router": "^1.0.0-rc.1.0.0",
86+
"bluebird": "^3.4.1",
87+
"bootstrap": "^3.3.6",
88+
"font-awesome": "^4.6.3",
89+
"isomorphic-fetch": "^2.2.1",
90+
"jquery": "^3.0.0"
91+
},
92+
"devDependencies": {
93+
"@easy-webpack/config-aurelia": "^1.2.0",
94+
"@easy-webpack/config-babel": "^1.2.0",
95+
"@easy-webpack/config-common-chunks-simple": "^1.2.0",
96+
"@easy-webpack/config-css": "^1.2.0",
97+
"@easy-webpack/config-env-development": "^1.2.0",
98+
"@easy-webpack/config-env-production": "^1.2.0",
99+
"@easy-webpack/config-external-source-maps": "^1.2.0",
100+
"@easy-webpack/config-fonts-and-images": "^1.2.0",
101+
"@easy-webpack/config-generate-index-html": "^1.3.0",
102+
"@easy-webpack/config-global-bluebird": "^1.2.0",
103+
"@easy-webpack/config-global-jquery": "^1.2.0",
104+
"@easy-webpack/config-global-regenerator": "^1.2.0",
105+
"@easy-webpack/config-html": "^1.2.0",
106+
"@easy-webpack/config-json": "^1.2.0",
107+
"@easy-webpack/config-test-coverage-istanbul": "^1.3.0",
108+
"@easy-webpack/config-uglify": "^1.2.0",
109+
"@easy-webpack/core": "^1.2.0",
110+
"aurelia-tools": "^0.2.3",
111+
"babel-plugin-transform-decorators-legacy": "^1.3.4",
112+
"babel-preset-es2015": "^6.9.0",
113+
"babel-preset-es2015-loose": "^7.0.0",
114+
"babel-preset-es2015-loose-native-modules": "^1.0.0",
115+
"babel-preset-stage-1": "^6.5.0",
116+
"babel-register": "^6.9.0",
117+
"concurrently": "^2.1.0",
118+
"cross-env": "^1.0.8",
119+
"http-server": "^0.9.0",
120+
"jasmine-core": "^2.4.1",
121+
"karma": "^0.13.22",
122+
"karma-chrome-launcher": "^1.0.1",
123+
"karma-coverage": "^1.0.0",
124+
"karma-jasmine": "^1.0.2",
125+
"karma-mocha-reporter": "^2.0.4",
126+
"karma-remap-istanbul": "^0.1.0",
127+
"karma-sourcemap-loader": "^0.3.7",
128+
"karma-webpack": "^1.7.0",
129+
"protractor": "^3.3.0",
130+
"rimraf": "^2.5.2",
131+
"typings": "^1.3.0",
132+
"wait-on": "^1.5.2",
133+
"webpack": ">=2.1.0-beta.13 || ^2.1.0",
134+
"webpack-dev-server": ">=2.1.0-beta.0 || ^2.1.0"
135+
},
136+
"babel": {
137+
"presets": [
138+
"es2015",
139+
"stage-1"
140+
]
141+
}
142+
}

‎skeleton-webpack/javascript-src/app.html ‎skeleton-esnext-webpack/src/app.html

File renamed without changes.

‎skeleton-webpack/javascript-src/app.js ‎skeleton-esnext-webpack/src/app.js

File renamed without changes.

‎skeleton-webpack/javascript-src/blur-image.js ‎skeleton-esnext-webpack/src/blur-image.js

File renamed without changes.

‎skeleton-webpack/javascript-src/child-router.html ‎skeleton-esnext-webpack/src/child-router.html

File renamed without changes.

‎skeleton-webpack/javascript-src/child-router.js ‎skeleton-esnext-webpack/src/child-router.js

File renamed without changes.

0 commit comments

Comments
 (0)