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

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

我学习了这教程。运行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。解决这个问题，在项目根目录下创建一个具有以下内容的sandbox.config.json文件：

{
  "template": "node"
}

请确保此文件在导入之前存在。在事实之后创建它将不起作用。