javascript - 如何使用 Nuxt 2 转译 node_modules 中的依赖项？

Question

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

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 为 Babel 使用 vue-app，但我什至尝试了以下但没有成功:

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

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

我正在使用 Nuxt 2.1.0

感谢任何帮助。谢谢!

Answer 1

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

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