Various improvements to webpack/gulp/vscode support (#1617)

* Various improvements to webpack/gulp/vscode support

* Improve vendor webpack config - hopefully fix const/let appearing
pull/1627/head
Matt Jeanes 7 years ago committed by Jamie
parent 71aa0750d6
commit d59be43ca1

1
.gitignore vendored

@ -242,3 +242,4 @@ _Pvt_Extensions
# CAKE - C# Make
/Tools/*
*.db-journal

@ -0,0 +1,6 @@
{
"recommendations": [
"Angular.ng-template",
"ms-vscode.csharp"
]
}

@ -1,20 +1,15 @@
{
// Use IntelliSense to find out which attributes exist for C# debugging
// Use hover for the description of the existing attributes
// For further information visit https://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger-launchjson.md
"version": "0.2.0",
"configurations": [
"version": "0.2.0",
"configurations": [
{
"name": ".NET Core Launch (web)",
"name": ".NET Core Launch",
"type": "coreclr",
"request": "launch",
"preLaunchTask": "build",
// If you have changed target frameworks, make sure to update the program path.
"program": "${workspaceRoot}/bin/Debug/netcoreapp2.0/Ombi.dll",
"args": [],
"cwd": "${workspaceRoot}",
"stopAtEntry": false,
"internalConsoleOptions": "openOnSessionStart",
"launchBrowser": {
"enabled": true,
"args": "${auto-detect-url}",

@ -1,4 +1,12 @@
{
"files.exclude": {
"**/*.js": {"when": "$(basename).ts"},
"**/*.js.map": true,
"node_modules": true,
"obj": true,
"bin": true
},
"typescript.tsdk": "node_modules\\typescript\\lib",
"cSpell.words": [
"usermanagement"
]

@ -1,15 +1,42 @@
{
"version": "0.1.0",
"command": "dotnet",
"isShellCommand": true,
"args": [],
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"taskName": "restore",
"command": "npm",
"type": "shell",
"args": [
"run-script",
"restore"
],
"problemMatcher": []
},
{
"taskName": "build",
"command": "dotnet",
"type": "shell",
"args": [
"build"
],
"group": {
"isDefault": true,
"kind": "build"
},
"problemMatcher": "$msCompile"
},
{
"taskName": "lint",
"type": "shell",
"command": "npm",
"args": [
"${workspaceRoot}/Ombi.csproj"
"run",
"lint",
"--",
"--format",
"msbuild"
],
"isBuildCommand": true,
"problemMatcher": "$msCompile"
}
]

