javascript - 使用 create-react-app 项目作为 npm 包

Question

我是 reactjs 的新手。

我开发了一个项目，我想在我的新项目中使用我的公共项目作为 npm 包。

现在，

我可以从 git repo 安装包，但是当我在任何组件中导入 css 文件时，它可以，它可以工作，但是当我想从我的公共项目中导入和使用组件时，它不会从 react-script 我猜...

我必须使用 webpack 吗？（因为我不想使用它）如果没有 webpack，我该如何解决我的错误？如果 webpack 是必须的，我能提供什么？

My New Project package.json:
{
  "name": "react-sample",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "node-sass": "^4.12.0",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "3.1.1",
    "acshb-react-common": "git+https://<my-username>:<my-token>@github.com/<my-username>/<my-repo>.git#master"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "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"
    ]
  }
}

My Common Project package.json:
{
  "name": "<my-common-project-nam>",
  "version": "1.0.0",
  "private": false,
  "author": "<my-name>",
  "repository": {
    "type": "git",
    "url": "<common-project-repo-url>"
  },
  "dependencies": {
    "animate.css": "^3.7.2",
    "axios": "^0.19.0",
    "bootstrap": "^4.3.1",
    "echarts": "^4.2.1",
    "echarts-for-react": "^2.0.15-beta.0",
    "moment": "^2.24.0",
    "node-sass": "^4.12.0",
    "react": "^16.8.6",
    "react-bootstrap-table-next": "^3.1.8",
    "react-bootstrap-table2-overlay": "^2.0.0",
    "react-bootstrap-table2-paginator": "^2.0.8",
    "react-bootstrap-table2-toolkit": "^2.0.1",
    "react-cookie": "^4.0.1",
    "react-dom": "^16.8.6",
    "react-helmet": "^5.2.1",
    "react-number-format": "^4.2.0",
    "react-redux": "^7.1.0",
    "react-router": "^5.0.1",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.1",
    "react-toastify": "^5.3.2",
    "react-toggle-button": "^2.2.0",
    "react-tooltip": "^3.10.0",
    "react-widgets": "^4.4.11",
    "react-widgets-moment": "^4.0.27",
    "redux": "^4.0.4",
    "redux-form": "^8.2.6",
    "redux-thunk": "^2.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "publish:npmWin": "SET NODE_ENV=production && rm -rf dist && mkdir dist && npx babel src/ --out-dir dist --copy-files",
    "publish:npmLnx": "SET NODE_ENV=production && rm -rf dist && mkdir dist && npx babel src/ --out-dir dist --copy-files",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 9009 -s public",
    "build-storybook": "build-storybook -s public"
  },
  "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",
  "babel": {
    "presets": [
      "react",
      "env",
      "stage-2"
    ]
  },
  "devDependencies": {
    "@babel/cli": "^7.5.5",
    "@storybook/addon-actions": "^5.1.11",
    "@storybook/addon-knobs": "^5.1.11",
    "@storybook/addon-links": "^5.1.11",
    "@storybook/addons": "^5.1.11",
    "@storybook/react": "^5.1.11",
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "eslint": "^5.16.0",
    "eslint-config-airbnb": "^17.1.1",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.14.3",
    "redux-devtools-extension": "^2.13.8"
  }
}

错误信息是：

./node_modules/acshb-react-common/src/components/button.js SyntaxError: C:\workspace\react-sample\node_modules\acshb-react-common\src\components\button.js: 意外令牌 (12:6 ) if (props.loading) { return (

标签： javascriptreactjs