refactor: generate webpack.common templates on prepublish (#150)

* refactor: move templates to separate dir

* refactor: generate webpack.common templates on prepublish

* fix(ns-bundle): pass platform and uglify as env properties

* fix(ns-bundle): don't readd scripts from nativescript-dev-webpack

* fix(ns-bundle): use webpack.config.js instead of webpack.common.js

BREAKING:
The ns-bundle script will now target the `webpack.config.js` file in
your repository instead of the `webpack.common.js` one. If you changed
your configuration, you need to apply them to `webpack.config.js` or
replace the whole file with your correct configuration.
The following files are no longer needed and can be safely removed from
the project: `webpack.common.js`, `webpack.android.js`,
`webpack.ios.js`.

Author: sis0k0

Diff for: bin/ns-bundle

@@ -1,11 +1,10 @@
 #!/usr/bin/env node
 
-const spawn = require("child_process").spawn;
-const resolve = require("path").resolve;
+const { spawn } = require("child_process");
+const { resolve: pathResolve } = require("path");
+const { getPackageJson } = require("../projectHelpers");
 
-const getPackageJson = require("../projectHelpers").getPackageJson;
-
-const PROJECT_DIR = resolve(__dirname, "../../../");
+const PROJECT_DIR = pathResolve(__dirname, "../../../");
 const packageJson = getPackageJson(PROJECT_DIR);
 
 if (!process.env.npm_config_argv) {
@@ -67,7 +66,16 @@ function webpack(platform) {
     return new Promise(function (resolve, reject) {
         console.log(`Running webpack for ${platform}...`);
 
-        spawnChildProcess(true, "webpack", `--config=webpack.${platform}.js`, "--progress")
+        const args = [
+            true, // show output on console
+            `webpack`,
+            `--config=webpack.config.js`,
+            `--progress`,
+            `--env.${platform}`,
+            process.env.npm_config_uglify && `--env.uglify`,
+        ];
+
+        spawnChildProcess(...args)
             .then(resolve)
             .catch(throwError);
     });

Diff for: npmScriptsManager.js

@@ -17,6 +17,8 @@ const DEPRECATED_SCRIPT_TEMPLATES = Object.freeze([
 const PLATFORMS = Object.freeze(["android", "ios"]);
 
 function addNpmScripts(scripts) {
+    scripts = scripts || {};
+
     Object.keys(SCRIPT_TEMPLATES).forEach(name => {
         packageJson = addPlatformScript(scripts, name, SCRIPT_TEMPLATES[name]);
     });
@@ -51,8 +53,8 @@ function addPlatformScript(scripts, nameTemplate, commandTemplate) {
 }
 
 function removePlatformScripts(scripts, nameTemplate) {
-    if (!scripts) {
-        return;
+    if (!scripts || Object.keys(SCRIPT_TEMPLATES).includes(nameTemplate)) {
+        return scripts;
     }
 
     PLATFORMS.forEach(function (platform) {

Diff for: package.json

@@ -14,7 +14,8 @@
     "url": "https://github.com/NativeScript/nativescript-dev-webpack.git"
   },
   "scripts": {
-    "postinstall": "node postinstall.js"
+    "postinstall": "node postinstall.js",
+    "prepublishOnly": "node ./templates/buildTemplates.js"
   },
   "bin": {
     "install-ns-webpack": "./bin/install-ns-webpack",

Diff for: projectFilesManager.js

@@ -7,7 +7,7 @@ function addProjectFiles(projectDir, appDir) {
     const projectTemplates = getProjectTemplates(projectDir);
     Object.keys(projectTemplates).forEach(function(templateName) {
         const templateDestination = projectTemplates[templateName];
-        templateName = path.resolve(templateName)
+        templateName = path.resolve(templateName);
         copyTemplate(templateName, templateDestination);
     });
 
@@ -43,24 +43,22 @@ function copyTemplate(templateName, destinationPath) {
     // Create destination file, only if not present.
     if (!fs.existsSync(destinationPath)) {
         console.info(`Creating file: ${destinationPath}`);
+        console.log(templateName)
         const content = fs.readFileSync(templateName, "utf8");
         fs.writeFileSync(destinationPath, content);
     }
 }
 
 function getProjectTemplates(projectDir) {
-    let templates = {
-        "webpack.android.js.template": "webpack.android.js",
-        "webpack.ios.js.template": "webpack.ios.js",
-    };
+    let templates = {}
 
     if (helpers.isAngular({projectDir})) {
-        templates["webpack.common.js.angular.template"] = "webpack.common.js";
+        templates["webpack.config.js.ng.template"] = "webpack.config.js";
         templates["tsconfig.aot.json.template"] = "tsconfig.aot.json";
     } else if (helpers.isTypeScript({projectDir})) {
-        templates["webpack.common.js.typescript.template"] = "webpack.common.js";
+        templates["webpack.config.js.ts.template"] = "webpack.config.js";
     } else {
-        templates["webpack.common.js.javascript.template"] = "webpack.common.js";
+        templates["webpack.config.js.js.template"] = "webpack.config.js";
     }
 
     return getFullTemplatesPath(projectDir, templates);
@@ -85,7 +83,7 @@ function getFullTemplatesPath(projectDir, templates) {
     let updatedTemplates = {};
 
     Object.keys(templates).forEach(key => {
-        const updatedKey = getFullPath(__dirname, key);
+        const updatedKey = getFullPath(path.join(__dirname, "templates"), key);
         const updatedValue = getFullPath(projectDir, templates[key])
 
         updatedTemplates[updatedKey] = updatedValue;

Diff for: templates/buildTemplates.js

@@ -0,0 +1,66 @@
+const { writeFileSync } = require("fs");
+
+saveTemplate("js");
+saveTemplate("ts");
+saveTemplate("ng");
+
+function saveTemplate(target) {
+    const content = buildTemplate(target);
+    writeFileSync(`./templates/webpack.config.js.${target}.template`, content);
+}
+
+function buildTemplate(target) {
+    let template = "";
+
+    template += getResource(target, "imports");
+    template += getResource(target, "exports");
+    template += getResource(target, "getPlatform");
+
+    const rules = getResource(target, "rules");
+    template += rulesBuilder(rules);
+
+    const plugins = getResource(target, "plugins");
+    template += pluginsBuilder(plugins);
+
+    template += require(`./${target}/getExtensions`);
+
+    return template;
+};
+
+function getResource(target, resourceName) {
+    const common = require(`./common/${resourceName}`);
+    const maybeSpecific = tryRequire(`./${target}/${resourceName}`);
+
+    return merge(resourceName, common, maybeSpecific);
+}
+
+function tryRequire(path) {
+    try {
+        return require(path);
+    } catch(e) { }
+}
+
+function merge(resource, common, specific) {
+    const allResources = specific ? `${common}\n${specific}\n` : `${common}\n`;
+    return isArray(resource) ? `[${allResources}    ]` : allResources;
+}
+
+function isArray(resource) {
+    return ["rules", "plugins"].includes(resource);
+}
+
+function pluginsBuilder(plugins) {
+    const uglify = require("./common/uglify");
+    return `function getPlugins(platform, env) {
+    let plugins = ${plugins};
+    ${uglify}
+
+    return plugins;
+}\n`;
+}
+
+function rulesBuilder(rules) {
+    return `function getRules() {
+    return ${rules};
+}\n\n`;
+}

Diff for: templates/common/exports.js

@@ -0,0 +1,56 @@
+module.exports = `
+const mainSheet = \`app.css\`;
+
+module.exports = env => {
+    const platform = getPlatform(env);
+
+    // Default destination inside platforms/<platform>/...
+    const path = resolve(nsWebpack.getAppPath(platform));
+
+    const entry = {
+        // Discover entry module from package.json
+        bundle: \`./\${nsWebpack.getEntryModule()}\`,
+
+        // Vendor entry with third-party libraries
+        vendor: \`./vendor\`,
+
+        // Entry for stylesheet with global application styles
+        [mainSheet]: \`./\${mainSheet}\`,
+    };
+
+    const rules = getRules();
+    const plugins = getPlugins(platform, env);
+    const extensions = getExtensions(platform);
+
+    return {
+        context: resolve("./app"),
+        target: nativescriptTarget,
+        entry,
+        output: {
+            pathinfo: true,
+            path,
+            libraryTarget: "commonjs2",
+            filename: "[name].js",
+        },
+        resolve: {
+            extensions,
+
+            // Resolve {N} system modules from tns-core-modules
+            modules: [
+                "node_modules/tns-core-modules",
+                "node_modules",
+            ]
+        },
+        node: {
+            // Disable node shims that conflict with NativeScript
+            "http": false,
+            "timers": false,
+            "setImmediate": false,
+            "fs": "empty",
+        },
+        module: { rules },
+        plugins,
+    };
+};
+`;
+

Diff for: templates/common/getPlatform.js

@@ -0,0 +1,8 @@
+module.exports = `
+function getPlatform(env) {
+    return env.android ? "android" :
+        env.ios ? "ios" :
+        () => { throw new Error("You need to provide a target platform!") };
+}
+`;
+

Diff for: templates/common/imports.js

@@ -0,0 +1,8 @@
+module.exports = `const { resolve, join  } = require("path");
+
+const webpack = require("webpack");
+const nsWebpack = require("nativescript-dev-webpack");
+const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
+const CopyWebpackPlugin = require("copy-webpack-plugin");
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+`;

Diff for: templates/common/plugins.js

@@ -0,0 +1,28 @@
+module.exports = `
+        new ExtractTextPlugin(mainSheet),
+
+        // Vendor libs go to the vendor.js chunk
+        new webpack.optimize.CommonsChunkPlugin({
+            name: ["vendor"],
+        }),
+
+        // Define useful constants like TNS_WEBPACK
+        new webpack.DefinePlugin({
+            "global.TNS_WEBPACK": "true",
+        }),
+
+        // Copy assets to out dir. Add your own globs as needed.
+        new CopyWebpackPlugin([
+            { from: mainSheet },
+            { from: "css/**" },
+            { from: "fonts/**" },
+            { from: "**/*.jpg" },
+            { from: "**/*.png" },
+            { from: "**/*.xml" },
+        ], { ignore: ["App_Resources/**"] }),
+
+        // Generate a bundle starter script and activate it in package.json
+        new nsWebpack.GenerateBundleStarterPlugin([
+            "./vendor",
+            "./bundle",
+        ]),`;

Diff for: templates/common/rules.js

@@ -0,0 +1,37 @@
+module.exports = `
+        {
+            test: /\\.html$|\\.xml$/,
+            use: [
+                "raw-loader",
+            ]
+        },
+        // Root stylesheet gets extracted with bundled dependencies
+        {
+            test: new RegExp(mainSheet),
+            use: ExtractTextPlugin.extract([
+                {
+                    loader: "resolve-url-loader",
+                    options: { silent: true },
+                },
+                "nativescript-css-loader",
+                "nativescript-dev-webpack/platform-css-loader",
+            ]),
+        },
+        // Other CSS files get bundled using the raw loader
+        {
+            test: /\\.css$/,
+            exclude: new RegExp(mainSheet),
+            use: [
+                "raw-loader",
+            ]
+        },
+        // SASS support
+        {
+            test: /\\.scss$/,
+            use: [
+                "raw-loader",
+                "resolve-url-loader",
+                "sass-loader",
+            ]
+        },
+`;

Diff for: templates/common/uglify.js

@@ -0,0 +1,11 @@
+module.exports = `
+    if (env.uglify) {
+        plugins.push(new webpack.LoaderOptionsPlugin({ minimize: true }));
+
+        // Work around an Android issue by setting compress = false
+        const compress = platform !== "android";
+        plugins.push(new webpack.optimize.UglifyJsPlugin({
+            mangle: { except: nsWebpack.uglifyMangleExcludes },
+            compress,
+        }));
+    }`;

Diff for: templates/js/getExtensions.js

@@ -0,0 +1,11 @@
+module.exports = `
+// Resolve platform-specific modules like module.android.js
+function getExtensions(platform) {
+    return Object.freeze([
+        \`.\${platform}.js\`,
+        \`.\${platform}.css\`,
+        ".js",
+        ".css",
+    ]);
+}
+`;

Diff for: templates/ng/getExtensions.js

@@ -0,0 +1,14 @@
+module.exports = `
+// Resolve platform-specific modules like module.android.js
+function getExtensions(platform) {
+    return Object.freeze([
+        \`.\${platform}.ts\`,
+        \`.\${platform}.js\`,
+        \`.\${platform}.css\`,
+        ".aot.ts",
+        ".ts",
+        ".js",
+        ".css",
+    ]);
+}
+`;

Diff for: templates/ng/imports.js

@@ -0,0 +1 @@
+module.exports = `const { AotPlugin } = require("@ngtools/webpack");`;

Diff for: templates/ng/plugins.js

@@ -0,0 +1,11 @@
+module.exports = `
+        // Angular AOT compiler
+        new AotPlugin({
+            tsConfigPath: "tsconfig.aot.json",
+            entryModule: resolve(__dirname, "app/app.module#AppModule"),
+            typeChecking: false
+        }),
+
+        // Resolve .ios.css and .android.css component stylesheets
+        new nsWebpack.StyleUrlResolvePlugin({platform}),
+`;

Diff for: templates/ng/rules.js

@@ -0,0 +1,10 @@
+module.exports = `
+        // Compile TypeScript files with ahead-of-time compiler.
+        {
+            test: /\\.ts$/,
+            loaders: [
+                "nativescript-dev-webpack/tns-aot-loader",
+                "@ngtools/webpack",
+            ]
+        }
+`;

Diff for: templates/ts/getExtensions.js

@@ -0,0 +1,13 @@
+module.exports = `
+// Resolve platform-specific modules like module.android.js
+function getExtensions(platform) {
+    return Object.freeze([
+        \`.\${platform}.ts\`,
+        \`.\${platform}.js\`,
+        \`.\${platform}.css\`,
+        ".ts",
+        ".js",
+        ".css",
+    ]);
+}
+`;