我无法在没有构建的情况下让我的React UI包自动编译javascript

Question

我有一个workspace和2个packages。一个package是UI组件（@ui/core），另一个package是Storybook（@ui/storybook）。

我是配置Webpack和Babel的新手，所以我可能犯了一个愚蠢的错误。

@ui/core包含一个基本的按钮组件，并且设置了Storybook，没有什么特别的地方。

工作区

package.json

{
  "name": "@ui/workspace",
  "private": true,
  "description": "A Collection of UI Components",
  "version": "1.0.0",
  "keywords": [
    "ui",
    "react"
  ],
  "scripts": {},
  "license": "UNLICENSED",
  "dependencies": {},
  "devDependencies": {
    "@babel/cli": "7.2.3",
    "@babel/core": "7.2.2",
    "@babel/node": "7.2.2",
    "babel-loader": "8.0.4",
    "classnames": "2.2.6",
    "cross-env": "5.2.0",
    "react": "16.7.0",
    "react-dom": "16.7.0",
    "react-jss": "8.6.1",
    "rimraf": "2.6.2",
    "webpack": "4.28.3"
  },
  "peerDependencies": {
    "react": "*",
    "react-dom": "*"
  },
  "workspaces": [
    "packages/*"
  ]
}

UI组件

package.json

{
  "name": "@ui/core",
  "version": "1.0.0",
  "description": "A Collection of UI Components",
  "internal": "true",
  "keywords": [
    "react",
    "ui"
  ],
  "main": "./src",
  "scripts": {
    "build": "yarn build:es2015 && yarn build:copy-files",
    "build:copy-files": "babel-node --config-file ../../babel.config.js ./scripts/copy-files.js",
    "build:es2015": "cross-env NODE_ENV=production babel --config-file ../../babel.config.js ./src --out-dir ./build --ignore *.test.js",
    "prebuild": "rimraf ./build",
    "release": "yarn build && npm publish build"
  },
  "peerDependencies": {
    "react": "16.7.0",
    "react-dom": "16.7.0"
  },
  "dependencies": {
    "@babel/plugin-transform-react-constant-elements": "7.2.0",
    "@babel/plugin-transform-react-inline-elements": "7.2.0",
    "@babel/plugin-transform-runtime": "7.2.0",
    "@babel/preset-env": "7.2.3",
    "@babel/preset-react": "7.0.0",
    "babel-plugin-transform-react-pure-class-to-function": "1.0.1",
    "babel-plugin-transform-react-remove-prop-types": "0.4.21",
    "babel-preset-react": "6.24.1",
    "normalize.css": "8.0.1",
    "prop-types": "15.6.2"
  },
  "engines": {
    "node": ">=8.0.0"
  },
  "license": "UNLICENSED",
  "devDependencies": {}
}

故事书

package.json

{
  "name": "@ui/storybook",
  "version": "1.0.0",
  "description": "Storybook Output of the UI Components",
  "keywords": [
    "react",
    "storybook",
  ],
  "scripts": {
    "build": "build-storybook -c ./config -o ./build",
    "prebuild": "rimraf ./build",
    "start": "start-storybook -p 9001 -c ./config"
  },
  "peerDependencies": {
    "react": "16.7.0",
    "react-dom": "16.7.0"
  },
  "dependencies": {},
  "engines": {
    "node": ">=8.0.0"
  },
  "license": "UNLICENSED",
  "devDependencies": {
    "@ui/core": "1.0.0",
    "@storybook/react": "4.1.4"
  }
}

启动故事书（yarn start）时，出现以下错误：

ERROR in ../ui/src/button/button.js 52:6
Module parse failed: Unexpected token (52:6)
You may need an appropriate loader to handle this file type.
|
|     return (
>       <ComponentProp

如果我构建@ui/core项目并将package.json main指向./build而不是./src，则不会存在此问题。

Node: v10.15.0
NPM: v6.4.1

---

此外，大规模对Storybook的荣誉。有史以来最好的工具！