Javascript 网页包+;反应:从我的node_modules文件夹中生成的网页包在一个地方的顺序正确,在其他地方的顺序不正确
我对网页包装和反应非常陌生。我只是想让一个简单的Webpack/Babel/React模板正常运行,这样我就可以抓起它开始使用这个应用程序,而不用担心每次都要设置它。不过,我遇到了一个奇怪的问题 我用React制作了一个Hello World,使用了Webpack、Node和Babel。问题是,它只在我创建它的特定目录中起作用。如果我复制/粘贴所有内容并尝试在其他任何地方运行我的NPM脚本,我会在JSX文件中得到一个“未知模板”错误。经过一些调查,我很确定问题在于,出于某种原因,当我运行原始目录之外的所有内容时,Webpack以不同的顺序构建内容 这是我从Webpack获得的有效输出:Javascript 网页包+;反应:从我的node_modules文件夹中生成的网页包在一个地方的顺序正确,在其他地方的顺序不正确,javascript,node.js,reactjs,webpack,babeljs,Javascript,Node.js,Reactjs,Webpack,Babeljs,我对网页包装和反应非常陌生。我只是想让一个简单的Webpack/Babel/React模板正常运行,这样我就可以抓起它开始使用这个应用程序,而不用担心每次都要设置它。不过,我遇到了一个奇怪的问题 我用React制作了一个Hello World,使用了Webpack、Node和Babel。问题是,它只在我创建它的特定目录中起作用。如果我复制/粘贴所有内容并尝试在其他任何地方运行我的NPM脚本,我会在JSX文件中得到一个“未知模板”错误。经过一些调查,我很确定问题在于,出于某种原因,当我运行原始目录
[8] ./node_modules/react-dom/lib/ReactInstrumentation.js 601 bytes {0} [built]
[11] ./node_modules/react-dom/lib/ReactUpdates.js 9.53 kB {0} [built]
[14] ./node_modules/react/lib/ReactElement.js 11.2 kB {0} [built]
[16] ./node_modules/react/lib/React.js 5.08 kB {0} [built]
[49] ./node_modules/react/react.js 56 bytes {0} [built]
[82] multi ./main.js 28 bytes {0} [built]
[83] ./src/main.js 581 bytes {0} [built]
[99] ./node_modules/react-dom/index.js 59 bytes {0} [built]
这是当它不工作时我得到的输出
[8] ./node_modules/react-dom/lib/ReactInstrumentation.js 601 bytes {0} [built]
[11] ./node_modules/react-dom/lib/ReactUpdates.js 9.53 kB {0} [built]
[14] ./node_modules/react/lib/ReactElement.js 11.2 kB {0} [built]
[16] ./node_modules/react/lib/React.js 5.08 kB {0} [built]
[81] multi ./main.js 28 bytes {0} [built]
[82] ./src/main.js 272 bytes {0} [built]
[83] ./node_modules/react/react.js 56 bytes {0} [built]
如您所见,在无法工作的构建中,行[83]./node_modules/react/react.js 56字节{0}[builded]
在webpack构建my main.js之后出现,而在一个有效的webpack中,它出现在之前
发生这种情况有什么原因吗?有什么好办法来解决这个问题吗?我迷路了。这是我的webpack.config.js文件:
const path = require('path');
module.exports = {
context: path.join(__dirname + '/src'),
entry: [
'./main.js'
],
output: {
path: path.join(__dirname + '/www'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
'babel-loader'
],
},
],
},
resolve: {
modules: [
path.join(__dirname + '/node_modules')
],
},
};
编辑:有人要我的package.json文件,所以这里是:
{
"name": "simple_react_setup",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"compile": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-latest": "^6.24.1",
"babel-preset-react": "^6.24.1",
"express": "^4.15.4",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"webpack": "^3.5.5",
"webpack-dev-middleware": "^1.12.0"
}
}
当我将所有内容复制/粘贴到一个新目录时,我实际上只是复制了整个目录,所以代码根本没有变化。我确保npm安装已运行。我得到的错误是,我的JSX文件中存在未知模板:
ERROR in ./src/Counter.js
Module build failed: SyntaxError: Unexpected token (16:12)
14 | render() {
15 | return (
> 16 | <button
./src/Counter.js中的错误
模块生成失败:语法错误:意外令牌(16:12)
14 | render(){
15 |返回(
>16 |解决了!原来在复制/粘贴所有内容时,我没有将.babelrc文件转移到其他目录。我想是因为文件名以.a开头。在它前面,我的Macbook将其视为隐藏文件,直到现在我才注意到。有趣的是,我的.babelrc文件中有以下内容:
{
"presets": [
["latest", { "modules": false }],
"react"
]
}