Получив URL к файлу JavaScript, скомпилируйте и верните результат в ответ - PullRequest
Новая
       8

Получив URL к файлу JavaScript, скомпилируйте и верните результат в ответ

0 голосов
/ 26 сентября 2018

В соответствии с заголовком, учитывая URL-адрес файла JavaScript, возможно ли заставить веб-пакет скомпилировать и вернуть результат во время выполнения?

Обновление: я могу получить файл, нокак только у меня есть файл, я не уверен, как передать его в компилятор (шаг 3 в сценарии выше).

Сценарий

  1. HTTP-запрос получен сервером (например, экспресс), содержащим URL-адрес запроса к файлу JavaScript.

  2. Предположим, я могу получить файл JavaScript или его путь к файлу.

  3. Загрузка файла JavaScript в компилятор веб-пакета.

  4. Компилятор веб-пакета обрабатывает файл JavaScript и выводит результат.

  5. Результат возвращается в HTTP-ответе, содержащем URL-адрес для вывода (файл javascript, обработанный веб-пакетом).

Я искал решения, использующие 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) });
});

Ответы [ 2 ]

0 голосов
/ 26 сентября 2018

Итак, забудьте о любом webpack-dev-middleware, вы будете использовать только веб-пакет. 

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');
    });
});

Вы не можете выводить код веб-пакета в переменную, поэтому вам придется сохранять локально на вашем сервере.

В основном вы делаете:

  1. Получите строку
  2. Сохраните где-нибудь
  3. Создайте объект параметров с этой записью
  4. Запустите компилятор
  5. возврат файла.
0 голосов
/ 26 сентября 2018

Это кажется простым, но без показа фактического кода, это лучшее, что я могу вам дать: 

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, как вы реализуете «генерацию уникального имени файла», зависит только от вас.

Я бы, вероятно, даже рекомендовал бы вообще не писать файл и вместо этого сообщать о веб-пакетедля генерации вывода в память, поэтому вам не нужно записывать, а затем читать с диска.«Как это сделать» описано в документации веб-пакета.

...