@ -9,6 +9,8 @@ import { enableProdMode } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app/app.module";
declare var module: any;
if (module.hot) {
module.hot.accept();
module.hot.dispose(() => {

@ -5,6 +5,8 @@ import "core-js/es6/string";
import "core-js/es7/reflect";
import "zone.js/dist/zone";
declare var module: any;
if (module.hot) {
Error.stackTraceLimit = Infinity;
// tslint:disable:no-var-requires

@ -45,7 +45,8 @@ namespace Ombi.Controllers.External
/// <param name="po">The pushover.</param>
/// <param name="mm">The mattermost.</param>
/// <param name="log">The logger.</param>
/// <param name="provider"></param>
/// <param name="provider">The email provider</param>
/// <param name="cpApi">The couch potato API</param>
public TesterController(INotificationService service, IDiscordNotification notification, IEmailNotification emailN,
IPushbulletNotification pushbullet, ISlackNotification slack, IPushoverNotification po, IMattermostNotification mm,
IPlexApi plex, IEmbyApi emby, IRadarrApi radarr, ISonarrApi sonarr, ILogger<TesterController> log, IEmailProvider provider,

@ -22,6 +22,10 @@
<DefineConstants>TRACE;RELEASE;NETCOREAPP2_0</DefineConstants>
</PropertyGroup>
<Target Name="NpmCommandsDebug" Condition="'$(Configuration)'=='Debug'" AfterTargets="Build">
<Exec Command="npm run-script vendor" />
</Target>
<ItemGroup>
<!-- Files not to show in IDE -->
<Compile Remove="Styles\**" />

@ -161,7 +161,8 @@ namespace Ombi
app.UseDeveloperExceptionPage();
app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
{
HotModuleReplacement = true
HotModuleReplacement = true,
ConfigFile = "webpack.dev.js"
});
}

@ -1,4 +1,3 @@
/// <binding BeforeBuild='build' />
'use strict';
const gulp = require('gulp');
@ -25,34 +24,25 @@ function getEnvOptions() {
}
gulp.task('vendor', function () {
return run('webpack --config webpack.config.vendor.js' + getEnvOptions()).exec();
return run('webpack --config webpack.config.vendor.ts' + getEnvOptions()).exec();
});
gulp.task('main', function () {
return run('webpack --config webpack.config.js' + getEnvOptions()).exec();
});
gulp.task('test_compile', function () {
return run('webpack boot-tests=./ClientApp/test/boot-tests.ts' + getEnvOptions()).exec();
});
gulp.task('test_run', function () {
return run('karma start ClientApp/test/karma.conf.js').exec();
return run('webpack --config webpack.config.ts' + getEnvOptions()).exec();
});
gulp.task('prod_var', function () {
global.prod = true;
});
})
gulp.task('analyse_var', function () {
global.analyse = true;
});
})
gulp.task('clean', function() {
del.sync(outputDir, { force: true });
});
gulp.task('test', callback => runSequence('test_compile', 'test_run'));
gulp.task('build', callback => runSequence('vendor', 'main', callback));
gulp.task('analyse', callback => runSequence('analyse_var', 'build'));
gulp.task('full', callback => runSequence('clean', 'build'));

File diff suppressed because it is too large Load Diff

@ -5,10 +5,11 @@
"scripts": {
"vendor": "gulp vendor",
"publish": "gulp publish",
"lint": "tslint ClientApp/**/*.ts"
"lint": "tslint ClientApp/**/*.ts",
"restore": "dotnet restore && npm install"
},
"dependencies": {
"@angular/animations": "4.4.1",
"@angular/animations": "^4.4.6",
"@angular/cdk": "^2.0.0-beta.12",
"@angular/common": "^4.4.6",
"@angular/compiler": "^4.4.6",
@ -22,8 +23,10 @@
"@angular/router": "^4.4.6",
"@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
"@types/core-js": "^0.9.43",
"@types/extract-text-webpack-plugin": "^3.0.0",
"@types/intro.js": "^2.4.3",
"@types/node": "^8.0.46",
"@types/webpack": "^3.0.13",
"angular2-jwt": "^0.2.3",
"angular2-moment": "^1.7.0",
"angular2-template-loader": "^0.6.2",
@ -35,10 +38,10 @@
"css": "^2.2.1",
"css-loader": "^0.28.7",
"del": "^3.0.0",
"event-source-polyfill": "^0.0.9",
"event-source-polyfill": "^0.0.11",
"expose-loader": "^0.7.3",
"extract-text-webpack-plugin": "^3.0.1",
"file-loader": "^0.11.2",
"file-loader": "^1.1.5",
"font-awesome": "^4.7.0",
"gulp": "^3.9.1",
"gulp-run": "^1.7.1",
@ -49,7 +52,7 @@
"ng2-cookies": "^1.0.12",
"ng2-dragula": "1.5.0",
"ngx-clipboard": "^8.1.1",
"ngx-infinite-scroll": "^0.5.2",
"ngx-infinite-scroll": "^0.6.1",
"node-sass": "^4.5.3",
"npm": "^5.5.1",
"pace-progress": "^1.0.2",
@ -58,14 +61,15 @@
"run-sequence": "^2.2.0",
"rxjs": "^5.5.0",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"style-loader": "^0.19.0",
"to-string-loader": "^1.1.5",
"ts-node": "^3.3.0",
"tslint": "^5.8.0",
"tslint-language-service": "^0.9.6",
"typescript": "^2.5.3",
"uglify-es": "^3.1.5",
"uglifyjs-webpack-plugin": "^1.0.1",
"url-loader": "^0.5.9",
"url-loader": "^0.6.2",
"webpack": "^3.8.1",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-hot-middleware": "^2.20.0",
@ -81,6 +85,6 @@
"karma-chrome-launcher": "2.2.0",
"karma-cli": "1.0.1",
"karma-jasmine": "1.1.0",
"karma-webpack": "2.0.4"
"karma-webpack": "2.0.5"
}
}

