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

【问题标题】：NuxtJS with Babel 7: still have spread operator in built files带有 Babel 7 的 NuxtJS：在构建文件中仍然有扩展运算符
【发布时间】：2019-07-31 10:29:00
【问题描述】：

我正在拼命尝试让我的 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 一起使用，而这里的情况并非如此。我想了解为什么代码没有以正确的方式转译。

【问题讨论】：

nuxt 默认转译为 ie9。您不需要更改预设。获得该代码的唯一方法是它来自节点模块的 3rd 方库。然后你需要将它添加到你的 nuxt 配置中的 transpile 属性
你是对的，有了这个线索，我发现在我的案例中，罪魁祸首是 vue-svg-loader，它使用扩展运算符将我的 SVG 资产转换为 ES6 组件。非常感谢您的帮助 :) ！
github.com/Developmint/nuxt-svg-loader

标签： javascript internet-explorer vue.js babeljs nuxt.js

【解决方案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 负责，如前所述。

【讨论】：