如何使用Nuxt2转换node_module中的依赖项?

2022-02-25 00:00:00 javascript vue.js nuxt.js babeljs nuxt-edge

我读到有关使用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代码的引用,例如constlet等,而它应该是var

我已将此问题隔离为来自Swiper。它似乎在内部依赖于一种名为Dom7的东西,它似乎是导致问题的原因。

如果可能,我希望将这些node_modules依赖项编译到ES5。我不确定我当前的设置是否确实在这方面做了什么。

我相信Nuxt使用vue-app代表巴别塔,但我甚至尝试了以下方法都没有成功:

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

那里也没有太多欢乐。最终生成中的外观没有任何不同。

我正在使用Nuxt2.1.0

感谢您的任何帮助。谢谢!


解决方案

您还需要传输dom7,因此Nuxt配置应该具有:

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

相关文章