javascript - NuxtJS 与 Babel 7 : still have spread operator in built files

Question

我拼命想让我的 NuxtJS 应用程序与 IE11 一起工作。我以多种方式实现了 babel 配置以构建兼容版本，但我在构建的页面文件中仍然有传播运算符，就好像 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 声称它可以与 IE9 一起工作而无需额外的 Babel 配置，但这里不是这种情况。我想了解为什么代码没有以正确的方式转译。

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']
    };
}

您不需要在此处include 或 exclude，因为它已由 Nuxt 处理，如前所述。