feat: make webpack deps production deps of the plugin (#571)

implements #569 

BREAKING CHANGES:

The dependencies that were previously added by the nativescript-dev-webpack plugin to the project's package.json are now dependencies of the plugin itself.

MIGRATION:
1. Remove all obsolete dependencies from your project. You can do that by invoking the script:
```
./node_modules/.bin/update-ns-webpack --deps
```
2. [Angular] Add the following packages as devDependencies:
```
//package.json

"devDependencies": {
    "@angular-devkit/build-angular": "~0.7.0-rc.0",
    "@angular/compiler-cli": "~6.1.0-beta.1",
    //...
}
```

Author: sis0k0

demo/AngularApp/package.json

@@ -29,9 +29,8 @@
     "zone.js": "^0.8.4"
   },
   "devDependencies": {
-    "@angular-devkit/core": "~0.7.0-beta.1",
+    "@angular-devkit/build-angular": "~0.7.0-beta.1",
     "@angular/compiler-cli": "~6.0.0",
-    "@ngtools/webpack": "~6.1.0-beta.1",
     "@types/chai": "^4.0.2",
     "@types/mocha": "^2.2.41",
     "@types/node": "^7.0.5",
@@ -40,10 +39,6 @@
     "babylon": "6.18.0",
     "chai": "~4.1.1",
     "chai-as-promised": "~7.1.1",
-    "clean-webpack-plugin": "~0.1.19",
-    "copy-webpack-plugin": "~4.5.1",
-    "css-loader": "~0.28.11",
-    "extract-text-webpack-plugin": "~3.0.2",
     "lazy": "1.0.11",
     "mocha": "~3.5.0",
     "mocha-junit-reporter": "^1.13.0",
@@ -52,16 +47,7 @@
     "nativescript-dev-sass": "^1.3.5",
     "nativescript-dev-typescript": "next",
     "nativescript-dev-webpack": "file:../..",
-    "nativescript-worker-loader": "~0.9.0",
-    "raw-loader": "~0.5.1",
-    "resolve-url-loader": "~2.3.0",
-    "sass-loader": "~7.0.1",
-    "typescript": "~2.7.2",
-    "uglifyjs-webpack-plugin": "~1.2.5",
-    "webpack": "~4.6.0",
-    "webpack-bundle-analyzer": "~2.13.0",
-    "webpack-cli": "~2.1.3",
-    "webpack-sources": "~1.1.0"
+    "typescript": "~2.7.2"
   },
   "scripts": {
     "ns-bundle": "ns-bundle",

demo/JavaScriptApp/package.json

@@ -23,27 +23,14 @@
     "babel-traverse": "6.26.0",
     "babel-types": "6.26.0",
     "babylon": "6.18.0",
-    "clean-webpack-plugin": "~0.1.19",
-    "copy-webpack-plugin": "~4.5.1",
-    "css-loader": "~0.28.7",
-    "extract-text-webpack-plugin": "~3.0.2",
     "lazy": "1.0.11",
     "mocha": "~3.5.0",
     "mocha-junit-reporter": "^1.13.0",
     "mocha-multi": "^0.11.0",
     "nativescript-dev-appium": "next",
     "nativescript-dev-sass": "^1.3.5",
     "nativescript-dev-webpack": "file:../..",
-    "nativescript-worker-loader": "~0.8.1",
-    "node-sass": "^4.7.1",
-    "raw-loader": "~0.5.1",
-    "resolve-url-loader": "~2.3.0",
-    "sass-loader": "~6.0.6",
-    "uglifyjs-webpack-plugin": "~1.2.4",
-    "webpack": "~4.5.0",
-    "webpack-bundle-analyzer": "^2.9.1",
-    "webpack-cli": "~2.0.14",
-    "webpack-sources": "~1.1.0"
+    "node-sass": "^4.7.1"
   },
   "scripts": {
     "ns-bundle": "ns-bundle",

demo/TypeScriptApp/package.json

@@ -20,14 +20,9 @@
     "@types/chai": "^4.0.2",
     "@types/mocha": "^2.2.41",
     "@types/node": "^7.0.5",
-    "awesome-typescript-loader": "~5.0.0-1",
     "babel-traverse": "6.26.0",
     "babel-types": "6.26.0",
     "babylon": "6.18.0",
-    "clean-webpack-plugin": "~0.1.19",
-    "copy-webpack-plugin": "~4.5.1",
-    "css-loader": "~0.28.7",
-    "extract-text-webpack-plugin": "~3.0.2",
     "lazy": "1.0.11",
     "mocha": "~3.5.0",
     "mocha-junit-reporter": "^1.13.0",
@@ -36,16 +31,7 @@
     "nativescript-dev-sass": "^1.3.5",
     "nativescript-dev-typescript": "next",
     "nativescript-dev-webpack": "file:../..",
-    "nativescript-worker-loader": "~0.8.1",
-    "raw-loader": "~0.5.1",
-    "resolve-url-loader": "~2.3.0",
-    "sass-loader": "~6.0.6",
-    "typescript": "~2.7.2",
-    "uglifyjs-webpack-plugin": "~1.2.4",
-    "webpack": "~4.5.0",
-    "webpack-bundle-analyzer": "^2.9.1",
-    "webpack-cli": "~2.0.14",
-    "webpack-sources": "~1.1.0"
+    "typescript": "~2.7.2"
   },
   "scripts": {
     "ns-bundle": "ns-bundle",

dependencyManager.js

@@ -1,4 +1,4 @@
-const { isAngular, isTypeScript, isSass } = require("./projectHelpers");
+const { isAngular } = require("./projectHelpers");
 
 const NEW_DEPS_MESSAGE = `\
 A few new dependencies were added. \
@@ -21,10 +21,6 @@ You can also pass the "--env.uglify" flag to use UglifyJS for minification.
 For more information check out https://docs.nativescript.org/tooling/bundling-with-webpack#bundling.
 `;
 
-function forceUpdateProjectDeps(packageJson) {
-    return addProjectDeps(packageJson, true);
-}
-
 function addProjectDeps(packageJson, force = false) {
     packageJson.devDependencies = packageJson.devDependencies || {};
     const postinstallOptions = {
@@ -41,6 +37,35 @@ function addProjectDeps(packageJson, force = false) {
     return postinstallOptions;
 }
 
+function forceUpdateProjectDeps(packageJson) {
+    removeObsoleteDeps(packageJson);
+
+    return addProjectDeps(packageJson, true);
+}
+
+function removeObsoleteDeps(packageJson) {
+    const depsToRemove = [
+        "webpack",
+        "webpack-cli",
+        "webpack-bundle-analyzer",
+        "webpack-sources",
+        "clean-webpack-plugin",
+        "copy-webpack-plugin",
+        "raw-loader",
+        "css-loader",
+        "nativescript-worker-loader",
+        "extract-text-webpack-plugin",
+        "uglifyjs-webpack-plugin",
+        "@ngtools/webpack",
+        "@angular-devkit/core",
+        "resolve-url-loader",
+        "awesome-typescript-loader",
+        "sass-loader",
+    ];
+
+    depsToRemove.forEach(dep => delete packageJson.devDependencies[dep]);
+}
+
 function addDependency(deps, name, version, force) {
     const options = { deps };
 
@@ -57,36 +82,12 @@ function addDependency(deps, name, version, force) {
 }
 
 function getRequiredDeps(packageJson) {
-    const deps = {
-        "webpack": "~4.6.0",
-        "webpack-cli": "~2.1.3",
-        "webpack-bundle-analyzer": "~2.13.0",
-        "webpack-sources": "~1.1.0",
-        "clean-webpack-plugin": "~0.1.19",
-        "copy-webpack-plugin": "~4.5.1",
-        "raw-loader": "~0.5.1",
-        "css-loader": "~0.28.11",
-        "nativescript-worker-loader": "~0.9.0",
-        "extract-text-webpack-plugin": "~3.0.2",
-        "uglifyjs-webpack-plugin": "~1.2.5",
-    };
-
-    if (isAngular({packageJson})) {
-        Object.assign(deps, {
-            "@angular/compiler-cli": packageJson.dependencies["@angular/core"],
-            "@ngtools/webpack": "~6.1.0-beta.1",
-            "@angular-devkit/core": "~0.7.0-beta.1",
-            "resolve-url-loader": "~2.3.0",
-        });
-    } else if (isTypeScript({packageJson})) {
-        Object.assign(deps, { "awesome-typescript-loader": "~5.0.0" });
-    }
-
-    if (isSass({packageJson})) {
-        Object.assign(deps, { "sass-loader": "~7.0.1" });
-    }
-
-    return deps;
+    return isAngular({packageJson}) ?
+        {
+            "@angular-devkit/build-angular": "~0.7.0-rc.0",
+            "@angular/compiler-cli": "~6.1.0-beta.1",
+        } :
+        { };
 }
 
 function showHelperMessages({ newDepsAdded, hasOldDeps }) {

package.json

@@ -74,10 +74,25 @@
     "schema-utils": "0.4.3",
     "semver": "5.4.1",
     "shelljs": "0.6.0",
-    "tapable": "1.0.0"
+    "tapable": "1.0.0",
+    "webpack": "~4.6.0",
+    "webpack-cli": "~2.1.3",
+    "webpack-bundle-analyzer": "~2.13.0",
+    "webpack-sources": "~1.1.0",
+    "clean-webpack-plugin": "~0.1.19",
+    "copy-webpack-plugin": "~4.5.1",
+    "raw-loader": "~0.5.1",
+    "css-loader": "~0.28.11",
+    "nativescript-worker-loader": "~0.9.0",
+    "extract-text-webpack-plugin": "~3.0.2",
+    "uglifyjs-webpack-plugin": "~1.2.5",
+    "@angular-devkit/core": "^0.7.0-rc.0",
+    "resolve-url-loader": "~2.3.0",
+    "awesome-typescript-loader": "~5.0.0",
+    "sass-loader": "~7.0.1"
   },
   "devDependencies": {
-    "@angular-devkit/core": "^0.7.0-beta.1",
+    "@angular-devkit/core": "^0.7.0-rc.0",
     "@types/node": "^8.0.0",
     "conventional-changelog-cli": "^1.3.22",
     "rxjs": "^6.2.0",

projectHelpers.js

@@ -28,19 +28,6 @@ const isAngular = ({ projectDir, packageJson } = {}) => {
         .some(dependency => /^@angular\b/.test(dependency));
 };
 
-const isSass = ({ projectDir, packageJson } = {}) => {
-    packageJson = packageJson || getPackageJson(projectDir);
-    const SASS_PLUGIN_NAME = "nativescript-dev-sass";
-
-    return (
-        packageJson.dependencies &&
-        packageJson.dependencies.hasOwnProperty(SASS_PLUGIN_NAME)
-    ) || (
-        packageJson.devDependencies &&
-        packageJson.devDependencies.hasOwnProperty(SASS_PLUGIN_NAME)
-    );
-};
-
 const getWebpackConfig = (projectDir, env, configPath = "webpack.config.js") => {
     const configAbsolutePath = resolve(projectDir, configPath);
     let config;
@@ -112,7 +99,6 @@ module.exports = {
     isAndroid,
     isIos,
     isAngular,
-    isSass,
     isTypeScript,
     writePackageJson,
 };