[我还有另外两个应用程序可以在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'));
我做错了什么？我觉得这很简单。请让我知道是否可以添加更多可能有所帮助的详细信息。预先感谢！
我还有另外两个应用程序可以在Rollup＆React上正常工作，但是这次即使如此-一个非常简单的示例也无法正常工作。不确定我缺少什么，但是此设置...