我在 Chrome 开发者工具上遇到这个错误: “未捕获的引用:未定义要求”
webpack.config
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './src/app.js',
output: {
filename: 'app.js',
path: __dirname + "public/scripts"
},
module: {
loaders: [
{
test: /.jsx?$/,
loader: "babel-loader",
exclude: /node_modules/,
query: {
presets: ["env", "react"]
}
}
]
}
};
包.json
{
"name": "widget",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Diogo Matias",
"license": "ISC",
"dependencies": {
"babel-cli": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"npm": "^5.6.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-google-maps": "^9.4.3",
"react-leaflet": "^1.7.8"
},
"devDependencies": {
"webpack": "^3.10.0"
}
}
此错误来 self 的源 javascript 文件的导入:
import {GoogleMap, Marker} from "react-google-maps";
我将 cdn 用于 react 和 react-dom。我习惯使用 live-server 而我是 webpack 的新手。我在根目录上运行 webpack-dev-server。 希望这足以让你帮助我。
谢谢。
最佳答案
这是让您入门的最低配置。发出 npm run start
以在端口 9000 启动 webpack-dev-server。babel-core
在您的配置中丢失。
项目结构
├── build
│ └── index.html
├── package.json
├── src
│ └── app.js
└── webpack.config.js
package.json
{
"name": "widget",
"version": "1.0.0",
"description": "Get started with Webpack!",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server"
},
"author": "Diogo Matias",
"license": "ISC",
"dependencies": {
"leaflet": "^1.2.0",
"prop-types": "^15.5.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-google-maps": "^9.4.3",
"react-leaflet": "^1.7.8"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
}
}
webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './src/app.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'build')
},
devServer: {
contentBase: path.join(__dirname, 'build'),
compress: true,
port: 9000
},
module: {
loaders: [
{
test: /.jsx?$/,
loader: "babel-loader",
exclude: /node_modules/
}
]
}
};
.babelrc
{
"presets": [
["env", {
"targets": {
"browsers": ["last 3 Chrome versions"]
}
}]
]
}
build/index.html
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
关于javascript - Require 不是使用带有 babel 和 webpack 的 ReactJs 定义的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48026361/