@ -17,6 +17,7 @@
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"skipLibCheck": true,
"noEmit": true,
"plugins": [
{
"name": "tslint-language-service",

@ -5,12 +5,5 @@ declare var require: any;
declare var localStorage: any;
declare var introJs: any;
declare module "*.css" {
let string: string;
export default string;
}
declare module "*.html" {
let string: string;
export default string;
}
declare module "webpack-bundle-analyzer";
declare module "uglifyjs-webpack-plugin";

@ -1,2 +1 @@
/// <reference path="globals/globals.d.ts" />
/// <reference path="../node_modules/@types/intro.js/index.d.ts" />

@ -1,59 +0,0 @@
const path = require('path');
const webpack = require('webpack');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = function (env) {
const extractCSS = new ExtractTextPlugin('main.css');
const prod = env && env.prod;
console.log(prod ? 'Production' : 'Dev' + ' main build');
const analyse = env && env.analyse;
if (analyse) { console.log("Analysing build"); }
const cssLoader = prod ? 'css-loader?minimize' : 'css-loader';
const outputDir = './wwwroot/dist';
const bundleConfig = {
entry: { 'main': './ClientApp/main.ts' },
stats: { modules: false },
context: __dirname,
resolve: { extensions: ['.ts', '.js'] },
devtool: prod ? 'source-map' : 'eval-source-map',
output: {
filename: '[name].js',
publicPath: '/dist/',
path: path.join(__dirname, outputDir)
},
module: {
rules: [
{ test: /\.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] },
{ test: /\.html$/, use: 'html-loader?minimize=false' },
{ test: /\.css$/, use: ['to-string-loader', cssLoader] },
{ test: /\.scss$/, include: /ClientApp(\\|\/)app/, use: ["to-string-loader", cssLoader, "sass-loader"] },
{ test: /\.scss$/, include: /ClientApp(\\|\/)styles/, use: ["style-loader", cssLoader, "sass-loader"] },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
]
},
plugins: [
new CheckerPlugin(),
extractCSS,
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require(path.join(__dirname, outputDir, 'vendor-manifest.json'))
})
].concat(prod ? [
// Plugins that apply in production builds only
new UglifyJSPlugin()
] : [
// Plugins that apply in development builds only
]).concat(analyse ? [
new BundleAnalyzerPlugin({
analyzerMode: 'static',
reportFilename: 'main.html',
openAnalyzer: false
})
] : [])
};
return bundleConfig;
};

