在前端开发中，我们经常需要使用多个 npm 包来辅助开发。如果我们使用的是 Next.js，可以通过一个 npm 包 next-transpile-modules 来解决 npm 包在 Next.js 中的引入问题。
什么是 next-transpile-modules
next-transpile-modules 是一个用于在 Next.js 项目中编译需要转译的 npm 包的 npm 包。它允许你将那些不兼容浏览器的 npm 包编译成兼容浏览器的代码，以使得在 Next.js 项目中引入它们变得更容易。
如何使用 next-transpile-modules
在使用 next-transpile-modules 之前，我们需要先安装这个 npm 包：
npm install next-transpile-modules -D
安装完成后，我们需要在项目的 next.config.js 中配置需要使用 next-transpile-modules 编译的 npm 包：
const withTM = require('next-transpile-modules')(['my-untranspiled-module', 'other-untranspiled-module'])
module.exports = withTM({
/* config options here */
})在上述代码中，我们需要先引入 next-transpile-modules，并传入需要编译的 npm 包的名称，以数组的形式包含在括号中。
配置好上述代码后，我们就可以在项目中使用这些需要编译的 npm 包了，不需要担心它们不和 Next.js 兼容的问题。
示例代码
以下是一个示例，演示如何使用 next-transpile-modules 来编译需要转译的 npm 包：
-- -------------------- ---- -------
-- -------------
------ ----- ---- --------
------ ----------------------- ---- -------------------------
----- ---- - -- -- -
------ -
-----
--------- -----------
------------------------ --
------
--
--
------ ------- -----在上述代码中，我们引入了一个名为 MyUntranspiledComponent 的 npm 包，该包是需要通过 next-transpile-modules 进行编译的。
在配置好 next-transpile-modules 之后，我们就可以在项目中正常使用 MyUntranspiledComponent 包了，不需要担心它的兼容性问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/next-transpile-modules