From 5fa8c736a750c0e3f3c46149bf623b2eadc2336e Mon Sep 17 00:00:00 2001 From: DimitarTachev Date: Tue, 20 Nov 2018 18:09:35 +0200 Subject: [PATCH 1/2] fix: avoid getting `js` template in a `ts` project as we don't have a `typescript` dependency in the templates anymore --- projectFilesManager.js | 12 +- projectHelpers.js | 13 -- templates/webpack.javascript.js | 256 -------------------------------- templates/webpack.typescript.js | 6 +- 4 files changed, 5 insertions(+), 282 deletions(-) delete mode 100644 templates/webpack.javascript.js diff --git a/projectFilesManager.js b/projectFilesManager.js index 1a3855d4..5e68f4e8 100644 --- a/projectFilesManager.js +++ b/projectFilesManager.js @@ -1,7 +1,7 @@ const path = require("path"); const fs = require("fs"); -const { isTypeScript, isAngular, isVue } = require("./projectHelpers"); +const { isAngular, isVue } = require("./projectHelpers"); function addProjectFiles(projectDir) { const projectTemplates = getProjectTemplates(projectDir); @@ -65,10 +65,8 @@ function getProjectTemplates(projectDir) { templates = getAngularTemplates(WEBPACK_CONFIG_NAME, TSCONFIG_TNS_NAME); } else if (isVue({ projectDir })) { templates = getVueTemplates(WEBPACK_CONFIG_NAME); - } else if (isTypeScript({ projectDir })) { - templates = getTypeScriptTemplates(WEBPACK_CONFIG_NAME, TSCONFIG_TNS_NAME); } else { - templates = getJavaScriptTemplates(WEBPACK_CONFIG_NAME); + templates = getTypeScriptTemplates(WEBPACK_CONFIG_NAME, TSCONFIG_TNS_NAME); } return getFullTemplatesPath(projectDir, templates); @@ -94,12 +92,6 @@ function getVueTemplates(webpackConfigName) { }; } -function getJavaScriptTemplates(webpackConfigName) { - return { - "webpack.javascript.js": webpackConfigName, - }; -} - function getFullTemplatesPath(projectDir, templates) { let updatedTemplates = {}; diff --git a/projectHelpers.js b/projectHelpers.js index d4266015..867c9b4b 100644 --- a/projectHelpers.js +++ b/projectHelpers.js @@ -8,18 +8,6 @@ const PROJECT_DATA_GETTERS = { appResourcesPath: "getAppResourcesRelativeDirectoryPath", }; -const isTypeScript = ({ projectDir, packageJson } = {}) => { - packageJson = packageJson || getPackageJson(projectDir); - - return ( - packageJson.dependencies && - packageJson.dependencies.hasOwnProperty("typescript") - ) || ( - packageJson.devDependencies && - packageJson.devDependencies.hasOwnProperty("typescript") - ) || isAngular({ packageJson }); -}; - const isAngular = ({ projectDir, packageJson } = {}) => { packageJson = packageJson || getPackageJson(projectDir); @@ -92,7 +80,6 @@ module.exports = { isIos, isAngular, isVue, - isTypeScript, writePackageJson, convertSlashesInPath }; \ No newline at end of file diff --git a/templates/webpack.javascript.js b/templates/webpack.javascript.js deleted file mode 100644 index 96fa1e62..00000000 --- a/templates/webpack.javascript.js +++ /dev/null @@ -1,256 +0,0 @@ -const { join, relative, resolve, sep } = require("path"); - -const webpack = require("webpack"); -const nsWebpack = require("nativescript-dev-webpack"); -const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target"); -const CleanWebpackPlugin = require("clean-webpack-plugin"); -const CopyWebpackPlugin = require("copy-webpack-plugin"); -const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer"); -const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin"); -const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); - -module.exports = env => { - // Add your custom Activities, Services and other android app components here. - const appComponents = [ - "tns-core-modules/ui/frame", - "tns-core-modules/ui/frame/activity", - ]; - - const platform = env && (env.android && "android" || env.ios && "ios"); - if (!platform) { - throw new Error("You need to provide a target platform!"); - } - - const platforms = ["ios", "android"]; - const projectRoot = __dirname; - - // Default destination inside platforms//... - const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot)); - const appResourcesPlatformDir = platform === "android" ? "Android" : "iOS"; - - const { - // The 'appPath' and 'appResourcesPath' values are fetched from - // the nsconfig.json configuration file - // when bundling with `tns run android|ios --bundle`. - appPath = "app", - appResourcesPath = "app/App_Resources", - - // You can provide the following flags when running 'tns run android|ios' - snapshot, // --env.snapshot - uglify, // --env.uglify - report, // --env.report - sourceMap, // --env.sourceMap - hmr, // --env.hmr, - } = env; - const externals = (env.externals || []).map((e) => { // --env.externals - return new RegExp(e + ".*"); - }); - - const appFullPath = resolve(projectRoot, appPath); - const appResourcesFullPath = resolve(projectRoot, appResourcesPath); - - const entryModule = nsWebpack.getEntryModule(appFullPath); - const entryPath = `.${sep}${entryModule}.js`; - - const config = { - mode: uglify ? "production" : "development", - context: appFullPath, - externals, - watchOptions: { - ignored: [ - appResourcesFullPath, - // Don't watch hidden files - "**/.*", - ] - }, - target: nativescriptTarget, - entry: { - bundle: entryPath, - }, - output: { - pathinfo: false, - path: dist, - libraryTarget: "commonjs2", - filename: "[name].js", - globalObject: "global", - }, - resolve: { - extensions: [".js", ".scss", ".css"], - // Resolve {N} system modules from tns-core-modules - modules: [ - "node_modules/tns-core-modules", - "node_modules", - ], - alias: { - '~': appFullPath - }, - // don't resolve symlinks to symlinked modules - symlinks: false - }, - resolveLoader: { - // don't resolve symlinks to symlinked loaders - symlinks: false - }, - node: { - // Disable node shims that conflict with NativeScript - "http": false, - "timers": false, - "setImmediate": false, - "fs": "empty", - "__dirname": false, - }, - devtool: sourceMap ? "inline-source-map" : "none", - optimization: { - splitChunks: { - cacheGroups: { - vendor: { - name: "vendor", - chunks: "all", - test: (module, chunks) => { - const moduleName = module.nameForCondition ? module.nameForCondition() : ''; - return /[\\/]node_modules[\\/]/.test(moduleName) || - appComponents.some(comp => comp === moduleName); - - }, - enforce: true, - }, - } - }, - minimize: !!uglify, - minimizer: [ - new UglifyJsPlugin({ - parallel: true, - cache: true, - uglifyOptions: { - output: { - comments: false, - }, - compress: { - // The Android SBG has problems parsing the output - // when these options are enabled - 'collapse_vars': platform !== "android", - sequences: platform !== "android", - } - } - }) - ], - }, - module: { - rules: [ - { - test: new RegExp(entryPath), - use: [ - // Require all Android app components - platform === "android" && { - loader: "nativescript-dev-webpack/android-app-components-loader", - options: { modules: appComponents } - }, - - { - loader: "nativescript-dev-webpack/bundle-config-loader", - options: { - loadCss: !snapshot, // load the application css if in debug mode - } - }, - ].filter(loader => !!loader) - }, - - { - test: /-page\.js$/, - use: "nativescript-dev-webpack/script-hot-loader" - }, - - { - test: /\.(css|scss)$/, - use: "nativescript-dev-webpack/style-hot-loader" - }, - - { - test: /\.(html|xml)$/, - use: "nativescript-dev-webpack/markup-hot-loader" - }, - - { test: /\.(html|xml)$/, use: "nativescript-dev-webpack/xml-namespace-loader"}, - - { - test: /\.css$/, - use: { loader: "css-loader", options: { minimize: false, url: false } } - }, - - { - test: /\.scss$/, - use: [ - { loader: "css-loader", options: { minimize: false, url: false } }, - "sass-loader" - ] - }, - ] - }, - plugins: [ - // Define useful constants like TNS_WEBPACK - new webpack.DefinePlugin({ - "global.TNS_WEBPACK": "true", - "process": undefined, - }), - // Remove all files from the out dir. - new CleanWebpackPlugin([ `${dist}/**/*` ]), - // Copy native app resources to out dir. - new CopyWebpackPlugin([ - { - from: `${appResourcesFullPath}/${appResourcesPlatformDir}`, - to: `${dist}/App_Resources/${appResourcesPlatformDir}`, - context: projectRoot - }, - ]), - // Copy assets to out dir. Add your own globs as needed. - new CopyWebpackPlugin([ - { from: { glob: "fonts/**" } }, - { from: { glob: "**/*.jpg" } }, - { from: { glob: "**/*.png" } }, - ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }), - // Generate a bundle starter script and activate it in package.json - new nsWebpack.GenerateBundleStarterPlugin([ - "./vendor", - "./bundle", - ]), - // For instructions on how to set up workers with webpack - // check out https://github.com/nativescript/worker-loader - new NativeScriptWorkerPlugin(), - new nsWebpack.PlatformFSPlugin({ - platform, - platforms, - }), - // Does IPC communication with the {N} CLI to notify events when running in watch mode. - new nsWebpack.WatchStateLoggerPlugin(), - ], - }; - - if (report) { - // Generate report files for bundles content - config.plugins.push(new BundleAnalyzerPlugin({ - analyzerMode: "static", - openAnalyzer: false, - generateStatsFile: true, - reportFilename: resolve(projectRoot, "report", `report.html`), - statsFilename: resolve(projectRoot, "report", `stats.json`), - })); - } - - if (snapshot) { - config.plugins.push(new nsWebpack.NativeScriptSnapshotPlugin({ - chunk: "vendor", - requireModules: [ - "tns-core-modules/bundle-entry-points", - ], - projectRoot, - webpackConfig: config, - })); - } - - if (hmr) { - config.plugins.push(new webpack.HotModuleReplacementPlugin()); - } - - - return config; -}; diff --git a/templates/webpack.typescript.js b/templates/webpack.typescript.js index b3873812..5073107e 100644 --- a/templates/webpack.typescript.js +++ b/templates/webpack.typescript.js @@ -50,7 +50,7 @@ module.exports = env => { const appResourcesFullPath = resolve(projectRoot, appResourcesPath); const entryModule = nsWebpack.getEntryModule(appFullPath); - const entryPath = `.${sep}${entryModule}.ts`; + const entryPath = `.${sep}${entryModule}`; const config = { mode: uglify ? "production" : "development", @@ -140,7 +140,7 @@ module.exports = env => { module: { rules: [ { - test: new RegExp(entryPath), + test: new RegExp(entryPath + "\.[jt]s"), use: [ // Require all Android app components platform === "android" && { @@ -158,7 +158,7 @@ module.exports = env => { }, { - test: /-page\.ts$/, + test: /-page\.[jt]s$/, use: "nativescript-dev-webpack/script-hot-loader" }, From e3b661bf6eeabb1ce93b22bed4a794514cac5388 Mon Sep 17 00:00:00 2001 From: DimitarTachev Date: Wed, 21 Nov 2018 09:48:32 +0200 Subject: [PATCH 2/2] fix: generate tsconfig based on the nativescript-dev-webpack dependency --- projectFilesManager.js | 12 +- projectHelpers.js | 15 ++ templates/webpack.javascript.js | 256 ++++++++++++++++++++++++++++++++ templates/webpack.typescript.js | 6 +- 4 files changed, 284 insertions(+), 5 deletions(-) create mode 100644 templates/webpack.javascript.js diff --git a/projectFilesManager.js b/projectFilesManager.js index 5e68f4e8..1a3855d4 100644 --- a/projectFilesManager.js +++ b/projectFilesManager.js @@ -1,7 +1,7 @@ const path = require("path"); const fs = require("fs"); -const { isAngular, isVue } = require("./projectHelpers"); +const { isTypeScript, isAngular, isVue } = require("./projectHelpers"); function addProjectFiles(projectDir) { const projectTemplates = getProjectTemplates(projectDir); @@ -65,8 +65,10 @@ function getProjectTemplates(projectDir) { templates = getAngularTemplates(WEBPACK_CONFIG_NAME, TSCONFIG_TNS_NAME); } else if (isVue({ projectDir })) { templates = getVueTemplates(WEBPACK_CONFIG_NAME); - } else { + } else if (isTypeScript({ projectDir })) { templates = getTypeScriptTemplates(WEBPACK_CONFIG_NAME, TSCONFIG_TNS_NAME); + } else { + templates = getJavaScriptTemplates(WEBPACK_CONFIG_NAME); } return getFullTemplatesPath(projectDir, templates); @@ -92,6 +94,12 @@ function getVueTemplates(webpackConfigName) { }; } +function getJavaScriptTemplates(webpackConfigName) { + return { + "webpack.javascript.js": webpackConfigName, + }; +} + function getFullTemplatesPath(projectDir, templates) { let updatedTemplates = {}; diff --git a/projectHelpers.js b/projectHelpers.js index 867c9b4b..50413157 100644 --- a/projectHelpers.js +++ b/projectHelpers.js @@ -8,6 +8,20 @@ const PROJECT_DATA_GETTERS = { appResourcesPath: "getAppResourcesRelativeDirectoryPath", }; +const isTypeScript = ({ projectDir, packageJson } = {}) => { + packageJson = packageJson || getPackageJson(projectDir); + + return ( + packageJson.dependencies && + (packageJson.dependencies.hasOwnProperty("nativescript-dev-typescript") || + packageJson.dependencies.hasOwnProperty("typescript")) + ) || ( + packageJson.devDependencies && + (packageJson.devDependencies.hasOwnProperty("nativescript-dev-typescript") || + packageJson.devDependencies.hasOwnProperty("typescript")) + ) || isAngular({ packageJson }); +}; + const isAngular = ({ projectDir, packageJson } = {}) => { packageJson = packageJson || getPackageJson(projectDir); @@ -80,6 +94,7 @@ module.exports = { isIos, isAngular, isVue, + isTypeScript, writePackageJson, convertSlashesInPath }; \ No newline at end of file diff --git a/templates/webpack.javascript.js b/templates/webpack.javascript.js new file mode 100644 index 00000000..96fa1e62 --- /dev/null +++ b/templates/webpack.javascript.js @@ -0,0 +1,256 @@ +const { join, relative, resolve, sep } = require("path"); + +const webpack = require("webpack"); +const nsWebpack = require("nativescript-dev-webpack"); +const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target"); +const CleanWebpackPlugin = require("clean-webpack-plugin"); +const CopyWebpackPlugin = require("copy-webpack-plugin"); +const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer"); +const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin"); +const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); + +module.exports = env => { + // Add your custom Activities, Services and other android app components here. + const appComponents = [ + "tns-core-modules/ui/frame", + "tns-core-modules/ui/frame/activity", + ]; + + const platform = env && (env.android && "android" || env.ios && "ios"); + if (!platform) { + throw new Error("You need to provide a target platform!"); + } + + const platforms = ["ios", "android"]; + const projectRoot = __dirname; + + // Default destination inside platforms//... + const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot)); + const appResourcesPlatformDir = platform === "android" ? "Android" : "iOS"; + + const { + // The 'appPath' and 'appResourcesPath' values are fetched from + // the nsconfig.json configuration file + // when bundling with `tns run android|ios --bundle`. + appPath = "app", + appResourcesPath = "app/App_Resources", + + // You can provide the following flags when running 'tns run android|ios' + snapshot, // --env.snapshot + uglify, // --env.uglify + report, // --env.report + sourceMap, // --env.sourceMap + hmr, // --env.hmr, + } = env; + const externals = (env.externals || []).map((e) => { // --env.externals + return new RegExp(e + ".*"); + }); + + const appFullPath = resolve(projectRoot, appPath); + const appResourcesFullPath = resolve(projectRoot, appResourcesPath); + + const entryModule = nsWebpack.getEntryModule(appFullPath); + const entryPath = `.${sep}${entryModule}.js`; + + const config = { + mode: uglify ? "production" : "development", + context: appFullPath, + externals, + watchOptions: { + ignored: [ + appResourcesFullPath, + // Don't watch hidden files + "**/.*", + ] + }, + target: nativescriptTarget, + entry: { + bundle: entryPath, + }, + output: { + pathinfo: false, + path: dist, + libraryTarget: "commonjs2", + filename: "[name].js", + globalObject: "global", + }, + resolve: { + extensions: [".js", ".scss", ".css"], + // Resolve {N} system modules from tns-core-modules + modules: [ + "node_modules/tns-core-modules", + "node_modules", + ], + alias: { + '~': appFullPath + }, + // don't resolve symlinks to symlinked modules + symlinks: false + }, + resolveLoader: { + // don't resolve symlinks to symlinked loaders + symlinks: false + }, + node: { + // Disable node shims that conflict with NativeScript + "http": false, + "timers": false, + "setImmediate": false, + "fs": "empty", + "__dirname": false, + }, + devtool: sourceMap ? "inline-source-map" : "none", + optimization: { + splitChunks: { + cacheGroups: { + vendor: { + name: "vendor", + chunks: "all", + test: (module, chunks) => { + const moduleName = module.nameForCondition ? module.nameForCondition() : ''; + return /[\\/]node_modules[\\/]/.test(moduleName) || + appComponents.some(comp => comp === moduleName); + + }, + enforce: true, + }, + } + }, + minimize: !!uglify, + minimizer: [ + new UglifyJsPlugin({ + parallel: true, + cache: true, + uglifyOptions: { + output: { + comments: false, + }, + compress: { + // The Android SBG has problems parsing the output + // when these options are enabled + 'collapse_vars': platform !== "android", + sequences: platform !== "android", + } + } + }) + ], + }, + module: { + rules: [ + { + test: new RegExp(entryPath), + use: [ + // Require all Android app components + platform === "android" && { + loader: "nativescript-dev-webpack/android-app-components-loader", + options: { modules: appComponents } + }, + + { + loader: "nativescript-dev-webpack/bundle-config-loader", + options: { + loadCss: !snapshot, // load the application css if in debug mode + } + }, + ].filter(loader => !!loader) + }, + + { + test: /-page\.js$/, + use: "nativescript-dev-webpack/script-hot-loader" + }, + + { + test: /\.(css|scss)$/, + use: "nativescript-dev-webpack/style-hot-loader" + }, + + { + test: /\.(html|xml)$/, + use: "nativescript-dev-webpack/markup-hot-loader" + }, + + { test: /\.(html|xml)$/, use: "nativescript-dev-webpack/xml-namespace-loader"}, + + { + test: /\.css$/, + use: { loader: "css-loader", options: { minimize: false, url: false } } + }, + + { + test: /\.scss$/, + use: [ + { loader: "css-loader", options: { minimize: false, url: false } }, + "sass-loader" + ] + }, + ] + }, + plugins: [ + // Define useful constants like TNS_WEBPACK + new webpack.DefinePlugin({ + "global.TNS_WEBPACK": "true", + "process": undefined, + }), + // Remove all files from the out dir. + new CleanWebpackPlugin([ `${dist}/**/*` ]), + // Copy native app resources to out dir. + new CopyWebpackPlugin([ + { + from: `${appResourcesFullPath}/${appResourcesPlatformDir}`, + to: `${dist}/App_Resources/${appResourcesPlatformDir}`, + context: projectRoot + }, + ]), + // Copy assets to out dir. Add your own globs as needed. + new CopyWebpackPlugin([ + { from: { glob: "fonts/**" } }, + { from: { glob: "**/*.jpg" } }, + { from: { glob: "**/*.png" } }, + ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }), + // Generate a bundle starter script and activate it in package.json + new nsWebpack.GenerateBundleStarterPlugin([ + "./vendor", + "./bundle", + ]), + // For instructions on how to set up workers with webpack + // check out https://github.com/nativescript/worker-loader + new NativeScriptWorkerPlugin(), + new nsWebpack.PlatformFSPlugin({ + platform, + platforms, + }), + // Does IPC communication with the {N} CLI to notify events when running in watch mode. + new nsWebpack.WatchStateLoggerPlugin(), + ], + }; + + if (report) { + // Generate report files for bundles content + config.plugins.push(new BundleAnalyzerPlugin({ + analyzerMode: "static", + openAnalyzer: false, + generateStatsFile: true, + reportFilename: resolve(projectRoot, "report", `report.html`), + statsFilename: resolve(projectRoot, "report", `stats.json`), + })); + } + + if (snapshot) { + config.plugins.push(new nsWebpack.NativeScriptSnapshotPlugin({ + chunk: "vendor", + requireModules: [ + "tns-core-modules/bundle-entry-points", + ], + projectRoot, + webpackConfig: config, + })); + } + + if (hmr) { + config.plugins.push(new webpack.HotModuleReplacementPlugin()); + } + + + return config; +}; diff --git a/templates/webpack.typescript.js b/templates/webpack.typescript.js index 5073107e..b3873812 100644 --- a/templates/webpack.typescript.js +++ b/templates/webpack.typescript.js @@ -50,7 +50,7 @@ module.exports = env => { const appResourcesFullPath = resolve(projectRoot, appResourcesPath); const entryModule = nsWebpack.getEntryModule(appFullPath); - const entryPath = `.${sep}${entryModule}`; + const entryPath = `.${sep}${entryModule}.ts`; const config = { mode: uglify ? "production" : "development", @@ -140,7 +140,7 @@ module.exports = env => { module: { rules: [ { - test: new RegExp(entryPath + "\.[jt]s"), + test: new RegExp(entryPath), use: [ // Require all Android app components platform === "android" && { @@ -158,7 +158,7 @@ module.exports = env => { }, { - test: /-page\.[jt]s$/, + test: /-page\.ts$/, use: "nativescript-dev-webpack/script-hot-loader" },