@ -0,0 +1,57 @@
import { CheckerPlugin } from "awesome-typescript-loader";
import * as path from "path";
import * as UglifyJSPlugin from "uglifyjs-webpack-plugin";
import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";
import * as webpack from "webpack";
module.exports = (env: any) => {
const prod = env && env.prod as boolean;
console.log(prod ? "Production" : "Dev" + " main build");
const analyse = env && env.analyse as boolean;
if (analyse) { console.log("Analysing build"); }
const cssLoader = prod ? "css-loader?-url&minimize" : "css-loader?-url";
const outputDir = "./wwwroot/dist";
const bundleConfig: webpack.Configuration = {
entry: { main: "./ClientApp/main.ts" },
stats: { modules: false },
context: __dirname,
resolve: { extensions: [".ts", ".js"] },
devtool: prod ? "source-map" : "eval-source-map",
output: {
filename: "[name].js",
publicPath: "/dist/",
path: path.join(__dirname, outputDir),
},
module: {
rules: [
{ test: /\.ts$/, include: /ClientApp/, use: ["awesome-typescript-loader?silent=true", "angular2-template-loader"] },
{ test: /\.html$/, use: "html-loader?minimize=false" },
{ test: /\.css$/, use: ["to-string-loader", cssLoader] },
{ test: /\.scss$/, include: /ClientApp(\\|\/)app/, use: ["to-string-loader", cssLoader, "sass-loader"] },
{ test: /\.scss$/, include: /ClientApp(\\|\/)styles/, use: ["style-loader", cssLoader, "sass-loader"] },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: "url-loader?limit=25000" },
],
},
plugins: [
new CheckerPlugin(),
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require(path.join(__dirname, outputDir, "vendor-manifest.json")),
}),
].concat(prod ? [
// Plugins that apply in production builds only
new UglifyJSPlugin({ sourceMap: true }),
] : [
// Plugins that apply in development builds only
]).concat(analyse ? [
new BundleAnalyzerPlugin({
analyzerMode: "static",
reportFilename: "main.html",
openAnalyzer: false,
}),
] : []),
};
return bundleConfig;
};

@ -1,98 +0,0 @@
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = function (env) {
const extractCSS = new ExtractTextPlugin('vendor.css');
const prod = env && env.prod;
console.log(prod ? 'Production' : 'Dev' + ' vendor build');
const analyse = env && env.analyse;
if (analyse) { console.log("Analysing build") };
const outputDir = './wwwroot/dist';
const bundleConfig = {
stats: { modules: false },
resolve: { extensions: ['.js'] },
module: {
rules: [
{ test: /\.(png|woff|woff2|eot|ttf|svg|gif)(\?|$)/, use: 'url-loader?limit=100000' },
{ test: /\.css(\?|$)/, use: extractCSS.extract({ use: prod ? 'css-loader?minimize' : 'css-loader' }) },
{ test: /\.scss(\?|$)/, use: extractCSS.extract({ use: [prod ? 'css-loader?minimize' : 'css-loader', 'sass-loader'] }) }
]
},
entry: {
vendor: [
'@angular/animations',
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/forms',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
'@angular/material',
'primeng/resources/primeng.min.css',
'primeng/resources/themes/omega/theme.css',
'@angular/material/prebuilt-themes/deeppurple-amber.css',
'event-source-polyfill',
'jquery',
'zone.js',
'primeng/primeng',
'reflect-metadata',
'core-js',
'angular2-jwt',
'bootstrap/dist/js/bootstrap',
'font-awesome/scss/font-awesome.scss',
'pace-progress',
'pace-progress/themes/orange/pace-theme-flash.css',
'intro.js-mit/intro.js',
'intro.js-mit/introjs.css',
'ngx-clipboard',
'bootswatch/superhero/bootstrap.min.css',
'style-loader',
'ng2-cookies',
//'ng2-dragula',
//'dragula/dist/dragula.min.css'
]
},
output: {
publicPath: '/dist/',
filename: '[name].js',
library: '[name]_[hash]',
path: path.join(__dirname, outputDir)
},
node: {
fs: "empty",
},
resolve: {
alias: {
pace: 'pace-progress'
}
},
plugins: [
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', Hammer: 'hammerjs/hammer' }), // Global identifiers
new webpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/11580
new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/14898
new webpack.IgnorePlugin(/^vertx$/), // Workaround for https://github.com/stefanpenner/es6-promise/issues/100
extractCSS,
new webpack.DllPlugin({
path: path.join(__dirname, outputDir, '[name]-manifest.json'),
name: '[name]_[hash]'
})
].concat(prod ? [
// Plugins that apply in production builds only
new UglifyJSPlugin()
] : [
// Plugins that apply in development builds only
]).concat(analyse ? [
new BundleAnalyzerPlugin({
analyzerMode: 'static',
reportFilename: 'vendor.html',
openAnalyzer: false
})
] : [])
};
return bundleConfig;
}

