Я не могу заставить мой пакет React UI автоматически скомпилировать JavaScript без сборки - PullRequest
Новая
       26

Я не могу заставить мой пакет React UI автоматически скомпилировать JavaScript без сборки

0 голосов
/ 03 января 2019

У меня есть workspace с 2 packages.Один package - это компоненты пользовательского интерфейса (@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/*"
  ]
}

Компоненты пользовательского интерфейса

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

Когда я запускаю Storybook (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.Лучший инструмент в мире!

...