Vite：不能在模块外使用 import 语句

Question

我对bundler知之甚少，我正在使用vite来构建项目，当导入一些包来配置开发服务器时出现错误：

SyntaxError: Cannot use import statement outside a module

所以事情是这样的：

import pinyin from 'pinyin/esm/pinyin-web.js'

export const somePlugin = {
  name: 'someplugin',
  configureServer(server) {
    server.middlewares.use('/somepath', (req, res, next) => {
      const foo = pinyin('foo')
      next()
    })
  },
}

我不使用常规方式(

import pinyin from 'pinyin'

)，因为需要一个包

nodejieba

，需要安装不必要的

node-gyp

，所以我选择不需要

web version

的

nodejieba

。

我搜索了错误，有人说将

"type": "module"

添加到

package.json

文件。但它已经存在于我的 package.json 中。

但是，我做出了改变：

// import pinyin from 'pinyin/esm/pinyin-web.js'
import pinyin from 'pinyin/lib/pinyin-web.js'

问题得到解决，我很困惑，因为我认为 vite 更喜欢 ES 模块。

所以， 1> 是什么原因导致上述问题？

2> 为什么我应该导入带有扩展名的文件？例如：

import pinyin from 'pinyin/lib/pinyin-web.js'

我必须添加扩展

.js

否则会导致错误。而在

vite.config.ts

中我不需要添加扩展。

3> 我尝试像这样在

optimizeDeps

中添加字段

vite.config.ts

export default defineConfig({
  plugins: [vue(), somePlugin],
  optimizeDeps: {
    include: ['pinyin'],
  },
})

但是好像没什么用，官方医生说：

“在开发过程中，Vite 的开发人员将所有代码作为原生 ESM 提供。因此，Vite 必须首先将作为 CommonJS 或 UMD 提供的依赖项转换为 ESM。”

这对前端部分有用吗？包“pinyin”适用于开发服务器，所以是否添加 场

optimizeDeps

没有区别。

代码沙箱

Answer 1

我有一个类似的问题，我可以通过添加来解决

ssr: {
  noExternal: ['packageName'],
}

到我的 vite.config.js 文件。