Question

我今天发布了一个npm软件包，并想在CodeSandBox上尝试它。如果我在本地计算机上npm install package-name，但是在CodeSandBox项目上导入相同的依赖项，则会出现此错误，则可以使用此方法：

package.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";

我遵循了this教程。运行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

另一种无需合并 data.map(m => { return {"name": m.name} }) 和 devDependencies 的方法是在 Container Environment 中设置您的 Codesandbox 项目。请注意，您必须在创建之前进行设置 - 在撰写本文时，您不能在容器和客户端环境之间切换事后。

此外，如果您要从 Github 将项目导入 Codesandbox，它会隐式地将环境设置为客户端。 To workaround this，在项目的根目录下创建一个 sandbox.config.json 文件，内容如下：

dependencies

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

我的包在CodeSandBox上导入时给出“ ModuleNotFoundError”

2 个答案: