上下文:我正在使用 TypeScript 和 Webpack 构建一个小型库(这里我们称之为 myLibrary)。我构建了它,将它导入到反应应用程序中,但反应应用程序崩溃了。
图书馆一侧
我的主要入口点 (index.ts) 有一个默认导出:
import wrapper from "./wrapper";
export default wrapper;
Run Code Online (Sandbox Code Playgroud)
我的包装文件公开了一个默认导出,它是一个函数 (wrapper.ts):
const create = () => {
// Some functions
return {
init,
close,
getBase,
setBase
}
}
export default create;
Run Code Online (Sandbox Code Playgroud)
该库轻松通过所有单元测试。
反应应用端
在 React 应用程序中构建和导入我的库后,我没有 Typescript 错误,但我的 React 应用程序崩溃并显示以下消息:
TypeError: myLibrary__WEBPACK_IMPORTED_MODULE_13___default(...) is not a function
Run Code Online (Sandbox Code Playgroud)
在这样调用我的库之后:
import createAPI from "myLibrary";
const api = createAPI(); // Crash here even though I should have a nice object containing my functions
Run Code Online (Sandbox Code Playgroud)
这真的很奇怪,因为 TS 真的很好地编译为 …
通过新的outputStandalone
实验性功能(https://nextjs.org/docs/advanced-features/output-file-tracing#automatically-copying-traced-files-experimental),我们可以在构建后拥有一个独立的文件夹,其中包含必要的依赖项,我们只需将其复制到我们的docker中,不需要在docker内重建。它会自动检测源代码中必要的依赖项,除非该依赖项仅在我们的 package.json 中使用。
我们cross-env
用来启动 Next 应用程序,当然这个库永远不会导入到我们的源代码中,但它需要存在于独立文件夹的 node_modules 中。
那么我怎样才能强制@vercel/nft
包含特定的依赖项呢?