@ -0,0 +1,103 @@
import * as ExtractTextPlugin from "extract-text-webpack-plugin";
import * as path from "path";
import * as UglifyJSPlugin from "uglifyjs-webpack-plugin";
import * as webpack from "webpack";
import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";
module.exports = (env: any) => {
const extractCSS = new ExtractTextPlugin("vendor.css");
const prod = env && env.prod as boolean;
console.log(prod ? "Production" : "Dev" + " vendor build");
const analyse = env && env.analyse as boolean;
if (analyse) { console.log("Analysing build"); }
const outputDir = "./wwwroot/dist";
const bundleConfig = {
stats: { modules: false },
resolve: {
extensions: [".js"],
alias: {
pace: "pace-progress",
},
},
module: {
rules: [
{ test: /\.(png|woff|woff2|eot|ttf|svg|gif)(\?|$)/, use: "url-loader?limit=100000" },
{ test: /\.css(\?|$)/, use: extractCSS.extract({ use: prod ? "css-loader?minimize" : "css-loader" }) },
{ test: /\.scss(\?|$)/, use: extractCSS.extract({ use: [prod ? "css-loader?minimize" : "css-loader", "sass-loader"] }) },
],
},
entry: {
vendor: [
"pace-progress/themes/orange/pace-theme-flash.css",
"primeng/resources/primeng.min.css",
"@angular/material/prebuilt-themes/deeppurple-amber.css",
"font-awesome/scss/font-awesome.scss",
"intro.js-mit/introjs.css",
"bootswatch/superhero/bootstrap.min.css",
"@angular/animations",
"@angular/common",
"@angular/compiler",
"@angular/core",
"@angular/forms",
"@angular/http",
"@angular/platform-browser",
"@angular/platform-browser/animations",
"@angular/platform-browser-dynamic",
"@angular/router",
"@angular/material",
"@angular/cdk",
"pace-progress",
"primeng/primeng",
"jquery",
"zone.js",
"reflect-metadata",
"core-js",
"rxjs",
"css-loader/lib/css-base",
"core-js/es6/string",
"core-js/es6/array",
"core-js/es6/object",
"core-js/es7/reflect",
"hammerjs",
"event-source-polyfill",
"bootstrap/dist/js/bootstrap",
"intro.js-mit/intro.js",
"ngx-clipboard",
"angular2-jwt",
"ng2-cookies",
],
},
output: {
publicPath: "/dist/",
filename: "[name].js",
library: "[name]_[hash]",
path: path.join(__dirname, outputDir),
},
node: {
fs: "empty",
},
plugins: [
new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", Hammer: "hammerjs/hammer" }), // Global identifiers
new webpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/, path.join(__dirname, "./ClientApp")), // Workaround for https://github.com/angular/angular/issues/11580
new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/, path.join(__dirname, "./ClientApp")), // Workaround for https://github.com/angular/angular/issues/14898
extractCSS,
new webpack.DllPlugin({
path: path.join(__dirname, outputDir, "[name]-manifest.json"),
name: "[name]_[hash]",
}),
].concat(prod ? [
// Plugins that apply in production builds only
new UglifyJSPlugin(),
] : [
// Plugins that apply in development builds only
]).concat(analyse ? [
new BundleAnalyzerPlugin({
analyzerMode: "static",
reportFilename: "vendor.html",
openAnalyzer: false,
}),
] : []),
};
return bundleConfig;
};

@ -0,0 +1,4 @@
// https://github.com/aspnet/JavaScriptServices/issues/1046
require('ts-node/register')
module.exports = require("./webpack.config.ts");
Loading…
Cancel
Save