Блог

Как вы можете заставить службу vue cli компилировать код, пропуская webpack? Мне это просто нужно, чтобы использовать babel.

В основном я пытаюсь избежать подобного кода:

 /******/(function (modules) {
  // webpackBootstrap
  /******/ // The module cache
  /******/var installedModules = {};
  /******/
  /******/ // The require function
  /******/function __webpack_require__(moduleId) {
    /******/
    /******/ // Check if module is in cache
    /******/if (installedModules[moduleId]) {
      /******/return installedModules[moduleId].exports;
      /******/
    }
    /******/ // Create a new module (and put it into the cache)
    /******/var module = installedModules[moduleId] = {
      /******/i: moduleId,
      /******/l: false,
      /******/exports: {}
      /******/ };
    /******/
    /******/ // Execute the module function
    /******/modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
    /******/
    /******/ // Flag the module as loaded
    /******/module.l = true;
    /******/
    /******/ // Return the exports of the module
    /******/return module.exports;
  

Очевидно, что это всего лишь часть, но я думаю, вы поняли идею. Итак, возможна ли чистая сборка? Тип вывода, который я ищу, это:

 Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = main;
function main(_ref) {
  var x = _ref.x,
      y = _ref.y,
      contextPath = _ref.contextPath,
      configuration = _ref.configuration;

  var node = document.getElementById(y);

  node.innerHTML = "test";
}  
  

Где находится исходный файл:

 export default function main({x, contextPath, y, configuration}) {
    
    const node = document.getElementById(y);

    node.innerHTML ="test";
    
}
  

Переносится с помощью следующей команды:

 babel --source-maps -d build src
  

Тем не менее, я пытаюсь заставить то же самое работать с vue-cli-service, но это разрушает мой код со всеми пространствами имен и зависимостями, которые требуются:

 vue-cli-service build --dest build src/index.js
  

Это мой vue.config.js:

 module.exports = {
    productionSourceMap: false,
    filenameHashing: false,
    chainWebpack: config => config.optimization.minimize(false),
    configureWebpack: {
        output: {
            filename: "./index.js"
        }
    },
    css: {
      extract: {
        filename: "./index.css"
      }
    }
  }
  

Вы можете извлечь загрузочный код веб-пакета в другой файл, установив параметр optimization.runtimeChunk optimization.runtimeChunk

 ...
optimization: {
  runtimeChunk: true
}
...
  

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