Support typescript in build scripts

core/build/dev-server.js

@@ -8,8 +8,8 @@ let baseServerConfig = require('./webpack.server.config')
 const themeRoot = require('./theme-path')
 const extendedConfig = require(path.join(themeRoot, '/webpack.config.js'))
 
-let clientConfig = extendedConfig(baseClientConfig, { isClient: true, isDev: true })
-let serverConfig = extendedConfig(baseServerConfig, { isClient: false, isDev: true })
+let clientConfig = extendedConfig(baseClientConfig, { isClient: true, isDev: true }).default;
+let serverConfig = extendedConfig(baseServerConfig, { isClient: false, isDev: true }).default;
 
 module.exports = function setupDevServer (app, cb) {
   let bundle

core/build/theme-path.js → core/build/theme-path.ts

@@ -1,8 +1,8 @@
-const path = require('path')
-const detectInstalled = require('detect-installed')
+import path from 'path'
+import detectInstalled from 'detect-installed'
 const config = require('./config.json')
 
-let themePath = '';
+let themePath = ''
 let themeName = config.theme
 
 if (detectInstalled.sync(config.theme, { local: true })) {
@@ -13,4 +13,6 @@ else {
   themePath = path.resolve(__dirname, '../../src/themes/' + themeName)
 }
 
+export default themePath
+
 module.exports = themePath

core/build/webpack.base.config.js → core/build/webpack.base.config.ts

@@ -1,12 +1,12 @@
-const path = require('path')
-const config = require('config')
-const fs = require('fs')
-const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
-const VueLoaderPlugin = require('vue-loader/lib/plugin')
-const autoprefixer = require('autoprefixer')
-const HTMLPlugin = require('html-webpack-plugin')
+import path from 'path';
+import config from 'config';
+import fs from 'fs';
+import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
+import VueLoaderPlugin from 'vue-loader/lib/plugin';
+import autoprefixer from 'autoprefixer';
+import HTMLPlugin from 'html-webpack-plugin';
 // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
-const webpack = require('webpack')
+import webpack from 'webpack';
 
 fs.writeFileSync(
   path.resolve(__dirname, './config.json'),
@@ -15,7 +15,7 @@ fs.writeFileSync(
 
 const themesRoot = '../../src/themes'
 
-const themeRoot = require('./theme-path')
+import themeRoot from './theme-path';
 const themeResources = themeRoot + '/resource'
 const themeCSS = themeRoot + '/css'
 const themeApp = themeRoot + '/App.vue'
@@ -44,7 +44,7 @@ const postcssConfig =  {
 };
 const isProd = process.env.NODE_ENV === 'production'
 // todo: usemultipage-webpack-plugin for multistore
-module.exports = {
+export default {
   plugins: [
     new webpack.ProgressPlugin(),
     // new BundleAnalyzerPlugin({

core/build/webpack.client.config.js → core/build/webpack.client.config.ts

@@ -1,7 +1,7 @@
-const webpack = require('webpack')
-const merge = require('webpack-merge')
-const base = require('./webpack.base.config')
-const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
+import webpack from 'webpack'
+import merge from 'webpack-merge'
+import base from './webpack.base.config'
+import VueSSRClientPlugin from 'vue-server-renderer/client-plugin'
 // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 
 const config = merge(base, {
@@ -14,7 +14,7 @@ const config = merge(base, {
           chunks: 'all',
         },
       },
-    },   
+    },
       runtimeChunk: {
       name: "manifest",
     }
@@ -35,4 +35,4 @@ const config = merge(base, {
   ]
 })
 
-module.exports = config;
+export default config;

core/build/webpack.prod.client.config.ts

@@ -0,0 +1,19 @@
+import path from 'path';
+import merge from 'webpack-merge';
+import baseClientConfig from './webpack.client.config';
+const themeRoot = require ('./theme-path');
+import CompressionPlugin from 'compression-webpack-plugin';
+
+const extendedConfig = require(path.join(themeRoot, '/webpack.config.js'))
+
+const prodClientConfig = merge(baseClientConfig, {
+  mode: 'production',
+  plugins: [
+    new CompressionPlugin()
+  ]
+})
+
+module.exports = extendedConfig(prodClientConfig, {
+  isClient: true,
+  isDev: false
+})

core/build/webpack.prod.server.config.ts

@@ -0,0 +1,13 @@
+import path from 'path';
+
+import baseServerConfig from './webpack.server.config';
+
+import themeRoot from './theme-path';
+
+const extendedConfig = require(path.join(themeRoot, '/webpack.config.js'))
+
+export default extendedConfig(baseServerConfig, {
+  mode: 'production',
+  isClient: false,
+  isDev: false
+})

core/build/webpack.prod.sw.config.js → core/build/webpack.prod.sw.config.ts

@@ -1,7 +1,7 @@
-const webpack = require('webpack')
-const merge = require('webpack-merge')
-const base = require('./webpack.base.config')
-const SWPrecachePlugin = require('sw-precache-webpack-plugin')
+import webpack from 'webpack';
+import merge from 'webpack-merge';
+import base from './webpack.base.config';
+import SWPrecachePlugin from 'sw-precache-webpack-plugin';
 
 module.exports = merge(base, {
   mode: 'production',
@@ -91,6 +91,6 @@ module.exports = merge(base, {
         handler: "networkFirst"
       }],
       "importScripts": ['/dist/core-service-worker.js'] /* custom logic */
-    })    
+    })
   ]
 })

core/build/webpack.server.config.js → core/build/webpack.server.config.ts

@@ -1,9 +1,9 @@
-const webpack = require('webpack')
-const merge = require('webpack-merge')
-const base = require('./webpack.base.config')
-const VueSSRPlugin = require('vue-ssr-webpack-plugin')
+import webpack from 'webpack';
+import merge from 'webpack-merge';
+import base from './webpack.base.config';
+import VueSSRPlugin from 'vue-ssr-webpack-plugin';
 
-module.exports = merge(base, {
+export default merge(base, {
   mode: 'development',
   target: 'node',
   entry: ['babel-polyfill', './core/server-entry.ts'],

core/scripts/entry.ts

@@ -0,0 +1,3 @@
+import server from './server.js';
+
+export default server;

package.json

@@ -30,12 +30,12 @@
     "installer:ci": "yarn installer --default-config",
     "all": "cross-env NODE_ENV=development node ./core/scripts/all",
     "cache": "node ./core/scripts/cache",
-    "dev": "node ./core/scripts/entry",
-    "dev:sw": "yarn build:sw && node ./core/scripts/entry",
-    "dev:inspect": "node --inspect ./core/scripts/entry",
-    "build:sw": "cross-env NODE_ENV=production webpack --config ./core/build/webpack.prod.sw.config.js --mode production --progress --hide-modules",
-    "build:client": "cross-env NODE_ENV=production webpack --config ./core/build/webpack.prod.client.config.js --mode production --progress --hide-modules",
-    "build:server": "cross-env NODE_ENV=production webpack --config ./core/build/webpack.prod.server.config.js --mode production --progress --hide-modules",
+    "dev": "TS_NODE_PROJECT=\"tsconfig-build.json\" ts-node ./core/scripts/entry.ts",
+    "dev:sw": "TS_NODE_PROJECT=\"tsconfig-build.json\" yarn build:sw && ts-node ./core/scripts/entry",
+    "dev:inspect": "TS_NODE_PROJECT=\"tsconfig-build.json\" node --inspect -r ts-node/register ./core/scripts/entry",
+    "build:sw": "cross-env NODE_ENV=production TS_NODE_PROJECT=\"tsconfig-build.json\" webpack --config ./core/build/webpack.prod.sw.config.ts --mode production --progress --hide-modules",
+    "build:client": "cross-env NODE_ENV=production TS_NODE_PROJECT=\"tsconfig-build.json\" webpack --config ./core/build/webpack.prod.client.config.ts --mode production --progress --hide-modules",
+    "build:server": "cross-env NODE_ENV=production TS_NODE_PROJECT=\"tsconfig-build.json\" webpack --config ./core/build/webpack.prod.server.config.ts --mode production --progress --hide-modules",
     "build": "rimraf dist && yarn build:client && yarn build:server && yarn build:sw",
     "test:unit": "karma start ./tests/unit/karma.conf.js --single-run",
     "test:e2e": "cypress open",
@@ -44,6 +44,8 @@
     "lerna": "lerna"
   },
   "dependencies": {
+    "@types/webpack": "^4.4.23",
+    "@types/webpack-dev-server": "^3.1.1",
     "apollo-cache-inmemory": "^1.2.5",
     "apollo-client": "^2.3.5",
     "apollo-link": "^1.2.2",
@@ -62,6 +64,7 @@
     "pm2": "^2.10.4",
     "reflect-metadata": "^0.1.12",
     "register-service-worker": "^1.5.2",
+    "ts-node": "^7.0.1",
     "vue": "^2.5.17",
     "vue-analytics": "^5.16.1",
     "vue-apollo": "^3.0.0-beta.19",
@@ -79,7 +82,7 @@
     "vuex-router-sync": "^5.0.0"
   },
   "devDependencies": {
-    "@types/node": "^10.12.10",
+    "@types/node": "^10.12.18",
     "@vue/test-utils": "^1.0.0-beta.19",
     "app-root-path": "^2.0.1",
     "autoprefixer": "^8.6.2",

tsconfig-build.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es5",
+    "esModuleInterop": true
+  }
+}