Skip to content

Supporting dynamic load multi projects #5178

@zhazhaxia

Description

@zhazhaxia

What problem does this feature solve?

We config mutil projects in vue/cli3,it'lll load all projects we configs. It waste time and most of the projects is useless.
For example,we have projceA,projectB,projectC,we only need to develop projectB,but vue/cli3 load all .
So,what the feature we need?That is,we use webpack-dev-serve listen to the url the browser accept.And then,resolve the projcet from url,then build the project we accept.
This feature improve development efficiency deeply.

What does the proposed API look like?

At this file,https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/commands/serve.js.

  • We use webpack-dev-serve to get the project from url.
          server.app.get('/*.html', function (req, res, next) {})
  • match the project
         const matched = req.originalUrl.match(/\/(.*)\.html/);
  • dynamic load the entry use MultiEntryPlugin
const handleMultiEntry = (app, paths, compiler) => {
  paths = hotEntry.concat(paths);
  const multiEntry = new MultiEntryPlugin(process.cwd(), paths, app);
  multiEntry.apply(compiler);
  findHtmlPlugin(app).apply(compiler);
};

findHtmlPlugin means to load HTMLWebpackPlugin to this project

  • recomplie the project
server.middleware.invalidate();
  • return the build result to browser
server.middleware.waitUntilValid(() => {
    compiler.outputFileSystem.readFile(
      path.join(compiler.outputPath, req.originalUrl),
      function (err, result) {
        if (err) {
          return next(err);
        }
     
        res.set('content-type', 'text/html');
        res.send(result);
        res.end();
      }
    );
  });

That's all the step i describe about the feature.

I had implemented the feature in my local environment. works well.
I hope vue/cli team can accept this feature.Thanks for reading.
(pardon my poor description)

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      pFad - Phonifier reborn

      Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

      Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


      Alternative Proxies:

      Alternative Proxy

      pFad Proxy

      pFad v3 Proxy

      pFad v4 Proxy