如何在 Vue 3.0 中通过 Webpack 使用 Bundler Build Feature Flags？

Posted 2023-02-22

【中文标题】如何在 Vue 3.0 中通过 Webpack 使用 Bundler Build Feature Flags？

【英文标题】：How use Bundler Build Feature Flags in Vue 3.0 with Webpack?

【发布时间】：2021-01-12 18:54:00

【问题描述】：

Vue 3.0（现已稳定）有一个未记录的功能 Bundler Build Feature Flags：

从 3.0.0-rc.3 开始，esm-bundler 构建现在公开全局 可以在编译时覆盖的功能标志：

VUE_OPTIONS_API（启用/禁用选项 API 支持，默认：true）

VUE_PROD_DEVTOOLS（在生产环境中启用/禁用 devtools 支持，默认值：false）

构建将在不配置这些标志的情况下工作， 但是强烈建议按顺序正确配置它们 在最终捆绑包中进行适当的摇树。要配置这些 标志：

webpack：使用 DefinePlugin

汇总：使用@rollup/plugin-replace

Vite：默认配置，但可以使用define选项覆盖

注意：替换值必须是布尔字面量，不能是 字符串，否则捆绑器/压缩器将无法正确 评估条件。

如何使用 vue.config.js 和 Webpack 实际配置此构建标志？

尝试过这种方式，但它似乎不会影响供应商捆绑包的大小，或者它是否应该仅适用于生产版本（目前无法尝试，因为有一个 vue-loader 错误破坏了我的产品版本）？

const webpack = require('webpack');

module.exports = 
  configureWebpack: 
    plugins: [
      // Define Bundler Build Feature Flags
      new webpack.DefinePlugin(
        // Drop Options API from bundle
        __VUE_OPTIONS_API__: false,
      ),
    ,
  ,
;

【参考方案1】：

你写的几乎是正确的。只需删除 configureWebpack 键并像任何其他插件一样定义它。

const webpack = require('webpack');

module.exports = 
  plugins: [
    // Define Bundler Build Feature Flags
    new webpack.DefinePlugin(
      // Drop Options API from bundle
      __VUE_OPTIONS_API__: false,
    ),
  ],
;

【讨论】：

OP提供vue.config.js，使用configureWebpack。

正如@tony19 提到的，vue.config.js includes configureWebpack 但不是plugins。

configureWebpack 不是 vue-cli 的东西吗？那么直接提供plugins 将是非cli 配置文件的方法吗？ cli.vuejs.org/guide/webpack.html如果我错了请纠正我

@redfox05 是的，在 Vue CLI 脚手架项目之外，您将使用 Webpack 配置文件（例如，webpack.config.js），但 OP 表明他们正在使用 vue.config.js，它有它自己的 API 来配置底层的 Webpack 构建。 configureWebpack 选项直接传递给webpack，因此plugins: [/*...*/] 将位于该键下。 OP 似乎正确使用了该选项。

@tony19 是的，谢谢，我也是这个意思。我不太清楚，但我基本上是说这些 cmets 的答案是错误的，因为它与非 webpack 有关，而不是 OP 需要的。

【参考方案2】：

您可以在此文件中获取信息：node_modules/@vue/cli-service/lib/config/base.js

  // feature flags <http://link.vuejs.org/feature-flags>
  webpackConfig
    .plugin('feature-flags')
      .use(require('webpack').DefinePlugin, [
        __VUE_OPTIONS_API__: 'true',
        __VUE_PROD_DEVTOOLS__: 'false'
      ])

所以像这样配置vue.config.js：

module.exports = 
 chainWebpack: config =>
   config.plugin('feature-flags').tap(args => 
     args[0].__VUE_OPTIONS_API__ = JSON.stringify(false)
     return args
   )

或者：

chainWebpack: config =>
  config
    .plugin('feature-flags')
    .use(require('webpack').DefinePlugin, [
      __VUE_OPTIONS_API__: 'true',
      __VUE_PROD_DEVTOOLS__: 'false'
    ])