Question

根据标题，给定JavaScript文件的URL，是否可以使Webpack编译并在运行时返回结果？

更新：我能够检索该文件，但是一旦有了该文件，就不确定如何将其输入到编译器中（上述情况中的步骤3）。

场景

服务器（例如express）接收到HTTP请求，其中包含指向JavaScript文件的请求URL。
假设我能够检索JavaScript文件或其文件路径。
将JavaScript文件输入到webpack编译器中。
Webpack编译器处理JavaScript文件并输出结果。
结果在HTTP响应中返回，其中包含到输出（由Webpack处理的javascript文件）的URL。

我到处寻找使用webpack-dev-middleware和编译器API的解决方案，但找不到解决方法。

已更新：伪代码

const middleware = require('webpack-dev-middleware');
const compiler = webpack(webpackConfig);

app.use(middleware(compiler, { ...middleware config... }))
app.use((req, res) => {
    const jsFile = fetchSync(req.url);
    // How do I write actual code to accomplish the logic below?
    compiler.compile(jsFile).then((output) => { res.send(output.url) });
});

Answer 1

这似乎很简单，但是如果您不显示实际代码，这是我能给您的最好的帮助

var fs = require('fs'); // or fs-extra, which is usually the better choice
var path = require('path');
var compiler = require('your compiler thing');

const generatedOutputPath = 'whatever/your/dest/dir/is';

app.get('/yourshouldknowthisurl.js', (req, res) => {
  let filenameIn = getFileNameForURL(req.url);
  let filenameOut = generateAnOutputFilename();
  let wpConf = {
    entry: filenameIn,
    output: {
      path: generatedOutputPath,
      filename: filenameOut
    },
    // and any other webpack config options. 
  };
  // I'm assuming your compile invokes webpack
  compiler.compile(wpConf, (err,result) => {
    if (err) return sendError(err, res);
    fs.readFile(path.resolve(generatedOutputPath,filenameOut), (err, data) => {
      if (err) return sendError(err, res);
      // Return the actual bundle. Don't return "a url" when the browser
      // requested a javascript file by url. It should get JS code back.
      res.send(data);
    });
  });
});

在此，getFileNameForURL将传入的URL转换为文件名。您的工作方式是您的事。 generateAnOutputFilename也是一样，如何实现“生成唯一文件名”由您决定。

我什至建议您根本不写文件，而是告诉webpack将输出生成到内存中，这样您就不必写信，然后再读回磁盘。 Webpack文档中涵盖了“如何做到”。

Answer 2

因此，不要理会任何webpack-dev-middleware，您将只使用webpack。

const webpack= require('webpack');

app.use((req, res) => {
    const jsTempPath = fetchSyncAndSaveSomewhere(req.url);
    const options = {
        entry: jsTempPath,
        output: {
            path: 'folderLocally',
            filename: 'bundle.js'
        }
    };
    const compiler = webpack(options);
    webpack(compiler, (err, stats) => {
      if (err || stats.hasErrors()) {
        // do something
      }
      res.send('folderLocally/bundle.js');
    });
});

您无法将Webpack代码输出到变量，因此必须将其本地保存在服务器上。

基本上，您可以这样做：

接收字符串
保存某处
使用该条目构建选项对象
运行编译器
返回文件。

给定一个指向JavaScript文件的URL，进行编译并在响应中返回结果

2 个答案: