Vue2古董项目不支持??、.?、mjs模块处理方式_vue2项目如何支持?.符号-优快云博客

1.低版本node开发环境不支持 ?? .?表达式处理

1.安装插件库

npm install --save-dev @babel/plugin-proposal-nullish-coalescing-operator @babel/plugin-proposal-optional-chaining

2.babel.config.js 中添加plugins配置

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', {
      targets: {
        browsers: ['> 1%', 'last 2 versions', 'not ie <= 8']
      },
      useBuiltIns: 'usage',
      corejs: 3
    }]
  ],
  plugins: [
    '@babel/plugin-proposal-nullish-coalescing-operator',
    '@babel/plugin-proposal-optional-chaining'
  ]
}

2.不支持mjs处理

表现:项目启动控制台报 error in ./node_modules/@xxx/xxxx/dist/xxxx.mjs ...
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. ...

处理方式：

1.在vue.config.js 中加入：

module.exports = {
  transpileDependencies: [
    'aaaa',
    'bbb',
    'auix',
    //...
  ],
  chainWebpack(config) {
    // 处理 .mjs 文件
    config.module
      .rule('mjs')
      .test(/\.mjs$/)
      .include
      .add(/node_modules/)
      .end()
      .type('javascript/auto')
      .use('babel-loader')
      .loader('babel-loader')
      .options({
        presets: ['@babel/preset-env'],
        plugins: [
          '@babel/plugin-proposal-nullish-coalescing-operator',
          '@babel/plugin-proposal-optional-chaining'
        ]
      });
    //其它配置...

    }
    //....
}