带有 Babel 7 的 NuxtJS：在构建文件中仍然有扩展运算符

Question

我拼命地试图让我的 NuxtJS 应用程序与 IE11 一起工作。我以多种方式实现了 babel config 来构建兼容版本，但我仍然在构建的页面文件中使用了传播操作符，就好像 Babel 没有转换 Nuxt 代码一样。

这是我的配置：

nuxt.config.js

const pkg = require('./package')
const path = require('path');

module.exports = {
  mode: 'universal',

  // ...

  build: {
    babel: {
      babelrc: true
    },
    extend(config, ctx) {
      config.resolve.modules.push(path.resolve(__dirname, 'assets'));

      const svgRule = config.module.rules.find(rule => rule.test.test('.svg'));

      svgRule.test = /\.(png|jpe?g|gif|webp)$/;

      config.module.rules.push({
        test: /\.svg$/,
        loader: 'vue-svg-loader',
      }, {
        test: /\.js$/,
        loader: 'babel-loader'
      })
    }
  }
}

.babelrc

{
  "presets": [["@babel/preset-env", { "modules": false }]],
  "plugins": [
    "@babel/transform-runtime",
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-transform-spread",
    "@babel/plugin-proposal-object-rest-spread"
  ],
  "env": {
    "test": {
      "presets": [["@babel/preset-env", { "targets": { "node": "current" } }]]
    }
  }
}

.browserslistrc

# Browsers that we support

>0.2%
not dead
not ie < 11
not op_mini all

尽管有这样的配置，我仍然看到在 Nuxt 构建的页面中使用了一些扩展运算符，例如由 nuxt 生成的以下内容：

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["pages/events/_slug.pages/index"],{

/***/ "./assets/svg/events/market.svg":
/*!**************************************!*\
  !*** ./assets/svg/events/market.svg ***!
  \**************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);

      /* harmony default export */ __webpack_exports__["default"] = ({
        functional: true,
        render(_h, _vm) {
          const { _c, _v, data, children = [] } = _vm;

          const {
            class: classNames,
            staticClass,
            style,
            staticStyle,
            attrs = {},
            ...rest
          } = data;

我在一段时间内搜索了有关 NuxtJS 和 Babel 的不同问题，但 Nuxt 声称它可以在没有额外 Babel 配置的情况下与 IE9 一起使用，而这里的情况并非如此。我想了解为什么代码没有以正确的方式转换。

Answer 1

我遇到了类似的问题：由于@nuxtjs/axios和bootstrap-vue 中的扩展运算符，Nuxt 应用程序无法在 Edge 浏览器中运行。我确实找到了解决方案。

nuxt.config.js 中的build属性定义如下：

build: {
    babel: {
      babelrc: true,
      configFile: './babel.config.js'
    },
    transpile: [ '@nuxtjs/axios', 'bootstrap-vue' ],
    // Other config
}

该transpile属性在这里是关键。在内部，Nuxt为babel-loader定义了一个exclude，它忽略node_modules 中的所有内容，除非它在transpile 中。

使用babel.config.js似乎也很重要，Babel 官方文档说如果你想处理node_modules就应该使用它。

babel.config.js :

module.exports = function (api) {
    api.cache(true);
    return {
        sourceType: 'unambiguous',
        presets: ['@nuxt/babel-preset-app'],
        plugins: ['@babel/plugin-proposal-object-rest-spread']
    };
}

如上所述，您不需要在此处包含或排除，因为它已由 Nuxt 处理。