【发布时间】：2019-01-14 04:17:39
【问题描述】：
我在尝试使用 React 导入组件时遇到问题。
app.js:1 Uncaught ReferenceError: require is not defined 在:5:12 在我 (babel.min.js:24) 在 r (babel.min.js:24) 在 e.src.n.(:3000/匿名函数).l.content (https://unpkg.com/babel-standalone@6.26.0/babel.min.js:24:30503) 在 XMLHttpRequest.n.onreadystatechange (babel.min.js:24)
经过一番研究我发现错误是因为浏览器不理解import所以我尝试安装webpack，它没有工作，所以我做了一些其他研究，最后我不得不禁用windows防火墙，然后我能够运行 npm 安装，我得到了这个：
- webpack@4.28.4 添加了来自 127 个贡献者的 157 个包，并在 18.717 秒内审核了 36574 个包，发现运行了 31 个高危漏洞
npm audit fix修复它们，或npm audit了解详情
但我的项目中没有出现任何内容。
下面是我的所有项目：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="x-ua-compatible" content="ie=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="app"></div>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="./src/components/app.js" type="text/babel"></script>
</body>
</html>
/src/components/com.js
class Com extends React.Component {
render() {
return <div>
<h1>Hey this is my com component</h1>
</div>
}
}
export default Com
/src/components/app.js
import Com from './com.js'
class App extends React.Component {
render() {
return <div>
<h1>Hey this is my app component</h1>
<p>{Math.random() * 10}</p>
<Com />
</div>
}
}
ReactDOM.render(<App />, document.getElementById('app'))
希望有人能帮我弄清楚。
（我想在我的问题开始时打个招呼，但我不知道为什么我不能编辑它，所以在这里你好。）
编辑
我终于可以使用 webpack 了。
webpack.config.js
const webpack = require("webpack")
const path = require("path")
let config = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "./public"),
filename: "./bundle.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
options: {
presets: [
'@babel/preset-env',
'@babel/preset-react'
]
}
}
]
}
}
module.exports = config
我不知道是否正确，但我确实有 Babel 工作，我可以正确导入组件。
【问题讨论】：
-
可以给你webpack配置吗？
-
或者，如果你不想为此挣扎，我建议 create-react-app
-
我没有任何 webpack，因为我没有让它工作，而且我之前使用过 creat-react-app 但 cdn 在我的情况下效率更高，所以我想使用他们。
-
但是但是但是但是....不管你是什么意思更高效。它是一个开发环境，您的“导出”生产代码会将自身编译成一个脚本文件，您将托管在您的服务器上，没有 CDN，没有依赖项，什么都没有。用于生产的单个静态脚本文件。
-
cdn 加载速度比我服务器上的文件快，而且我只需要服务几个 ko，而不是 400ko，所以是的，在我的情况下它更有效。
标签： javascript reactjs