From 3132d357dacd3fc0306aec7a7bdc3dd02b78c3b4 Mon Sep 17 00:00:00 2001 From: Sayan751 Date: Thu, 16 May 2019 00:01:56 +0200 Subject: [PATCH 01/16] Added a gulp file to clear the dist --- skeleton/webpack/gulpFile.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 skeleton/webpack/gulpFile.js diff --git a/skeleton/webpack/gulpFile.js b/skeleton/webpack/gulpFile.js new file mode 100644 index 000000000..62888620e --- /dev/null +++ b/skeleton/webpack/gulpFile.js @@ -0,0 +1,17 @@ +// @if feat.babel +import gulp from 'gulp'; +import del from 'del'; +// @endif +// @if feat.typescript +import * as gulp from 'gulp'; +import * as del from 'del'; +// @endif + +function clearDist() { + return del([config.output.path]); +} + +gulp.task("prebuild", gulp.series( + clearDist, + configureEnvironment +)); From e3df5f43e23c140b48736412fa22b82c4f9e19e1 Mon Sep 17 00:00:00 2001 From: Sayan751 Date: Thu, 16 May 2019 00:02:20 +0200 Subject: [PATCH 02/16] added default npm scripts to generate --- skeleton/webpack/package.json | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/skeleton/webpack/package.json b/skeleton/webpack/package.json index a9e7c1796..2a51a0241 100644 --- a/skeleton/webpack/package.json +++ b/skeleton/webpack/package.json @@ -69,5 +69,11 @@ "istanbul-instrumenter-loader": "", "opn": "", "webpack-bundle-analyzer": "", + }, + "scripts": { + "build": "gulp prebuild && webpack --env.production --env.extractCss", + "build:dev": "gulp prebuild && webpack --env.extractCss", + "analyze": "webpack --env.production --env.analyze", + "start": "gulp prebuild && webpack-dev-server --env.extractCss" } } \ No newline at end of file From 203405803506d956d725006c1e134503cea2035b Mon Sep 17 00:00:00 2001 From: Sayan751 Date: Thu, 16 May 2019 00:06:04 +0200 Subject: [PATCH 03/16] Changed webpack.config with a new loader Tried a different approach to tackle the enviroment configurations. Instead of a typescript file, which is replaced based on the environment, this strategy uses json file to hold the configuration. The loader takes the basic config file and applies that environmentspecific changes (change environment.json and environment.production.json). --- .../aurelia_project/environment-loader.js | 45 +++++++++++++++++++ skeleton/webpack/src/environment.json | 4 ++ .../webpack/src/environment.production.json | 4 ++ skeleton/webpack/webpack.config.js | 18 +++++--- 4 files changed, 64 insertions(+), 7 deletions(-) create mode 100644 skeleton/webpack/aurelia_project/environment-loader.js create mode 100644 skeleton/webpack/src/environment.json create mode 100644 skeleton/webpack/src/environment.production.json diff --git a/skeleton/webpack/aurelia_project/environment-loader.js b/skeleton/webpack/aurelia_project/environment-loader.js new file mode 100644 index 000000000..4b54d0721 --- /dev/null +++ b/skeleton/webpack/aurelia_project/environment-loader.js @@ -0,0 +1,45 @@ +const fs = require('fs'); +const path = require('path'); +const { + getOptions +} = require('loader-utils'); +const validateOptions = require('schema-utils'); +const log = require('webpack-log'); + +const loaderName = 'environment-loader'; +const logger = log({ + name: loaderName +}); +const schema = { + env: 'string' +}; +const defaultOptions = { + env: "development" +}; + +const parseFileContent = (content, filePath) => { + try { + return JSON.parse(content); + } catch (e) { + logger.error(`Unable to parse the file ${filePath}; ${loaderName} can only be used to load and transform json files.`); + } +} + +module.exports = function (source) { + const options = Object.assign(defaultOptions, getOptions(this)); + validateOptions(schema, options, 'environment-loader'); + + const ext = path.extname(this.resourcePath); + const envFile = path.join(path.dirname(this.resourcePath), `${path.basename(this.resourcePath, ext)}.${options.env}${ext}`); + let envConfig = {}; + + if (fs.existsSync(envFile)) { + envConfig = parseFileContent(fs.readFileSync(envFile), envFile); + } + const sourceConfig = parseFileContent(source, this.resourcePath); + + return JSON.stringify({ + ...sourceConfig, + ...envConfig + }); +}; diff --git a/skeleton/webpack/src/environment.json b/skeleton/webpack/src/environment.json new file mode 100644 index 000000000..a32129fd0 --- /dev/null +++ b/skeleton/webpack/src/environment.json @@ -0,0 +1,4 @@ +{ + "debug": true, + "testing": true +} \ No newline at end of file diff --git a/skeleton/webpack/src/environment.production.json b/skeleton/webpack/src/environment.production.json new file mode 100644 index 000000000..9ddbb4430 --- /dev/null +++ b/skeleton/webpack/src/environment.production.json @@ -0,0 +1,4 @@ +{ + "debug": false, + "testing": false +} \ No newline at end of file diff --git a/skeleton/webpack/webpack.config.js b/skeleton/webpack/webpack.config.js index dd9616244..a27bd17c3 100644 --- a/skeleton/webpack/webpack.config.js +++ b/skeleton/webpack/webpack.config.js @@ -50,7 +50,7 @@ const sassRules = [ ]; // @endif -module.exports = ({ production, server, extractCss, coverage, analyze, karma } = {}) => ({ +module.exports = ({ production, extractCss, analyze, tests, hmr } = {}) => ({ resolve: { // @if feat.typescript extensions: ['.ts', '.js'], @@ -206,7 +206,8 @@ module.exports = ({ production, server, extractCss, coverage, analyze, karma } = devServer: { contentBase: outDir, // serve index.html for all 404 (required for push-state) - historyApiFallback: true + historyApiFallback: true, + hot: hmr }, devtool: production ? 'nosources-source-map' : 'cheap-module-eval-source-map', module: { @@ -278,7 +279,7 @@ module.exports = ({ production, server, extractCss, coverage, analyze, karma } = // @if feat.babel { test: /\.js$/i, loader: 'babel-loader', exclude: nodeModulesDir, - options: coverage ? { sourceMap: 'inline', plugins: ['istanbul'] } : {} + options: tests ? { sourceMap: 'inline', plugins: ['istanbul'] } : {} }, // @endif // @if feat.typescript @@ -290,8 +291,11 @@ module.exports = ({ production, server, extractCss, coverage, analyze, karma } = { test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff' } }, // load these fonts normally, as files: { test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'file-loader' }, + { test: /environment\.json$/i, use: [ + {loader: path.resolve("./aurelia_project/environment-loader.js"), query: {env: production ? 'production' : 'development' }}, + ]}, // @if feat.typescript - ...when(coverage, { + ...when(tests, { test: /\.[jt]s$/i, loader: 'istanbul-instrumenter-loader', include: srcDir, exclude: [/\.(spec|test)\.[jt]s$/i], enforce: 'post', options: { esModules: true }, @@ -300,7 +304,7 @@ module.exports = ({ production, server, extractCss, coverage, analyze, karma } = ] }, plugins: [ - ...when(!karma, new DuplicatePackageCheckerPlugin()), + ...when(!tests, new DuplicatePackageCheckerPlugin()), new AureliaPlugin(), new ProvidePlugin({ // @if feat['scaffold-navigation'] @@ -336,7 +340,7 @@ module.exports = ({ production, server, extractCss, coverage, analyze, karma } = // @endif metadata: { // available in index.ejs // - title, server, baseUrl + title, baseUrl } }), // ref: https://webpack.js.org/plugins/mini-css-extract-plugin/ @@ -344,7 +348,7 @@ module.exports = ({ production, server, extractCss, coverage, analyze, karma } = filename: production ? 'css/[name].[contenthash].bundle.css' : 'css/[name].[hash].bundle.css', chunkFilename: production ? 'css/[name].[contenthash].chunk.css' : 'css/[name].[hash].chunk.css' })), - ...when(production || server, new CopyWebpackPlugin([ + ...when(!tests, new CopyWebpackPlugin([ { from: 'static', to: outDir, ignore: ['.*'] }])), // ignore dot (hidden) files ...when(analyze, new BundleAnalyzerPlugin()) ] From 99d1181c31a086026e1f987d7dc5caae781ea96b Mon Sep 17 00:00:00 2001 From: Sayan751 Date: Thu, 16 May 2019 00:06:25 +0200 Subject: [PATCH 04/16] Added readme with new npm scripts --- skeleton/webpack/README.md | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/skeleton/webpack/README.md b/skeleton/webpack/README.md index ba3ea9c6a..118f9f347 100644 --- a/skeleton/webpack/README.md +++ b/skeleton/webpack/README.md @@ -2,16 +2,14 @@ For more information, go to https://aurelia.io/docs/cli/webpack ## Run dev app -Run `au run`, then open `http://localhost:/* @if feat.web */8080/* @endif *//* @if feat['dotnet-core'] */5000/* @endif */` +Run `npm start`, then open `http://localhost:/* @if feat.web */8080/* @endif *//* @if feat['dotnet-core'] */5000/* @endif */` -To open browser automatically, do `au run --open`. +You can change the standard webpack configurations from CLI easily with something like this: `npm start -- --open --port 8888`. However, it is better to change the respective npm scripts or `webpack.config.js` with these options, as per your need. -To change dev server port, do `au run --port 8888`. +To enable Webpack Bundle Analyzer, do `npm run analyze` (production build). -To enable Webpack Bundle Analyzer, do `au run --analyze`. - -To enable hot module reload, do `au run --hmr`. +To enable hot module reload, do `npm start -- --env.hmr`. ## Build for production -Run `au build --env prod`. +Run `npm run build`. From 9e0cece4d3bf50cc779ad4eafa9743beadf6d9fe Mon Sep 17 00:00:00 2001 From: Sayan751 Date: Thu, 16 May 2019 00:07:47 +0200 Subject: [PATCH 05/16] Removed the build and run script These are not needed anymore, as webpack and webpack-dev-server CLIs are directly used to build and run the app. --- .../webpack/aurelia_project/tasks/build.ext | 67 ------------------- .../webpack/aurelia_project/tasks/build.json | 21 ------ .../webpack/aurelia_project/tasks/run.ext | 62 ----------------- .../webpack/aurelia_project/tasks/run.json | 31 --------- 4 files changed, 181 deletions(-) delete mode 100644 skeleton/webpack/aurelia_project/tasks/build.ext delete mode 100644 skeleton/webpack/aurelia_project/tasks/build.json delete mode 100644 skeleton/webpack/aurelia_project/tasks/run.ext delete mode 100644 skeleton/webpack/aurelia_project/tasks/run.json diff --git a/skeleton/webpack/aurelia_project/tasks/build.ext b/skeleton/webpack/aurelia_project/tasks/build.ext deleted file mode 100644 index e386af35a..000000000 --- a/skeleton/webpack/aurelia_project/tasks/build.ext +++ /dev/null @@ -1,67 +0,0 @@ -// @if feat.babel -import webpackConfig from '../../webpack.config'; -import webpack from 'webpack'; -import project from '../aurelia.json'; -import gulp from 'gulp'; -import del from 'del'; -// @endif -// @if feat.typescript -import * as webpackConfig from '../../webpack.config'; -import * as webpack from 'webpack'; -import * as project from '../aurelia.json'; -import * as gulp from 'gulp'; -import * as del from 'del'; -// @endif -import {CLIOptions, Configuration} from 'aurelia-cli'; -import configureEnvironment from './environment'; - -const analyze = CLIOptions.hasFlag('analyze'); -const buildOptions = new Configuration(project.build.options); -const production = CLIOptions.getEnvironment() === 'prod'; -const server = buildOptions.isApplicable('server'); -const extractCss = buildOptions.isApplicable('extractCss'); -const coverage = buildOptions.isApplicable('coverage'); - -const config = webpackConfig({ - production, server, extractCss, coverage, analyze -}); -const compiler = webpack(/* @if feat.typescript **/* @endif */config); - -function buildWebpack(done) { - if (CLIOptions.hasFlag('watch')) { - compiler.watch({}, onBuild); - } else { - compiler.run(onBuild); - compiler.hooks.done.tap('done', () => done()); - } -} - -function onBuild(err, stats) { - if (!CLIOptions.hasFlag('watch') && err) { - console.error(err.stack || err); - if (err.details) console.error(err.details); - process.exit(1); - } else { - process.stdout.write(stats.toString({ colors: require('supports-color') }) + '\n'); - - if (!CLIOptions.hasFlag('watch') && stats.hasErrors()) { - process.exit(1); - } - } -} - -function clearDist() { - return del([config.output.path]); -} - -const build = gulp.series( - clearDist, - configureEnvironment, - buildWebpack -); - -export { - config, - buildWebpack, - build as default -}; diff --git a/skeleton/webpack/aurelia_project/tasks/build.json b/skeleton/webpack/aurelia_project/tasks/build.json deleted file mode 100644 index 27a093605..000000000 --- a/skeleton/webpack/aurelia_project/tasks/build.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "name": "build", - "description": "Builds and processes all application assets.", - "flags": [ - { - "name": "analyze", - "description": "Enable Webpack Bundle Analyzer. Typically paired with --env prod", - "type": "boolean" - }, - { - "name": "env", - "description": "Sets the build environment.", - "type": "string" - }, - { - "name": "watch", - "description": "Watches source files for changes and refreshes the bundles automatically.", - "type": "boolean" - } - ] -} diff --git a/skeleton/webpack/aurelia_project/tasks/run.ext b/skeleton/webpack/aurelia_project/tasks/run.ext deleted file mode 100644 index 003fea0a1..000000000 --- a/skeleton/webpack/aurelia_project/tasks/run.ext +++ /dev/null @@ -1,62 +0,0 @@ -// @if feat.babel -import webpack from 'webpack'; -import Server from 'webpack-dev-server'; -import project from '../aurelia.json'; -import gulp from 'gulp'; -// @endif -// @if feat.typescript -import * as webpack from 'webpack'; -import * as Server from 'webpack-dev-server'; -import * as project from '../aurelia.json'; -import * as gulp from 'gulp'; -// @endif - -import {config} from './build'; -import configureEnvironment from './environment'; -import {CLIOptions, reportWebpackReadiness} from 'aurelia-cli'; - -function runWebpack(done) { - // https://webpack.github.io/docs/webpack-dev-server.html - let opts = { - host: 'localhost', - publicPath: config.output.publicPath, - filename: config.output.filename, - hot: project.platform.hmr || CLIOptions.hasFlag('hmr'), - port: CLIOptions.getFlagValue('port') || project.platform.port, - contentBase: config.output.path, - historyApiFallback: true, - open: project.platform.open || CLIOptions.hasFlag('open'), - stats: { - colors: require('supports-color') - }, - ...config.devServer - }/* @if feat.typescript ** as any/* @endif */; - - // Add the webpack-dev-server client to the webpack entry point - // The path for the client to use such as `webpack-dev-server/client?http://${opts.host}:${opts.port}/` is not required - // The path used is derived from window.location in the browser and output.publicPath in the webpack.config. - if (project.platform.hmr || CLIOptions.hasFlag('hmr')) { - config.plugins.push(new webpack.HotModuleReplacementPlugin()); - config.entry.app.unshift('webpack-dev-server/client', 'webpack/hot/dev-server'); - } else { - // removed "" from index.ejs in favour of this method - config.entry.app.unshift('webpack-dev-server/client'); - } - - const compiler = webpack(config); - let server = new Server(compiler, opts); - - server.listen(opts.port, opts.host, function(err) { - if (err) throw err; - - reportWebpackReadiness(opts); - done(); - }); -} - -const run = gulp.series( - configureEnvironment, - runWebpack -); - -export { run as default }; diff --git a/skeleton/webpack/aurelia_project/tasks/run.json b/skeleton/webpack/aurelia_project/tasks/run.json deleted file mode 100644 index 99b409d69..000000000 --- a/skeleton/webpack/aurelia_project/tasks/run.json +++ /dev/null @@ -1,31 +0,0 @@ -{ - "name": "run", - "description": "Builds the application and serves up the assets via a local web server, watching files for changes as you work.", - "flags": [ - { - "name": "analyze", - "description": "Enable Webpack Bundle Analyzer. Typically paired with --env prod", - "type": "boolean" - }, - { - "name": "env", - "description": "Sets the build environment.", - "type": "string" - }, - { - "name": "hmr", - "description": "Enable Hot Module Reload", - "type": "boolean" - }, - { - "name": "port", - "description": "Set port number of the dev server", - "type": "string" - }, - { - "name": "open", - "description": "Open the default browser at the application location.", - "type": "boolean" - } - ] -} From bcd830b6ac00aa7c2c37b122da249a226e375b2a Mon Sep 17 00:00:00 2001 From: Sayan751 Date: Sun, 19 May 2019 19:37:50 +0200 Subject: [PATCH 06/16] Fixing environment json loader - Moved the environment jsons to another directory - Added options to load json modules in tsconfig - Changed the imports for environment - Lastly cleaned up loader with external package --- .../src => common/config}/environment.json | 0 .../config}/environment.production.json | 0 skeleton/common/tsconfig.json__if_typescript | 2 + skeleton/scaffold-minimum/src/main.ext | 2 +- skeleton/scaffold-navigation/src/main.ext | 2 +- .../aurelia_project/environment-loader.js | 45 ------------------- skeleton/webpack/package.json | 1 + skeleton/webpack/webpack.config.js | 2 +- 8 files changed, 6 insertions(+), 48 deletions(-) rename skeleton/{webpack/src => common/config}/environment.json (100%) rename skeleton/{webpack/src => common/config}/environment.production.json (100%) delete mode 100644 skeleton/webpack/aurelia_project/environment-loader.js diff --git a/skeleton/webpack/src/environment.json b/skeleton/common/config/environment.json similarity index 100% rename from skeleton/webpack/src/environment.json rename to skeleton/common/config/environment.json diff --git a/skeleton/webpack/src/environment.production.json b/skeleton/common/config/environment.production.json similarity index 100% rename from skeleton/webpack/src/environment.production.json rename to skeleton/common/config/environment.production.json diff --git a/skeleton/common/tsconfig.json__if_typescript b/skeleton/common/tsconfig.json__if_typescript index fadcfe313..af3629e08 100644 --- a/skeleton/common/tsconfig.json__if_typescript +++ b/skeleton/common/tsconfig.json__if_typescript @@ -44,6 +44,8 @@ "lib": ["es2015", "dom"], "moduleResolution": "node", "baseUrl": "src", + "resolveJsonModule": true, + "esModuleInterop": true, // @if feat.plugin "paths": { "resources": [ "" ] }, diff --git a/skeleton/scaffold-minimum/src/main.ext b/skeleton/scaffold-minimum/src/main.ext index 7ce184a19..b1d52cffa 100644 --- a/skeleton/scaffold-minimum/src/main.ext +++ b/skeleton/scaffold-minimum/src/main.ext @@ -6,7 +6,7 @@ import 'regenerator-runtime/runtime'; // @if feat.typescript import {Aurelia} from 'aurelia-framework' // @endif -import environment from './environment'; +import * as environment from '../config/environment.json'; // @if feat.webpack import {PLATFORM} from 'aurelia-pal'; // @endif diff --git a/skeleton/scaffold-navigation/src/main.ext b/skeleton/scaffold-navigation/src/main.ext index 7d27096d7..6af74b7df 100644 --- a/skeleton/scaffold-navigation/src/main.ext +++ b/skeleton/scaffold-navigation/src/main.ext @@ -7,7 +7,7 @@ import 'bootstrap'; // @if feat.typescript import {Aurelia} from 'aurelia-framework'; // @endif -import environment from './environment'; +import * as environment from '../config/environment.json'; // @if feat.webpack import {PLATFORM} from 'aurelia-pal'; // @endif diff --git a/skeleton/webpack/aurelia_project/environment-loader.js b/skeleton/webpack/aurelia_project/environment-loader.js deleted file mode 100644 index 4b54d0721..000000000 --- a/skeleton/webpack/aurelia_project/environment-loader.js +++ /dev/null @@ -1,45 +0,0 @@ -const fs = require('fs'); -const path = require('path'); -const { - getOptions -} = require('loader-utils'); -const validateOptions = require('schema-utils'); -const log = require('webpack-log'); - -const loaderName = 'environment-loader'; -const logger = log({ - name: loaderName -}); -const schema = { - env: 'string' -}; -const defaultOptions = { - env: "development" -}; - -const parseFileContent = (content, filePath) => { - try { - return JSON.parse(content); - } catch (e) { - logger.error(`Unable to parse the file ${filePath}; ${loaderName} can only be used to load and transform json files.`); - } -} - -module.exports = function (source) { - const options = Object.assign(defaultOptions, getOptions(this)); - validateOptions(schema, options, 'environment-loader'); - - const ext = path.extname(this.resourcePath); - const envFile = path.join(path.dirname(this.resourcePath), `${path.basename(this.resourcePath, ext)}.${options.env}${ext}`); - let envConfig = {}; - - if (fs.existsSync(envFile)) { - envConfig = parseFileContent(fs.readFileSync(envFile), envFile); - } - const sourceConfig = parseFileContent(source, this.resourcePath); - - return JSON.stringify({ - ...sourceConfig, - ...envConfig - }); -}; diff --git a/skeleton/webpack/package.json b/skeleton/webpack/package.json index 2a51a0241..3c2980da6 100644 --- a/skeleton/webpack/package.json +++ b/skeleton/webpack/package.json @@ -64,6 +64,7 @@ "del": "", "css-loader": "", "file-loader": "", + "app-settings-loader": "", "json-loader": "", "html-loader": "", "istanbul-instrumenter-loader": "", diff --git a/skeleton/webpack/webpack.config.js b/skeleton/webpack/webpack.config.js index a27bd17c3..b6659226b 100644 --- a/skeleton/webpack/webpack.config.js +++ b/skeleton/webpack/webpack.config.js @@ -292,7 +292,7 @@ module.exports = ({ production, extractCss, analyze, tests, hmr } = {}) => ({ // load these fonts normally, as files: { test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'file-loader' }, { test: /environment\.json$/i, use: [ - {loader: path.resolve("./aurelia_project/environment-loader.js"), query: {env: production ? 'production' : 'development' }}, + {loader: "app-settings-loader", options: {env: production ? 'production' : 'development' }}, ]}, // @if feat.typescript ...when(tests, { From 2e728aa69fe8dfcfdb740b8c6dc56dbbf6b44e25 Mon Sep 17 00:00:00 2001 From: Sayan751 Date: Sun, 19 May 2019 21:21:17 +0200 Subject: [PATCH 07/16] fixed the gulp file --- skeleton/webpack/gulpFile.js | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/skeleton/webpack/gulpFile.js b/skeleton/webpack/gulpFile.js index 62888620e..5dfeb25ed 100644 --- a/skeleton/webpack/gulpFile.js +++ b/skeleton/webpack/gulpFile.js @@ -1,17 +1,10 @@ -// @if feat.babel -import gulp from 'gulp'; -import del from 'del'; -// @endif -// @if feat.typescript -import * as gulp from 'gulp'; -import * as del from 'del'; -// @endif +const del = require('del'); +const gulp = require('gulp'); +const path = require('path'); +const project = require('./aurelia_project/aurelia.json'); function clearDist() { - return del([config.output.path]); + return del([path.resolve(__dirname, project.platform.output)]); } -gulp.task("prebuild", gulp.series( - clearDist, - configureEnvironment -)); +gulp.task("prebuild", clearDist); \ No newline at end of file From 7be19b59cc6338310620c7b522919a19907cfc1d Mon Sep 17 00:00:00 2001 From: Sayan751 Date: Mon, 20 May 2019 20:13:39 +0200 Subject: [PATCH 08/16] replaced 'au run' with 'npm start' - release check --- build/tasks/release-checks/suite-steps.js | 10 +++---- .../tests/generic/au-protractor.js | 2 +- .../release-checks/tests/webpack/au-run.js | 30 +++++++++---------- 3 files changed, 21 insertions(+), 21 deletions(-) diff --git a/build/tasks/release-checks/suite-steps.js b/build/tasks/release-checks/suite-steps.js index ce584c821..472911c15 100644 --- a/build/tasks/release-checks/suite-steps.js +++ b/build/tasks/release-checks/suite-steps.js @@ -65,11 +65,11 @@ module.exports = function(suite) { if (applicable(features, 'webpack')) { steps.push( - new tests.webpack.AuRunDoesNotThrowCommandLineErrors(), - new tests.webpack.AuRunLaunchesServer(), - new tests.webpack.AuRunRendersPage(), - new tests.webpack.AuRunAppLaunchesWithoutJavascriptErrors(), - new tests.webpack.AuRunWatchPicksUpFileChanges() + new tests.webpack.NpmStartDoesNotThrowCommandLineErrors(), + new tests.webpack.NpmStartLaunchesServer(), + new tests.webpack.NpmStartRendersPage(), + new tests.webpack.NpmStartAppLaunchesWithoutJavascriptErrors(), + new tests.webpack.NpmStartWatchPicksUpFileChanges() ); } diff --git a/build/tasks/release-checks/tests/generic/au-protractor.js b/build/tasks/release-checks/tests/generic/au-protractor.js index 024dfbe07..07dfd087b 100644 --- a/build/tasks/release-checks/tests/generic/au-protractor.js +++ b/build/tasks/release-checks/tests/generic/au-protractor.js @@ -27,7 +27,7 @@ class AuProtractorRunsTests extends Test { } execute() { - this.executeCommand = new ExecuteCommand('au', ['run'], (msg) => this.onOutput(msg)); + this.executeCommand = new ExecuteCommand('npm', ['start'], (msg) => this.onOutput(msg)); return this.executeCommand.executeAsNodeScript(); } } diff --git a/build/tasks/release-checks/tests/webpack/au-run.js b/build/tasks/release-checks/tests/webpack/au-run.js index ccbafa1c1..ffa67001a 100644 --- a/build/tasks/release-checks/tests/webpack/au-run.js +++ b/build/tasks/release-checks/tests/webpack/au-run.js @@ -6,7 +6,7 @@ const StepRunner = require('../../step-runner'); const path = require('path'); const fs = require('fs'); -class AuRunDoesNotThrowCommandLineErrors extends Test { +class NpmStartDoesNotThrowCommandLineErrors extends Test { constructor() { super('au run does not throw commandline errors'); } @@ -24,12 +24,12 @@ class AuRunDoesNotThrowCommandLineErrors extends Test { } execute() { - this.executeCommand = new ExecuteCommand('au', ['run'], (msg) => this.onOutput(msg)); + this.executeCommand = new ExecuteCommand('npm', ['start'], (msg) => this.onOutput(msg)); return this.executeCommand.executeAsNodeScript(); } } -class AuRunLaunchesServer extends Test { +class NpmStartLaunchesServer extends Test { constructor() { super('au run launches server'); } @@ -44,12 +44,12 @@ class AuRunLaunchesServer extends Test { } execute() { - this.executeCommand = new ExecuteCommand('au', ['run'], (msg) => this.onOutput(msg)); + this.executeCommand = new ExecuteCommand('npm', ['start'], (msg) => this.onOutput(msg)); return this.executeCommand.executeAsNodeScript(); } } -class AuRunWatchPicksUpFileChanges extends Test { +class NpmStartWatchPicksUpFileChanges extends Test { constructor(fileToChange) { super('au run picks up file changes'); @@ -99,12 +99,12 @@ class AuRunWatchPicksUpFileChanges extends Test { execute(context) { this.context = context; - this.executeCommand = new ExecuteCommand('au', ['run'], (msg) => this.onOutput(msg)); + this.executeCommand = new ExecuteCommand('npm', ['start'], (msg) => this.onOutput(msg)); return this.executeCommand.executeAsNodeScript(); } } -class AuRunAppLaunchesWithoutJavascriptErrors extends Test { +class NpmStartAppLaunchesWithoutJavascriptErrors extends Test { constructor() { super('au run app launches without javascript errors'); } @@ -126,12 +126,12 @@ class AuRunAppLaunchesWithoutJavascriptErrors extends Test { } execute() { - this.executeCommand = new ExecuteCommand('au', ['run'], (msg) => this.onOutput(msg)); + this.executeCommand = new ExecuteCommand('npm', ['start'], (msg) => this.onOutput(msg)); return this.executeCommand.executeAsNodeScript(); } } -class AuRunRendersPage extends Test { +class NpmStartRendersPage extends Test { constructor() { super('au run renders page'); } @@ -153,7 +153,7 @@ class AuRunRendersPage extends Test { } execute(context) { - this.executeCommand = new ExecuteCommand('au', ['run'], (msg) => this.onOutput(context, msg)); + this.executeCommand = new ExecuteCommand('npm', ['start'], (msg) => this.onOutput(context, msg)); return this.executeCommand.executeAsNodeScript(); } } @@ -169,9 +169,9 @@ function getURL(msg) { } module.exports = { - AuRunDoesNotThrowCommandLineErrors, - AuRunLaunchesServer, - AuRunWatchPicksUpFileChanges, - AuRunAppLaunchesWithoutJavascriptErrors, - AuRunRendersPage + NpmStartDoesNotThrowCommandLineErrors, + NpmStartLaunchesServer, + NpmStartWatchPicksUpFileChanges, + NpmStartAppLaunchesWithoutJavascriptErrors, + NpmStartRendersPage }; From 4b43a3a1471520c045359f1ee567bd711295088d Mon Sep 17 00:00:00 2001 From: Sayan751 Date: Mon, 20 May 2019 22:19:50 +0200 Subject: [PATCH 09/16] removed 'au run' with 'npm start' - cypress check --- build/tasks/release-checks/tests/generic/au-cypress.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/build/tasks/release-checks/tests/generic/au-cypress.js b/build/tasks/release-checks/tests/generic/au-cypress.js index ae0c82f14..be455bfb8 100644 --- a/build/tasks/release-checks/tests/generic/au-cypress.js +++ b/build/tasks/release-checks/tests/generic/au-cypress.js @@ -30,7 +30,7 @@ class AuCypressRunsTests extends Test { } execute() { - this.executeCommand = new ExecuteCommand('au', ['run'], (msg) => this.onOutput(msg)); + this.executeCommand = new ExecuteCommand('npm', ['start'], (msg) => this.onOutput(msg)); return this.executeCommand.executeAsNodeScript(); } } From 34948886be7367ac72e83d9e8fbb87ab400dd20f Mon Sep 17 00:00:00 2001 From: Sayan751 Date: Tue, 21 May 2019 20:37:59 +0200 Subject: [PATCH 10/16] Added a different port fot dotnet-core --- skeleton/webpack/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/skeleton/webpack/package.json b/skeleton/webpack/package.json index 3c2980da6..967c56be9 100644 --- a/skeleton/webpack/package.json +++ b/skeleton/webpack/package.json @@ -75,6 +75,6 @@ "build": "gulp prebuild && webpack --env.production --env.extractCss", "build:dev": "gulp prebuild && webpack --env.extractCss", "analyze": "webpack --env.production --env.analyze", - "start": "gulp prebuild && webpack-dev-server --env.extractCss" + "start": "gulp prebuild && webpack-dev-server --env.extractCss // @if feat['dotnet-core'] --port 5000 // @endif" } } \ No newline at end of file From a4511aaa12532bcc3da3c0a3fd6ed5f4672bbf37 Mon Sep 17 00:00:00 2001 From: Sayan751 Date: Tue, 21 May 2019 20:46:27 +0200 Subject: [PATCH 11/16] correcting the npm start script --- skeleton/webpack/package.json | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/skeleton/webpack/package.json b/skeleton/webpack/package.json index 967c56be9..6b687531a 100644 --- a/skeleton/webpack/package.json +++ b/skeleton/webpack/package.json @@ -75,6 +75,12 @@ "build": "gulp prebuild && webpack --env.production --env.extractCss", "build:dev": "gulp prebuild && webpack --env.extractCss", "analyze": "webpack --env.production --env.analyze", - "start": "gulp prebuild && webpack-dev-server --env.extractCss // @if feat['dotnet-core'] --port 5000 // @endif" + // @if feat['dotnet-core'] + "start": "gulp prebuild && webpack-dev-server --env.extractCss --port 5000" + // @endif + + // @if feat.web + "start": "gulp prebuild && webpack-dev-server --env.extractCss --port 8080" + // @endif } } \ No newline at end of file From 55a0f5d1bd02d6bcdbf1ee7dec24976d406819db Mon Sep 17 00:00:00 2001 From: Sayan751 Date: Wed, 22 May 2019 17:19:21 +0200 Subject: [PATCH 12/16] changed ts-loader Removed limiting options, so that ts-loader can compilespec.ts files during tests. --- skeleton/webpack/webpack.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/skeleton/webpack/webpack.config.js b/skeleton/webpack/webpack.config.js index b6659226b..a0e0dd783 100644 --- a/skeleton/webpack/webpack.config.js +++ b/skeleton/webpack/webpack.config.js @@ -283,7 +283,7 @@ module.exports = ({ production, extractCss, analyze, tests, hmr } = {}) => ({ }, // @endif // @if feat.typescript - { test: /\.ts$/, loader: "ts-loader", options: { reportFiles: [ srcDir+'/**/*.ts'] }, include: srcDir }, + { test: /\.ts$/, loader: "ts-loader" }, // @endif // embed small images and fonts as Data Urls and larger ones as files: { test: /\.(png|gif|jpg|cur)$/i, loader: 'url-loader', options: { limit: 8192 } }, From aa4d785649ec6f2dbe8a04976ff32db8ffe4d703 Mon Sep 17 00:00:00 2001 From: Sayan751 Date: Wed, 22 May 2019 21:01:38 +0200 Subject: [PATCH 13/16] enabled typeroots for all --- skeleton/common/tsconfig.json__if_typescript | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/skeleton/common/tsconfig.json__if_typescript b/skeleton/common/tsconfig.json__if_typescript index af3629e08..571251940 100644 --- a/skeleton/common/tsconfig.json__if_typescript +++ b/skeleton/common/tsconfig.json__if_typescript @@ -32,10 +32,8 @@ "types": ["node", "jest"], // @endif - // @if feat.webpack && feat['postcss-typical'] && feat.protractor "typeRoots": ["./node_modules/@types"], - // @endif - + "removeComments": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, From 015d344aa3b621da511861d19140c34f1699d0f7 Mon Sep 17 00:00:00 2001 From: Sayan751 Date: Thu, 23 May 2019 16:37:02 +0200 Subject: [PATCH 14/16] Post review changes #1 --- build/tasks/release-checks/tests/webpack/index.js | 2 +- .../tests/webpack/{au-run.js => npm-run.js} | 12 ++++++------ skeleton/common/tsconfig.json__if_typescript | 1 - 3 files changed, 7 insertions(+), 8 deletions(-) rename build/tasks/release-checks/tests/webpack/{au-run.js => npm-run.js} (93%) diff --git a/build/tasks/release-checks/tests/webpack/index.js b/build/tasks/release-checks/tests/webpack/index.js index 1d098164b..8fe2ccc01 100644 --- a/build/tasks/release-checks/tests/webpack/index.js +++ b/build/tasks/release-checks/tests/webpack/index.js @@ -1,3 +1,3 @@ module.exports = { - ...require('./au-run') + ...require('./npm-start') }; diff --git a/build/tasks/release-checks/tests/webpack/au-run.js b/build/tasks/release-checks/tests/webpack/npm-run.js similarity index 93% rename from build/tasks/release-checks/tests/webpack/au-run.js rename to build/tasks/release-checks/tests/webpack/npm-run.js index ffa67001a..02b3906c1 100644 --- a/build/tasks/release-checks/tests/webpack/au-run.js +++ b/build/tasks/release-checks/tests/webpack/npm-run.js @@ -8,7 +8,7 @@ const fs = require('fs'); class NpmStartDoesNotThrowCommandLineErrors extends Test { constructor() { - super('au run does not throw commandline errors'); + super('npm start does not throw commandline errors'); } onOutput(message) { @@ -31,7 +31,7 @@ class NpmStartDoesNotThrowCommandLineErrors extends Test { class NpmStartLaunchesServer extends Test { constructor() { - super('au run launches server'); + super('npm start launches server'); } onOutput(message) { @@ -51,7 +51,7 @@ class NpmStartLaunchesServer extends Test { class NpmStartWatchPicksUpFileChanges extends Test { constructor(fileToChange) { - super('au run picks up file changes'); + super('npm start picks up file changes'); this.fileToChange = fileToChange || path.join('src', 'app.html'); this.watchingForFileChangeNotification = false; @@ -106,7 +106,7 @@ class NpmStartWatchPicksUpFileChanges extends Test { class NpmStartAppLaunchesWithoutJavascriptErrors extends Test { constructor() { - super('au run app launches without javascript errors'); + super('npm start app launches without javascript errors'); } onOutput(message) { @@ -133,7 +133,7 @@ class NpmStartAppLaunchesWithoutJavascriptErrors extends Test { class NpmStartRendersPage extends Test { constructor() { - super('au run renders page'); + super('npm start renders page'); } onOutput(context, message) { @@ -142,7 +142,7 @@ class NpmStartRendersPage extends Test { if (isApplicationAvailableMessage(message)) { const url = getURL(message); - const screenshot = new TakeScreenShotOfPage(url, path.join(context.resultOutputFolder, 'screenshot-of-au-run.png')); + const screenshot = new TakeScreenShotOfPage(url, path.join(context.resultOutputFolder, 'screenshot-of-npm-start.png')); return new StepRunner(screenshot).run() .then(() => { diff --git a/skeleton/common/tsconfig.json__if_typescript b/skeleton/common/tsconfig.json__if_typescript index 571251940..18cfbb56c 100644 --- a/skeleton/common/tsconfig.json__if_typescript +++ b/skeleton/common/tsconfig.json__if_typescript @@ -43,7 +43,6 @@ "moduleResolution": "node", "baseUrl": "src", "resolveJsonModule": true, - "esModuleInterop": true, // @if feat.plugin "paths": { "resources": [ "" ] }, From da3379fe24f22b983c5ca6d70d174ed59af6540f Mon Sep 17 00:00:00 2001 From: Sayan751 Date: Thu, 23 May 2019 17:07:29 +0200 Subject: [PATCH 15/16] fixed import --- build/tasks/release-checks/tests/webpack/index.js | 2 +- build/tasks/release-checks/tests/webpack/{npm-run.js => run.js} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename build/tasks/release-checks/tests/webpack/{npm-run.js => run.js} (100%) diff --git a/build/tasks/release-checks/tests/webpack/index.js b/build/tasks/release-checks/tests/webpack/index.js index 8fe2ccc01..1b996242d 100644 --- a/build/tasks/release-checks/tests/webpack/index.js +++ b/build/tasks/release-checks/tests/webpack/index.js @@ -1,3 +1,3 @@ module.exports = { - ...require('./npm-start') + ...require('./run') }; diff --git a/build/tasks/release-checks/tests/webpack/npm-run.js b/build/tasks/release-checks/tests/webpack/run.js similarity index 100% rename from build/tasks/release-checks/tests/webpack/npm-run.js rename to build/tasks/release-checks/tests/webpack/run.js From f818c54fec7781f61074e0916d7ddbae2004d340 Mon Sep 17 00:00:00 2001 From: Sayan751 Date: Thu, 16 May 2019 00:01:56 +0200 Subject: [PATCH 16/16] (webpack):enable CLI-less webpack build, and run Usage of aurelia-cli is removed from building and running the webpack apps. This gives developers more control over webpack, and a way to easily change the configuration, without aurelia-cli meddling in between. The commands `au run` or `au build` will not work anymore in the webpack apps, use `npm start`, or `npm run build` instead. This commit closes the webpack part of the the issue #1098. --- build/tasks/release-checks/suite-steps.js | 10 +-- .../tests/generic/au-cypress.js | 2 +- .../tests/generic/au-protractor.js | 2 +- .../release-checks/tests/webpack/index.js | 2 +- .../tests/webpack/{au-run.js => run.js} | 42 ++++++------ skeleton/common/config/environment.json | 4 ++ .../common/config/environment.production.json | 4 ++ skeleton/common/tsconfig.json__if_typescript | 5 +- skeleton/scaffold-minimum/src/main.ext | 2 +- skeleton/scaffold-navigation/src/main.ext | 2 +- skeleton/webpack/README.md | 12 ++-- .../webpack/aurelia_project/tasks/build.ext | 67 ------------------- .../webpack/aurelia_project/tasks/build.json | 21 ------ .../webpack/aurelia_project/tasks/run.ext | 62 ----------------- .../webpack/aurelia_project/tasks/run.json | 31 --------- skeleton/webpack/gulpFile.js | 10 +++ skeleton/webpack/package.json | 13 ++++ skeleton/webpack/webpack.config.js | 20 +++--- 18 files changed, 81 insertions(+), 230 deletions(-) rename build/tasks/release-checks/tests/webpack/{au-run.js => run.js} (73%) create mode 100644 skeleton/common/config/environment.json create mode 100644 skeleton/common/config/environment.production.json delete mode 100644 skeleton/webpack/aurelia_project/tasks/build.ext delete mode 100644 skeleton/webpack/aurelia_project/tasks/build.json delete mode 100644 skeleton/webpack/aurelia_project/tasks/run.ext delete mode 100644 skeleton/webpack/aurelia_project/tasks/run.json create mode 100644 skeleton/webpack/gulpFile.js diff --git a/build/tasks/release-checks/suite-steps.js b/build/tasks/release-checks/suite-steps.js index ce584c821..472911c15 100644 --- a/build/tasks/release-checks/suite-steps.js +++ b/build/tasks/release-checks/suite-steps.js @@ -65,11 +65,11 @@ module.exports = function(suite) { if (applicable(features, 'webpack')) { steps.push( - new tests.webpack.AuRunDoesNotThrowCommandLineErrors(), - new tests.webpack.AuRunLaunchesServer(), - new tests.webpack.AuRunRendersPage(), - new tests.webpack.AuRunAppLaunchesWithoutJavascriptErrors(), - new tests.webpack.AuRunWatchPicksUpFileChanges() + new tests.webpack.NpmStartDoesNotThrowCommandLineErrors(), + new tests.webpack.NpmStartLaunchesServer(), + new tests.webpack.NpmStartRendersPage(), + new tests.webpack.NpmStartAppLaunchesWithoutJavascriptErrors(), + new tests.webpack.NpmStartWatchPicksUpFileChanges() ); } diff --git a/build/tasks/release-checks/tests/generic/au-cypress.js b/build/tasks/release-checks/tests/generic/au-cypress.js index ae0c82f14..be455bfb8 100644 --- a/build/tasks/release-checks/tests/generic/au-cypress.js +++ b/build/tasks/release-checks/tests/generic/au-cypress.js @@ -30,7 +30,7 @@ class AuCypressRunsTests extends Test { } execute() { - this.executeCommand = new ExecuteCommand('au', ['run'], (msg) => this.onOutput(msg)); + this.executeCommand = new ExecuteCommand('npm', ['start'], (msg) => this.onOutput(msg)); return this.executeCommand.executeAsNodeScript(); } } diff --git a/build/tasks/release-checks/tests/generic/au-protractor.js b/build/tasks/release-checks/tests/generic/au-protractor.js index 024dfbe07..07dfd087b 100644 --- a/build/tasks/release-checks/tests/generic/au-protractor.js +++ b/build/tasks/release-checks/tests/generic/au-protractor.js @@ -27,7 +27,7 @@ class AuProtractorRunsTests extends Test { } execute() { - this.executeCommand = new ExecuteCommand('au', ['run'], (msg) => this.onOutput(msg)); + this.executeCommand = new ExecuteCommand('npm', ['start'], (msg) => this.onOutput(msg)); return this.executeCommand.executeAsNodeScript(); } } diff --git a/build/tasks/release-checks/tests/webpack/index.js b/build/tasks/release-checks/tests/webpack/index.js index 1d098164b..1b996242d 100644 --- a/build/tasks/release-checks/tests/webpack/index.js +++ b/build/tasks/release-checks/tests/webpack/index.js @@ -1,3 +1,3 @@ module.exports = { - ...require('./au-run') + ...require('./run') }; diff --git a/build/tasks/release-checks/tests/webpack/au-run.js b/build/tasks/release-checks/tests/webpack/run.js similarity index 73% rename from build/tasks/release-checks/tests/webpack/au-run.js rename to build/tasks/release-checks/tests/webpack/run.js index ccbafa1c1..02b3906c1 100644 --- a/build/tasks/release-checks/tests/webpack/au-run.js +++ b/build/tasks/release-checks/tests/webpack/run.js @@ -6,9 +6,9 @@ const StepRunner = require('../../step-runner'); const path = require('path'); const fs = require('fs'); -class AuRunDoesNotThrowCommandLineErrors extends Test { +class NpmStartDoesNotThrowCommandLineErrors extends Test { constructor() { - super('au run does not throw commandline errors'); + super('npm start does not throw commandline errors'); } onOutput(message) { @@ -24,14 +24,14 @@ class AuRunDoesNotThrowCommandLineErrors extends Test { } execute() { - this.executeCommand = new ExecuteCommand('au', ['run'], (msg) => this.onOutput(msg)); + this.executeCommand = new ExecuteCommand('npm', ['start'], (msg) => this.onOutput(msg)); return this.executeCommand.executeAsNodeScript(); } } -class AuRunLaunchesServer extends Test { +class NpmStartLaunchesServer extends Test { constructor() { - super('au run launches server'); + super('npm start launches server'); } onOutput(message) { @@ -44,14 +44,14 @@ class AuRunLaunchesServer extends Test { } execute() { - this.executeCommand = new ExecuteCommand('au', ['run'], (msg) => this.onOutput(msg)); + this.executeCommand = new ExecuteCommand('npm', ['start'], (msg) => this.onOutput(msg)); return this.executeCommand.executeAsNodeScript(); } } -class AuRunWatchPicksUpFileChanges extends Test { +class NpmStartWatchPicksUpFileChanges extends Test { constructor(fileToChange) { - super('au run picks up file changes'); + super('npm start picks up file changes'); this.fileToChange = fileToChange || path.join('src', 'app.html'); this.watchingForFileChangeNotification = false; @@ -99,14 +99,14 @@ class AuRunWatchPicksUpFileChanges extends Test { execute(context) { this.context = context; - this.executeCommand = new ExecuteCommand('au', ['run'], (msg) => this.onOutput(msg)); + this.executeCommand = new ExecuteCommand('npm', ['start'], (msg) => this.onOutput(msg)); return this.executeCommand.executeAsNodeScript(); } } -class AuRunAppLaunchesWithoutJavascriptErrors extends Test { +class NpmStartAppLaunchesWithoutJavascriptErrors extends Test { constructor() { - super('au run app launches without javascript errors'); + super('npm start app launches without javascript errors'); } onOutput(message) { @@ -126,14 +126,14 @@ class AuRunAppLaunchesWithoutJavascriptErrors extends Test { } execute() { - this.executeCommand = new ExecuteCommand('au', ['run'], (msg) => this.onOutput(msg)); + this.executeCommand = new ExecuteCommand('npm', ['start'], (msg) => this.onOutput(msg)); return this.executeCommand.executeAsNodeScript(); } } -class AuRunRendersPage extends Test { +class NpmStartRendersPage extends Test { constructor() { - super('au run renders page'); + super('npm start renders page'); } onOutput(context, message) { @@ -142,7 +142,7 @@ class AuRunRendersPage extends Test { if (isApplicationAvailableMessage(message)) { const url = getURL(message); - const screenshot = new TakeScreenShotOfPage(url, path.join(context.resultOutputFolder, 'screenshot-of-au-run.png')); + const screenshot = new TakeScreenShotOfPage(url, path.join(context.resultOutputFolder, 'screenshot-of-npm-start.png')); return new StepRunner(screenshot).run() .then(() => { @@ -153,7 +153,7 @@ class AuRunRendersPage extends Test { } execute(context) { - this.executeCommand = new ExecuteCommand('au', ['run'], (msg) => this.onOutput(context, msg)); + this.executeCommand = new ExecuteCommand('npm', ['start'], (msg) => this.onOutput(context, msg)); return this.executeCommand.executeAsNodeScript(); } } @@ -169,9 +169,9 @@ function getURL(msg) { } module.exports = { - AuRunDoesNotThrowCommandLineErrors, - AuRunLaunchesServer, - AuRunWatchPicksUpFileChanges, - AuRunAppLaunchesWithoutJavascriptErrors, - AuRunRendersPage + NpmStartDoesNotThrowCommandLineErrors, + NpmStartLaunchesServer, + NpmStartWatchPicksUpFileChanges, + NpmStartAppLaunchesWithoutJavascriptErrors, + NpmStartRendersPage }; diff --git a/skeleton/common/config/environment.json b/skeleton/common/config/environment.json new file mode 100644 index 000000000..a32129fd0 --- /dev/null +++ b/skeleton/common/config/environment.json @@ -0,0 +1,4 @@ +{ + "debug": true, + "testing": true +} \ No newline at end of file diff --git a/skeleton/common/config/environment.production.json b/skeleton/common/config/environment.production.json new file mode 100644 index 000000000..9ddbb4430 --- /dev/null +++ b/skeleton/common/config/environment.production.json @@ -0,0 +1,4 @@ +{ + "debug": false, + "testing": false +} \ No newline at end of file diff --git a/skeleton/common/tsconfig.json__if_typescript b/skeleton/common/tsconfig.json__if_typescript index fadcfe313..18cfbb56c 100644 --- a/skeleton/common/tsconfig.json__if_typescript +++ b/skeleton/common/tsconfig.json__if_typescript @@ -32,10 +32,8 @@ "types": ["node", "jest"], // @endif - // @if feat.webpack && feat['postcss-typical'] && feat.protractor "typeRoots": ["./node_modules/@types"], - // @endif - + "removeComments": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, @@ -44,6 +42,7 @@ "lib": ["es2015", "dom"], "moduleResolution": "node", "baseUrl": "src", + "resolveJsonModule": true, // @if feat.plugin "paths": { "resources": [ "" ] }, diff --git a/skeleton/scaffold-minimum/src/main.ext b/skeleton/scaffold-minimum/src/main.ext index 7ce184a19..b1d52cffa 100644 --- a/skeleton/scaffold-minimum/src/main.ext +++ b/skeleton/scaffold-minimum/src/main.ext @@ -6,7 +6,7 @@ import 'regenerator-runtime/runtime'; // @if feat.typescript import {Aurelia} from 'aurelia-framework' // @endif -import environment from './environment'; +import * as environment from '../config/environment.json'; // @if feat.webpack import {PLATFORM} from 'aurelia-pal'; // @endif diff --git a/skeleton/scaffold-navigation/src/main.ext b/skeleton/scaffold-navigation/src/main.ext index 7d27096d7..6af74b7df 100644 --- a/skeleton/scaffold-navigation/src/main.ext +++ b/skeleton/scaffold-navigation/src/main.ext @@ -7,7 +7,7 @@ import 'bootstrap'; // @if feat.typescript import {Aurelia} from 'aurelia-framework'; // @endif -import environment from './environment'; +import * as environment from '../config/environment.json'; // @if feat.webpack import {PLATFORM} from 'aurelia-pal'; // @endif diff --git a/skeleton/webpack/README.md b/skeleton/webpack/README.md index ba3ea9c6a..118f9f347 100644 --- a/skeleton/webpack/README.md +++ b/skeleton/webpack/README.md @@ -2,16 +2,14 @@ For more information, go to https://aurelia.io/docs/cli/webpack ## Run dev app -Run `au run`, then open `http://localhost:/* @if feat.web */8080/* @endif *//* @if feat['dotnet-core'] */5000/* @endif */` +Run `npm start`, then open `http://localhost:/* @if feat.web */8080/* @endif *//* @if feat['dotnet-core'] */5000/* @endif */` -To open browser automatically, do `au run --open`. +You can change the standard webpack configurations from CLI easily with something like this: `npm start -- --open --port 8888`. However, it is better to change the respective npm scripts or `webpack.config.js` with these options, as per your need. -To change dev server port, do `au run --port 8888`. +To enable Webpack Bundle Analyzer, do `npm run analyze` (production build). -To enable Webpack Bundle Analyzer, do `au run --analyze`. - -To enable hot module reload, do `au run --hmr`. +To enable hot module reload, do `npm start -- --env.hmr`. ## Build for production -Run `au build --env prod`. +Run `npm run build`. diff --git a/skeleton/webpack/aurelia_project/tasks/build.ext b/skeleton/webpack/aurelia_project/tasks/build.ext deleted file mode 100644 index e386af35a..000000000 --- a/skeleton/webpack/aurelia_project/tasks/build.ext +++ /dev/null @@ -1,67 +0,0 @@ -// @if feat.babel -import webpackConfig from '../../webpack.config'; -import webpack from 'webpack'; -import project from '../aurelia.json'; -import gulp from 'gulp'; -import del from 'del'; -// @endif -// @if feat.typescript -import * as webpackConfig from '../../webpack.config'; -import * as webpack from 'webpack'; -import * as project from '../aurelia.json'; -import * as gulp from 'gulp'; -import * as del from 'del'; -// @endif -import {CLIOptions, Configuration} from 'aurelia-cli'; -import configureEnvironment from './environment'; - -const analyze = CLIOptions.hasFlag('analyze'); -const buildOptions = new Configuration(project.build.options); -const production = CLIOptions.getEnvironment() === 'prod'; -const server = buildOptions.isApplicable('server'); -const extractCss = buildOptions.isApplicable('extractCss'); -const coverage = buildOptions.isApplicable('coverage'); - -const config = webpackConfig({ - production, server, extractCss, coverage, analyze -}); -const compiler = webpack(/* @if feat.typescript **/* @endif */config); - -function buildWebpack(done) { - if (CLIOptions.hasFlag('watch')) { - compiler.watch({}, onBuild); - } else { - compiler.run(onBuild); - compiler.hooks.done.tap('done', () => done()); - } -} - -function onBuild(err, stats) { - if (!CLIOptions.hasFlag('watch') && err) { - console.error(err.stack || err); - if (err.details) console.error(err.details); - process.exit(1); - } else { - process.stdout.write(stats.toString({ colors: require('supports-color') }) + '\n'); - - if (!CLIOptions.hasFlag('watch') && stats.hasErrors()) { - process.exit(1); - } - } -} - -function clearDist() { - return del([config.output.path]); -} - -const build = gulp.series( - clearDist, - configureEnvironment, - buildWebpack -); - -export { - config, - buildWebpack, - build as default -}; diff --git a/skeleton/webpack/aurelia_project/tasks/build.json b/skeleton/webpack/aurelia_project/tasks/build.json deleted file mode 100644 index 27a093605..000000000 --- a/skeleton/webpack/aurelia_project/tasks/build.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "name": "build", - "description": "Builds and processes all application assets.", - "flags": [ - { - "name": "analyze", - "description": "Enable Webpack Bundle Analyzer. Typically paired with --env prod", - "type": "boolean" - }, - { - "name": "env", - "description": "Sets the build environment.", - "type": "string" - }, - { - "name": "watch", - "description": "Watches source files for changes and refreshes the bundles automatically.", - "type": "boolean" - } - ] -} diff --git a/skeleton/webpack/aurelia_project/tasks/run.ext b/skeleton/webpack/aurelia_project/tasks/run.ext deleted file mode 100644 index 003fea0a1..000000000 --- a/skeleton/webpack/aurelia_project/tasks/run.ext +++ /dev/null @@ -1,62 +0,0 @@ -// @if feat.babel -import webpack from 'webpack'; -import Server from 'webpack-dev-server'; -import project from '../aurelia.json'; -import gulp from 'gulp'; -// @endif -// @if feat.typescript -import * as webpack from 'webpack'; -import * as Server from 'webpack-dev-server'; -import * as project from '../aurelia.json'; -import * as gulp from 'gulp'; -// @endif - -import {config} from './build'; -import configureEnvironment from './environment'; -import {CLIOptions, reportWebpackReadiness} from 'aurelia-cli'; - -function runWebpack(done) { - // https://webpack.github.io/docs/webpack-dev-server.html - let opts = { - host: 'localhost', - publicPath: config.output.publicPath, - filename: config.output.filename, - hot: project.platform.hmr || CLIOptions.hasFlag('hmr'), - port: CLIOptions.getFlagValue('port') || project.platform.port, - contentBase: config.output.path, - historyApiFallback: true, - open: project.platform.open || CLIOptions.hasFlag('open'), - stats: { - colors: require('supports-color') - }, - ...config.devServer - }/* @if feat.typescript ** as any/* @endif */; - - // Add the webpack-dev-server client to the webpack entry point - // The path for the client to use such as `webpack-dev-server/client?http://${opts.host}:${opts.port}/` is not required - // The path used is derived from window.location in the browser and output.publicPath in the webpack.config. - if (project.platform.hmr || CLIOptions.hasFlag('hmr')) { - config.plugins.push(new webpack.HotModuleReplacementPlugin()); - config.entry.app.unshift('webpack-dev-server/client', 'webpack/hot/dev-server'); - } else { - // removed "" from index.ejs in favour of this method - config.entry.app.unshift('webpack-dev-server/client'); - } - - const compiler = webpack(config); - let server = new Server(compiler, opts); - - server.listen(opts.port, opts.host, function(err) { - if (err) throw err; - - reportWebpackReadiness(opts); - done(); - }); -} - -const run = gulp.series( - configureEnvironment, - runWebpack -); - -export { run as default }; diff --git a/skeleton/webpack/aurelia_project/tasks/run.json b/skeleton/webpack/aurelia_project/tasks/run.json deleted file mode 100644 index 99b409d69..000000000 --- a/skeleton/webpack/aurelia_project/tasks/run.json +++ /dev/null @@ -1,31 +0,0 @@ -{ - "name": "run", - "description": "Builds the application and serves up the assets via a local web server, watching files for changes as you work.", - "flags": [ - { - "name": "analyze", - "description": "Enable Webpack Bundle Analyzer. Typically paired with --env prod", - "type": "boolean" - }, - { - "name": "env", - "description": "Sets the build environment.", - "type": "string" - }, - { - "name": "hmr", - "description": "Enable Hot Module Reload", - "type": "boolean" - }, - { - "name": "port", - "description": "Set port number of the dev server", - "type": "string" - }, - { - "name": "open", - "description": "Open the default browser at the application location.", - "type": "boolean" - } - ] -} diff --git a/skeleton/webpack/gulpFile.js b/skeleton/webpack/gulpFile.js new file mode 100644 index 000000000..5dfeb25ed --- /dev/null +++ b/skeleton/webpack/gulpFile.js @@ -0,0 +1,10 @@ +const del = require('del'); +const gulp = require('gulp'); +const path = require('path'); +const project = require('./aurelia_project/aurelia.json'); + +function clearDist() { + return del([path.resolve(__dirname, project.platform.output)]); +} + +gulp.task("prebuild", clearDist); \ No newline at end of file diff --git a/skeleton/webpack/package.json b/skeleton/webpack/package.json index a9e7c1796..6b687531a 100644 --- a/skeleton/webpack/package.json +++ b/skeleton/webpack/package.json @@ -64,10 +64,23 @@ "del": "", "css-loader": "", "file-loader": "", + "app-settings-loader": "", "json-loader": "", "html-loader": "", "istanbul-instrumenter-loader": "", "opn": "", "webpack-bundle-analyzer": "", + }, + "scripts": { + "build": "gulp prebuild && webpack --env.production --env.extractCss", + "build:dev": "gulp prebuild && webpack --env.extractCss", + "analyze": "webpack --env.production --env.analyze", + // @if feat['dotnet-core'] + "start": "gulp prebuild && webpack-dev-server --env.extractCss --port 5000" + // @endif + + // @if feat.web + "start": "gulp prebuild && webpack-dev-server --env.extractCss --port 8080" + // @endif } } \ No newline at end of file diff --git a/skeleton/webpack/webpack.config.js b/skeleton/webpack/webpack.config.js index dd9616244..a0e0dd783 100644 --- a/skeleton/webpack/webpack.config.js +++ b/skeleton/webpack/webpack.config.js @@ -50,7 +50,7 @@ const sassRules = [ ]; // @endif -module.exports = ({ production, server, extractCss, coverage, analyze, karma } = {}) => ({ +module.exports = ({ production, extractCss, analyze, tests, hmr } = {}) => ({ resolve: { // @if feat.typescript extensions: ['.ts', '.js'], @@ -206,7 +206,8 @@ module.exports = ({ production, server, extractCss, coverage, analyze, karma } = devServer: { contentBase: outDir, // serve index.html for all 404 (required for push-state) - historyApiFallback: true + historyApiFallback: true, + hot: hmr }, devtool: production ? 'nosources-source-map' : 'cheap-module-eval-source-map', module: { @@ -278,11 +279,11 @@ module.exports = ({ production, server, extractCss, coverage, analyze, karma } = // @if feat.babel { test: /\.js$/i, loader: 'babel-loader', exclude: nodeModulesDir, - options: coverage ? { sourceMap: 'inline', plugins: ['istanbul'] } : {} + options: tests ? { sourceMap: 'inline', plugins: ['istanbul'] } : {} }, // @endif // @if feat.typescript - { test: /\.ts$/, loader: "ts-loader", options: { reportFiles: [ srcDir+'/**/*.ts'] }, include: srcDir }, + { test: /\.ts$/, loader: "ts-loader" }, // @endif // embed small images and fonts as Data Urls and larger ones as files: { test: /\.(png|gif|jpg|cur)$/i, loader: 'url-loader', options: { limit: 8192 } }, @@ -290,8 +291,11 @@ module.exports = ({ production, server, extractCss, coverage, analyze, karma } = { test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff' } }, // load these fonts normally, as files: { test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'file-loader' }, + { test: /environment\.json$/i, use: [ + {loader: "app-settings-loader", options: {env: production ? 'production' : 'development' }}, + ]}, // @if feat.typescript - ...when(coverage, { + ...when(tests, { test: /\.[jt]s$/i, loader: 'istanbul-instrumenter-loader', include: srcDir, exclude: [/\.(spec|test)\.[jt]s$/i], enforce: 'post', options: { esModules: true }, @@ -300,7 +304,7 @@ module.exports = ({ production, server, extractCss, coverage, analyze, karma } = ] }, plugins: [ - ...when(!karma, new DuplicatePackageCheckerPlugin()), + ...when(!tests, new DuplicatePackageCheckerPlugin()), new AureliaPlugin(), new ProvidePlugin({ // @if feat['scaffold-navigation'] @@ -336,7 +340,7 @@ module.exports = ({ production, server, extractCss, coverage, analyze, karma } = // @endif metadata: { // available in index.ejs // - title, server, baseUrl + title, baseUrl } }), // ref: https://webpack.js.org/plugins/mini-css-extract-plugin/ @@ -344,7 +348,7 @@ module.exports = ({ production, server, extractCss, coverage, analyze, karma } = filename: production ? 'css/[name].[contenthash].bundle.css' : 'css/[name].[hash].bundle.css', chunkFilename: production ? 'css/[name].[contenthash].chunk.css' : 'css/[name].[hash].chunk.css' })), - ...when(production || server, new CopyWebpackPlugin([ + ...when(!tests, new CopyWebpackPlugin([ { from: 'static', to: outDir, ignore: ['.*'] }])), // ignore dot (hidden) files ...when(analyze, new BundleAnalyzerPlugin()) ]