javascript - 为什么不能使用 VueJS 在 vue.config.js 文件中使用 ES 导入？

Question

为什么不是 ES imports在 vue.config.js 工作文件？

例如:

import * as path from 'path';
import * as pjson from './package.json';

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.join(__dirname, '/src'), // Alias @ to /src folder for ES/TS imports
      },
    },
  },
  pwa: {
    name: pjson.title,
    assetsVersion: pjson.version,
  },
};

运行后出现错误 npm run lint命令(使用 vue-cli-service):

\vue.config.js:1
import * as path from 'path';

SyntaxError: Unexpected token *
    at Module._compile (internal/modules/cjs/loader.js:720:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:6

还有 import 'path';也不起作用(也尝试了其他语法变体):

import 'path';
       ^^^^^^

SyntaxError: Unexpected string

我试图从 const path = require('path'); 重构的原因语法是为了避免在 ESLint 插件升级后出现这个新的 linter 错误:

Require statement not part of import statement. eslint(@typescript-eslint/no-var-requires)

但似乎我仍然需要在文件顶部附加这个: /* eslint-disable @typescript-eslint/no-var-requires */

Answer 1

文件 vue.config.js 由 @vue/cli-shared-utils/lib/module.js 通过 CommonJS require 加载。因此，它也期望 vue.config.js 是 CommonJS。
您可以采用一些方案来克服这个内置限制，例如使用 vue.config.js

require('@babel/register'); 

然后需要另一个文件，例如基于 ESM 的代码所在的 vue.config.mjs。
但鉴于这只是一个配置文件，通常没有很多代码，最好不要与市政厅争吵，而是使用 CommonJS。