如何使用 Nuxt 2 转换 node_modules 中的依赖项？答案

【问题标题】：How can I transpile a dependency in node_modules with Nuxt 2?如何使用 Nuxt 2 转换 node_modules 中的依赖项？
【发布时间】：2019-03-07 20:43:21
【问题描述】：

我已经阅读了使用 Nuxt 转换 node_modules 的问题，但据说新的 Nuxt 2 已经通过 nuxt.config.js 文件中的 transpile 选项解决了这个问题。

https://nuxtjs.org/api/configuration-build/#transpile

这是我所拥有的：

export default {
  router: {
    base: '/',
  },
  build: {
    transpile: [
      'choices.js',
      'lazysizes',
      'swiper',
      'vee-validate'
    ],
    extractCSS: true
  },
  srcDir: 'src/',
  performance: {
    gzip: true
  },
  render: {
    compressor: {
      threshold: 100
    }
  },
  dev: false
}

为了便于阅读，我删除了一些不相关的内容。

当我运行 npm run build (nuxt build) 时，编译的 JS 文件包含对 es6 和 es7 代码的引用，例如 const 和 let 等，而它应该是 var。

我已将此问题隔离为来自 Swiper。它似乎在内部依赖于似乎导致问题的称为 Dom7 的东西。

如果可能，我想将这些 node_modules 依赖项编译为 es5。我不确定我当前的设置实际上在这方面是否有任何作用。

我相信 Nuxt 将 vue-app 用于 Babel，但我什至尝试以下方法均未成功：

babel: {
  presets: [
    '@babel/preset-env'
  ],
  plugins: [
    '@babel/plugin-syntax-dynamic-import'
  ]
}

那里也没有太多欢乐。在最终构建中没有任何不同。

我正在使用 Nuxt 2.1.0

任何帮助表示赞赏。谢谢！

【问题讨论】：

您确定代码来自您尝试转译的模块吗？你可以在codesandbox或github上设置一个复制库吗？
我会尝试这样做，但不确定如何使用 Nuxt 进行 Codesandbox。我试试看。
Codesandbox 上周左右增加了 SSR 支持，现在有 Nuxt 模板

标签： javascript vue.js babeljs nuxt.js nuxt-edge

【解决方案1】：

你还需要转译 Dom7，所以 Nuxt 配置应该有：

build: {
    transpile: [
      'swiper',
      'dom7',
    ],
}

【讨论】：

您介意添加一个关于为什么的词吗？

【解决方案2】：

我也有同样的问题。

构建中的供应商选项已被弃用，因此我相信从我在此处阅读的内容https://medium.com/nuxt/nuxt-2-is-coming-oh-yeah-212c1a9e1a67#a688

我设法将我的案例隔离到“swiper”库中。如果我从我的项目中删除它，所有对let、const 或class 的引用都会消失。我也尝试过 transpile 选项，但它似乎没有任何效果。

您是否会尝试从您的项目中排除 swiper 以查看我们是否可以隔离问题？

【讨论】：

是的，我忘了说是 Swiper 导致了这个问题。它似乎在内部依赖于称为 Dom7 的东西。我到处都看到了对它的引用。我真的需要破解这个！太令人沮丧了。我刚刚更新了我的问题以提及这一点。感谢您的帮助。
是的，我知道。我现在正在尝试使用一个简单的 nuxt 应用程序进行复制，但由于某种原因，它似乎在那里工作。尽管如果我在原始项目中使用相同的设置，它就不起作用。您是否使用 express、koa 等服务器端框架配置了 nuxt？