replace webpack with vue-cli

2020-10-13 16:17:19 +02:00
parent 1051853a84
commit d6f02860eb
41 changed files with 137 additions and 235 deletions
@@ -266,8 +266,8 @@ App_Data/
 **/wwwroot/Media/
 **/wwwroot/Uploads/
 Temp/
-**/Assets/app.*
-**/Assets/setup.*
-**/Assets/*.js
+**/Assets/**/app.*
+**/Assets/**/setup.*
+**/Assets/**/*.js
 deps/*.dll
 zero.Commerce/
@@ -11,6 +11,8 @@ namespace zero.Core.Plugins
    public string Description { get; set; }

    public List<string> LocalizationPaths { get; private set; } = new List<string>();
+
+    public string PluginPath { get; set; }
  }


@@ -21,6 +23,8 @@ namespace zero.Core.Plugins
    string Description { get; set; }

    List<string> LocalizationPaths { get; }
+
+    string PluginPath { get; set; }
  }


@@ -4,6 +4,8 @@ using Microsoft.AspNetCore.Hosting;
 using Microsoft.Extensions.Configuration;
 using Microsoft.Extensions.DependencyInjection;
 using Microsoft.Extensions.Hosting;
+using System;
+using System.IO;
 using zero.Commerce;
 using zero.TestData;
 using zero.Web;
@@ -58,7 +60,7 @@ namespace zero.Debug
      app.UseRouting();
      app.UseAuthentication();

-      app.UseZero();
+      app.UseZero(devPath: Path.Combine(Environment.CurrentDirectory, "..", "zero.Web.UI"));

      app.UseEndpoints(endpoints =>
      {
@@ -1,27 +0,0 @@
-@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
-@model zero.Web.Models.ZeroBackofficeModel
-@{ Layout = null; }
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <meta name="robots" content="noindex,nofollow">
-  <meta name="author" content="brothers">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="content-type" content="text/html; charset=utf-8">
-  <meta http-equiv="expires" content="0">
-  <base href="~/">
-  <environment exclude="Development">
-    <link href="~/Assets/app.css" rel="stylesheet" asp-append-version="true" />
-  </environment>
-  <title>zero</title>
-</head>
-<body class="theme-light theme-rounded">
-  <div id="app"></div>
-  <script>
-    window.zero = window.zero || {};
-    zero = @Html.Raw(await Model.Vue.ConfigAsJson());
-  </script>
-  <script src="~/Assets/app.js" asp-append-version="true"></script>
-</body>
-</html>
@@ -1,30 +0,0 @@
-@using zero.Core.Extensions
-@inject zero.Core.Options.IZeroOptions Options
-@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
-@{
-  Layout = null;
-}
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <meta name="robots" content="noindex,nofollow">
-  <meta name="author" content="brothers">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="content-type" content="text/html; charset=utf-8">
-  <meta http-equiv="expires" content="0">
-  <base href="~/">
-  <environment exclude="Development">
-    <link href="~/Assets/setup.css" rel="stylesheet" asp-append-version="true" />
-  </environment>
-  <title>zero</title>
-</head>
-<body>
-  <div id="application"></div>
-  <script>
-    window.zero = window.zero || {};
-    zero.path = "@Options.BackofficePath.EnsureEndsWith('/')";
-  </script>
-  <script src="~/Assets/setup.js" asp-append-version="true"></script>
-</body>
-</html>
@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
-    <path d="M60.594,16.81c0,0.984-0.798,1.783-1.783,1.783s-1.783-0.798-1.783-1.783s0.798-1.783,1.783-1.783  S60.594,15.825,60.594,16.81z M78.7,77.146L78.7,77.146c5.511-0.809,9.159-5.267,9.31-5.456l0.791-0.982l-1.065-0.675  c-0.213-0.135-5.262-3.286-10.453-2.525c-5.976,0.878-9.216,5.318-9.351,5.507l-0.689,0.963l0.997,0.639  c0.188,0.121,4.187,2.65,8.771,2.65C77.566,77.267,78.131,77.23,78.7,77.146z M77.61,69.735c2.989-0.435,6.044,0.745,7.692,1.541  c-1.289,1.221-3.789,3.182-6.93,3.643l0,0c-3.046,0.447-6.134-0.767-7.755-1.564C71.799,72.163,74.181,70.239,77.61,69.735z   M69.27,67.768c-2.88,2.338-8.369,6.848-14.189,11.64c2.51-1.088,5.553-1.922,9.056-1.935c0.02,0,0.041,0,0.06,0  c8.746,0,16.358,6.672,16.679,6.956l0.907,0.806l-0.871,0.844c-0.298,0.289-7.401,7.068-16.72,7.101c-0.021,0-0.042,0-0.062,0  c-8.843,0.001-16.368-6.676-16.685-6.961l-0.302-0.271c-4.473,3.689-8.506,7.019-10.964,9.05h-3.534  c2.385-1.97,15.107-12.481,25.041-20.651V63.375l-33.54,27.572H11.889l19.27-20.778h3.073L17.055,88.697h6.292L61.246,57.54  C74.1,46.994,78.478,28.962,71.894,13.699l-0.146-0.326c-1.981-4.57-6.934-7.024-11.762-5.819c-4.018,0.991-7.001,4.277-7.609,8.363  l-0.09,0.563l-4.885,2.668l4.896,1.159c0,0,0.022,6.258-0.079,7.812L14.241,69.134l19.855-4.716  c5.954-1.407,10.963-5.076,14.104-10.333c2.184-3.647,3.264-7.733,3.174-11.875h2.251c0.09,4.547-1.103,9.027-3.501,13.034  c-3.444,5.785-8.96,9.815-15.511,11.357L7.567,73.028l42.455-45.856c0.063-1.224,0.047-5.076,0.047-5.076l-8.903-2.116l9.072-4.953  c0.923-4.727,4.48-8.487,9.207-9.657c5.898-1.463,11.942,1.52,14.374,7.102l0.135,0.326c6.99,16.186,2.352,35.298-11.278,46.475  l-2.738,2.251v10.973c3.286-2.7,6.112-5.015,7.914-6.478c7.94-6.444,16.542-11.6,24.582-14.83v2.431  C84.849,56.782,76.769,61.683,69.27,67.768z M49.901,85.319c2.21,1.704,7.99,5.593,14.283,5.611  c6.528-0.023,12.032-3.882,14.188-5.628c-2.263-1.72-8.023-5.577-14.175-5.577c-0.018,0-0.035,0-0.052,0  C57.033,79.751,51.867,83.59,49.901,85.319z"/>
-</svg>
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
@@ -1,11 +1,15 @@
 {
-  "name": "zero.web",
-  "version": "1.0.0",
-  "description": "",
-  "bin": {
-    "zero.web": "app.js"
+  "name": "zero",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "build-dev": "vue-cli-service build --mode development",
+    "watch": "vue-cli-service build --mode development --watch"
  },
  "dependencies": {
+    "core-js": "^3.6.5",
    "axios": "^0.19.2",
    "dayjs": "^1.8.26",
    "flatpickr": "^4.6.3",
@@ -13,43 +17,14 @@
    "sortablejs": "^1.10.2",
    "underscore": "^1.10.2",
    "vue": "^2.6.11",
-    "vue-router": "^3.1.6"
+    "vue-router": "^3.2.0"
  },
  "devDependencies": {
-    "@babel/core": "^7.9.6",
-    "@babel/preset-env": "^7.9.6",
-    "aspnet-webpack": "*",
-    "babel-loader": "*",
-    "css-loader": "^3.5.3",
-    "html-webpack-plugin": "^4.3.0",
-    "mini-css-extract-plugin": "*",
-    "node-sass": "^4.14.1",
-    "optimize-css-assets-webpack-plugin": "*",
-    "sass-loader": "*",
-    "style-loader": "*",
-    "uglifyjs-webpack-plugin": "*",
-    "vue-loader": "*",
-    "vue-template-compiler": "*",
-    "webpack": "^4.43.0",
-    "webpack-cli": "*",
-    "webpack-dev-server": "^3.11.0",
-    "webpack-hot-middleware": "*",
-    "webpack-merge": "*"
-  },
-  "peerDependencies": {
-    "vue-template-compiler": "2.6.10"
-  },
-  "scripts": {
-    "dev": "webpack-dev-server -port 8999 --progress --hot --open",
-    "debug": "webpack --progress",
-    "build": "webpack --progress --config webpack.prod.js",
-    "updatepackages": "node wipe.js && rm -rf node_modules && npm update --save-dev && npm update --save"
-  },
-  "babel": {
-    "presets": [
-      "@babel/env"
-    ]
-  },
-  "author": "",
-  "license": "ISC"
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "sass": "^1.26.5",
+    "sass-loader": "^8.0.2",
+    "vue-template-compiler": "^2.6.11"
+  }
 }
@@ -0,0 +1,35 @@
+module.exports = {
+
+  // disable hashes in filenames
+  filenameHashing: false,
+
+  // delete HTML related webpack plugins
+  chainWebpack: config =>
+  {
+    config.plugins.delete('html')
+    config.plugins.delete('preload')
+    config.plugins.delete('prefetch')
+  },
+
+  // output path
+  outputDir: "Assets",
+
+  publicPath: "/zero/vue-cli",
+
+  // generated output
+  pages: {
+    app: "app.js"
+  },
+
+  // webpack configuration
+  chainWebpack: config =>
+  {
+    const path = require('path');
+
+    config.resolve.alias.set('zero', path.resolve(__dirname, 'App'));
+    config.resolve.alias.set('zerosetup', path.resolve(__dirname, 'Setup'));
+    config.resolve.alias.set('@', __dirname);
+    config.resolve.alias.set('shop', path.resolve(__dirname, '../zero.Commerce/Plugins/zero.Commerce'));
+    config.resolve.alias.set('deps', path.join(__dirname, 'node_modules'));
+  }
+}
@@ -1,61 +0,0 @@
-const path = require('path');
-const VueLoaderPlugin = require('vue-loader/lib/plugin');
-
-module.exports = {
-
-  // entry point of the app
-  context: __dirname,
-  entry: {
-    app: './app.js',
-    setup: './Setup/setup.js'
-  },
-
-  // dev environment (gets overwritten by prod.js)
-  mode: 'development',
-  devtool: 'cheap-module-eval-source-map',
-
-  // output paths
-  output: {
-    path: path.resolve(__dirname, 'Assets'),
-    filename: '[name].js',
-    publicPath: '/Assets/'
-  },
-
-  // map files to vue
-  resolve: {
-    extensions: ['.js', '.vue', '.json'],
-    alias: {
-      'vue$': path.join(__dirname, 'node_modules', 'vue/dist/vue.esm.js'),
-      'deps': path.join(__dirname, 'node_modules'),
-      'zero': path.join(__dirname, 'App'),
-      'zerosetup': path.join(__dirname, 'Setup'),
-      '@': __dirname,
-      'shop': path.join(__dirname, '..', 'zero.Commerce/Plugins/zero.Commerce') // TODO dynPATH
-    }
-  },
-
-  // plugins to use
-  plugins: [
-    new VueLoaderPlugin()
-  ],
-
-  // modules to load
-  module: {
-    rules: [
-      {
-        test: /\.vue$/,
-        exclude: /node_modules/,
-        loader: 'vue-loader'
-      },
-      {
-        test: /\.js$/,
-        exclude: /node_modules/,
-        loader: 'babel-loader'
-      },
-      {
-        test: /\.scss$/,
-        use: ["vue-style-loader", "css-loader", "sass-loader"]
-      }
-    ]
-  }
-};
@@ -1,44 +0,0 @@
-const merge = require('webpack-merge');
-const config = require('./webpack.config.js');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
-const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
-
-module.exports = merge(config, {
-
-  mode: 'production',
-  devtool: 'source-map',
-
-  output: {
-    path: path.resolve(__dirname, 'wwwroot/Assets'),
-    filename: '[name].js',
-    publicPath: '/Assets/'
-  },
-
-  plugins: [
-    new MiniCssExtractPlugin({
-      filename: "app.css",
-      chunkFilename: "[id].css"
-    })
-  ],
-
-  module: {
-    rules: [
-      {
-        test: /\.scss$/,
-        use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader' ]
-      }
-    ]
-  },
-
-  optimization: {
-    minimizer: [
-      new UglifyJsPlugin({
-        cache: true,
-        parallel: true,
-        sourceMap: true
-      }),
-      new OptimizeCSSAssetsPlugin({})
-    ]
-  }
-});
@@ -12,16 +12,17 @@
  <meta http-equiv="expires" content="0">
  <base href="~/">
  <environment exclude="Development">
-    <link href="~/Assets/app.css" rel="stylesheet" asp-append-version="true" />
+    <link href="~/zero/Assets/app.css" rel="stylesheet" asp-append-version="true" />
  </environment>
  <title>zero</title>
 </head>
-<body class="theme-light theme-rounded">
+<body class="theme-light theme-rounded x-test">
  <div id="app"></div>
  <script>
    window.zero = window.zero || {};
    zero = @Html.Raw(await Model.Vue.ConfigAsJson());
  </script>
-  <script src="~/Assets/app.js" asp-append-version="true"></script>
+  <script src="~/zero/vue-cli/js/chunk-vendors.js" asp-append-version="true"></script>
+  <script src="~/zero/vue-cli/js/app.js" asp-append-version="true"></script>
 </body>
 </html>
@@ -1,8 +1,13 @@
 using Microsoft.AspNetCore.Builder;
+using Microsoft.AspNetCore.Http;
+using Microsoft.AspNetCore.Routing;
+using Microsoft.AspNetCore.SpaServices;
 using Microsoft.AspNetCore.SpaServices.Webpack;
 using Microsoft.Extensions.DependencyInjection;
 using System;
+using System.Collections.Generic;
 using System.IO;
+using VueCliMiddleware;
 using zero.Core.Extensions;
 using zero.Core.Middlewares;
 using zero.Core.Options;
@@ -11,7 +16,7 @@ namespace zero.Web
 {
  public static class ZeroApplicationBuilderExtensions
  {
-    public static IApplicationBuilder UseZero(this IApplicationBuilder app)
+    public static IApplicationBuilder UseZero(this IApplicationBuilder app, string devPath = null)
    {
      IZeroOptions options = app.ApplicationServices.GetService<IZeroOptions>();

@@ -50,6 +55,11 @@ namespace zero.Web
            pattern: path + "/api/{controller}/{action}/{id?}"
          );

+          if (devPath != null)
+          {
+            endpoints.MapFallback(path + "/vue-cli/{**path}", CreateVueProxyDelegate(endpoints, new SpaOptions { SourcePath = devPath }));
+          }
+
          // fallbacks for SPA
          endpoints.MapFallbackToController(path + "/{**path}", "Index", "Index");
        });
@@ -59,26 +69,62 @@ namespace zero.Web
    }


+    static RequestDelegate CreateVueProxyDelegate(IEndpointRouteBuilder endpoints, SpaOptions options = null)
+    {
+      var app = endpoints.CreateApplicationBuilder();
+      app.Use(next => context =>
+      {
+        context.SetEndpoint(null);
+        return next(context);
+      });
+
+      app.UseSpa(opt =>
+      {
+        if (options != null)
+        {
+          opt.Options.DefaultPage = options.DefaultPage;
+          opt.Options.DefaultPageStaticFileOptions = options.DefaultPageStaticFileOptions;
+          opt.Options.SourcePath = options.SourcePath;
+          opt.Options.StartupTimeout = options.StartupTimeout;
+        }
+
+        opt.UseVueCli();
+      });
+
+      return app.Build();
+    }
+
+
    public static IApplicationBuilder UseZeroDevEnvironment(this IApplicationBuilder app, string path = null)
    {
-      app.UseDeveloperExceptionPage();
+      //IZeroOptions options = app.ApplicationServices.GetService<IZeroOptions>();
+      //string zeroPath = options.BackofficePath.EnsureStartsWith('/').TrimEnd('/');

-      string webUiPath = path ?? Path.Combine(Environment.CurrentDirectory, "..", "zero.Web.UI"); // TODO dynPATH

-      //app.UseSpa(spa =>
+      //app.UseDeveloperExceptionPage();
+
+      //string webUiPath = path ?? Path.Combine(Environment.CurrentDirectory, "..", "zero.Web.UI"); // TODO dynPATH
+
+      // map backoffice
+      //app.UseWhen(ctx => ctx.Request.Path.ToString().StartsWith(zeroPath), builder =>
      //{
-      //  spa.Options.SourcePath = webUiPath;
-      //  spa.UseProxyToSpaDevelopmentServer("http://localhost:8999");
+      //  builder.UseRouting();
+
+
      //});

-      #pragma warning disable CS0618
-      app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions()
-      {
-        HotModuleReplacement = true,
-        ProjectPath = webUiPath,
-        HotModuleReplacementServerPort = 8999
-      });
-      #pragma warning restore CS0618
+      //#pragma warning disable CS0618
+      //app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions()
+      //{
+      //  HotModuleReplacement = true,
+      //  ProjectPath = webUiPath,
+      //  HotModuleReplacementServerPort = 8999,
+      //  EnvironmentVariables = new Dictionary<string, string>()
+      //  {
+      //    { "ZERO", "hi from zero 0.1" }
+      //  }
+      //});
+      //#pragma warning restore CS0618

      return app;
    }
@@ -19,6 +19,7 @@
    <PackageReference Include="Microsoft.AspNetCore.SpaServices" Version="5.0.0-preview.8.20414.8" />
    <PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="5.0.0-preview.8.20414.8" />
    <PackageReference Include="Microsoft.AspNetCore.StaticFiles" Version="2.2.0" />
+    <PackageReference Include="VueCliMiddleware" Version="3.1.1" />
  </ItemGroup>

  <ItemGroup>
@@ -32,18 +33,13 @@
      <PackageCopyToOutput>true</PackageCopyToOutput>
      <PackagePath>content\zero\Resources\</PackagePath>
    </None>
-    
-    <None Include="zero.Web.targets">
-      <Pack>true</Pack>
-      <PackagePath>build\</PackagePath>
-    </None>

-    <BackofficeUI Include="..\zero.Web.UI\**\*" Exclude="..\zero.Web.UI\node_modules\**\*;..\zero.Web.UI\Assets\*.js;..\zero.Web.UI\package-lock.json" />
+    <!--<BackofficeUI Include="..\zero.Web.UI\**\*" Exclude="..\zero.Web.UI\node_modules\**\*;..\zero.Web.UI\Assets\*.js;..\zero.Web.UI\Output\*.js;..\zero.Web.UI\package-lock.json" />
    <None Include="@(BackofficeUI)" Link="Zero\%(RecursiveDir)%(Filename)%(Extension)">
      <Pack>true</Pack>
      <PackageCopyToOutput>true</PackageCopyToOutput>
      <PackagePath>content\zero\Web\</PackagePath>
-    </None>
+    </None>-->
  </ItemGroup>

 </Project>