Блог

Я создал проект Vue 3 и использовал webpack для объединения пакета. Поскольку у меня есть встроенные шаблоны, я не могу использовать @runtime-dom по умолчанию. Итак, я присвоил псевдоним Vue, чтобы указать на vue.esm-bundler.js .

Проблема, с которой я сталкиваюсь, заключается в том, что, когда я беру сборку продукта, мой пакет поставщиков раздут с помощью @babel / parser / lib.

Пример проекта для воспроизведения этой проблемы доступен здесь

Шаги, которые необходимо выполнить:

1. установка npm
2. пакет запуска npm

Откройте папку dist и просмотрите отчет анализатора пакетов Webpack.

Для простоты настройки вставьте приведенные ниже конфигурации.

webpack.config.js

 const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin;
const { VueLoaderPlugin } = require("vue-loader");
const TerserPlugin = require("terser-webpack-plugin");

module.exports = (env, options) => {
  const devMode = options.mode != "production";
  return {
    context: path.resolve(__dirname, "src"),
    entry: {
      "vue-bundle": "./entry/main.js",
    },
    output: {
      path: path.resolve(__dirname, "dist"),
      filename: "[name].js",
      chunkFilename: "[name].js",
    },
    module: {
      rules: [
        {
          test: /.js$/,
          exclude: [/node_modules/],
          use: {
            loader: "babel-loader",
            options: {
              presets: [
                [
                  "@babel/preset-env",
                  {
                    targets: [">25%"],
                    debug: true,
                    corejs: "3.6.5",
                    useBuiltIns: false,
                  },
                ],
              ],
            },
          },
        },
        {
          test: /.vue$/,
          use: "vue-loader",
        },
      ],
    },
    plugins: [
      new CleanWebpackPlugin(),
      new VueLoaderPlugin(),
      new BundleAnalyzerPlugin({        
        openAnalyzer: false,
        analyzerMode: "static",
        reportFilename: "webpack_bundle_analyser_report.html",
        defaultSizes: "gzip",
      }),
    ],
    optimization: {
      mangleWasmImports: true,
      removeAvailableModules: true,
      sideEffects: true,
      minimize: devMode ? false : true,
      minimizer: [
        new TerserPlugin({
          test: /.js(?.*)?$/i,
          exclude: //node-modules/,
          parallel: 4,
          extractComments: false,
        }),
      ],
      splitChunks: {
        cacheGroups: {
          vendor: {
            test: /[\/]node_modules[\/]/,
            name: "vendor-bundle",
            chunks: "all",
          },
        },
      },
    },
    devtool: devMode ? "eval-cheap-source-map" : false,
    resolve: {
      extensions: [".ts", ".js", ".vue", ".json"],
      alias: {
        vue: "vue/dist/vue.esm-bundler.js"
      },
    },
  };
};

  

package.json

 {
  "name": "testPro",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "bundle": "webpack --mode=production --config webpack.config.js",
    "bundle-dev": "webpack --mode=development --config webpack.config.js"
  },
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-typescript": "^7.12.1",
    "@vue/compiler-sfc": "^3.0.2",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "core-js": "^3.6.5",
    "regenerator-runtime": "^0.13.7",
    "terser-webpack-plugin": "^5.0.3",
    "vue-loader": "^16.0.0-beta.4",
    "webpack": "^5.3.0",
    "webpack-bundle-analyzer": "^3.9.0",
    "webpack-cli": "^4.1.0"
  },
  "dependencies": {
    "vue": "^3.0.2"
  }
}

  

Входной файл main.js

 import { createApp } from 'vue';
import App from '../App.vue';

createApp(App).mount('#app');

  

Не удалось получить то, чего мне не хватает.

Я твердо верю, что это ошибка в Vue 3, поэтому я отправил отчет об ошибке — вы можете отследить его здесь

… Я воспроизвел его сам, используя Vue CLI, чтобы исключить вероятность того, что проблема в вашей конфигурации Webpack

У вас есть 2 варианта решения этой проблемы:

1. Если вам не нужно выпускать прямо сейчас, просто работайте над своим проектом и ждите исправления (я почти уверен, что это будет исправлено — сборки Vue для браузера, от которых не зависит компилятор @babel/parser , поэтому ясно, что Vue не нужен для корректной работы в браузере)
2. Не используйте встроенные шаблоны и template опции (строковые шаблоны) — поместите все в .vue файлы, <template></template> блоки — Среда выполнения компилятор против Только для времени выполнения. Тогда вам не нужна сборка с компилятором…

РЕДАКТИРОВАТЬ: удалена часть о том, что отсутствует process.env.NODE_ENV , поскольку --mode параметр в командной строке Webpack делает именно это…