我的包在 CodeSandBox 上导入时会给出"ModuleNotFoundError"

Question

我今天发布了一个npm包，并想在CodeSandBox上试用它。如果我在本地机器中npm install package-name，但在CodeSandBox项目上导入相同的依赖项，则会出现以下错误：

软件包.json

{
"name": "package-name",
"version": "1.0.20",
"private": false,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.4.1",
"@testing-library/user-event": "^7.2.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.4.0"
},
"scripts": {
"start": "react-scripts start",
"build": "NODE_ENV=production babel src/lib --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,__snapshots__",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"keywords": [
"react"
],
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"main": "dist/index.js",
"module": "dist/index.js",
"files": [
"dist",
"README.md"
],
"repository": {
"type": "git",
},
"devDependencies": {
"@babel/cli": "^7.8.4",
"@babel/core": "^7.8.4",
"@babel/runtime": "^7.8.4"
}
}

我编译的文件顶部有这样的导入：

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";

我遵循了本教程。运行npm run build之后，在主目录中创建一个dist文件夹。然后我npm publish。我确实在本地机器上尝试了npm install package-name，它可以工作，但正如我所说，它在CodeSandBox上不工作。

Answer 1

尝试将您的devDependencies添加到dependencies。devDependencies在构建中没有导出，这就是为什么babel/runtime可能失败的原因。

"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.4.1",
"@testing-library/user-event": "^7.2.1",
"@babel/cli": "^7.8.4",
"@babel/core": "^7.8.4",
"@babel/runtime": "^7.8.4",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.4.0"
}

然后构建并尝试。

Answer 2

另一种不需要合并devDependencies和dependencies的方法是在容器环境中设置Codesandbox项目。请注意，您必须在创建之前设置此项--在编写本文时，不能在之后在容器和客户端环境之间切换。

此外，如果您要从Github将项目导入Codesandbox，它会隐式地将环境设置为Client。要解决此问题，请在项目根目录下创建一个沙盒.config.json文件，其中包含以下内容：

{
"template": "node"
}

导入前请确保此文件存在。事后创建它是行不通的。