Как настроить накопительный пакет для приложения React? - PullRequest
Новая
       20

Как настроить накопительный пакет для приложения React?

0 голосов
/ 10 октября 2019

У меня есть два других приложения, которые прекрасно работают с Rollup & React, но на этот раз даже это - очень простой пример не работает.

Не уверен, что мне не хватает, но этот наборброски вверх Uncaught Reference: React is not defined

rollup.config.js: 

import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
import serve from 'rollup-plugin-serve';
import livereload from 'rollup-plugin-livereload';

export default {
  input: './index.js',
  output: {
    file: './build/index.js',
    format: 'iife',
    globals: {
      react: 'React',
      'react-dom': 'ReactDOM',
    },
  },
  plugins: [
    resolve(),
    babel(),
    commonjs(),
    serve({
      contentBase: '',
      host: 'localhost',
      port: '8000',
    }),
    livereload(),
  ],
  external: [
    'react',
    'react-dom',
  ],
};

.babelrc: 

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

package.json: 

{
  "name": "xxx",
  "private": true,
  "description": "xxx",
  "version": "0.0.1",
  "license": "MIT",
  "scripts": {
    "build": "rollup -c",
    "test": "echo No tests specified"
  },
  "repository": {
    "type": "git",
    "url": "xxx"
  },
  "devDependencies": {
    "@babel/core": "^7.6.3",
    "@babel/preset-env": "^7.6.3",
    "@babel/preset-react": "^7.6.3",
    "prettier": "^1.18.2",
    "prop-types": "^15.7.2",
    "rollup": "^1.23.1",
    "rollup-plugin-babel": "^4.3.3",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-livereload": "^1.0.4",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-peer-deps-external": "^2.2.0",
    "rollup-plugin-postcss": "^2.0.3",
    "rollup-plugin-serve": "^1.0.1",
    "rollup-plugin-svg": "^2.0.0",
    "rollup-plugin-terser": "^5.1.2"
  },
  "dependencies": {
    "xxx": "^0.1.0",
    "xxx": "^0.1.1",
    "classnames": "^2.2.6",
    "react": "^16.10.2",
    "react-dom": "^16.10.2",
    "react-easy-state": "^6.1.3",
    "semantic-ui-react": "^0.88.1"
  }
}

index.html: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>blah</title>
  </head>

  <body>
    <div id="test-app"></div>
    <script type="application/javascript" src="./build/index.js"></script>
  </body>
</html>

index.js: 

import React from 'react';
import ReactDOM from 'react-dom';

const Thing = () => {
  return <div>Hi</div>;
};

ReactDOM.render(<Thing />, document.getElementById('test-app'));

Что я делаю не так? Я чувствую, что это что-то очень просто. Пожалуйста, дайте мне знать, если бы я мог добавить больше деталей, которые могут помочь. Заранее спасибо!

...