我是 UI 技术的新手。 我正在尝试使用reactjs以及webpack和babel 使用 npm 安装后，我使用 create-react-app 插件创建了一个应用程序。 我 cd 进入 src 文件夹并执行 npm start，它启动浏览器并显示演示页面。 我试图将 babel 和 webpack 添加到这个演示中，但不幸的是它不起作用。我在浏览器中打开index.html页面，它没有显示jsx文件内容 我正在关注 https://www.codementor.io/tamizhvendan/beginner-guide-setup-reactjs-environment-npm-babel-6-webpack-du107r9zr
我不确定为什么这不起作用，有人可以帮忙吗？
index.jsx
import React from 'react';
import {render} from 'react-dom';
class App extends React.Component {
render () {
return <p> Hello React!</p>;
}
}
render(<App/>, document.getElementById('app'));
index.html
<html>
<head>
<meta charset="utf-8">
<title>React.js using NPM, Babel6 and Webpack</title>
</head>
<body>
<div id="app" />
<script src="public/bundle.js" type="text/javascript"></script>
</body>
</html>
.babelrc 文件
{
"presets" : ["es2015", "react"]
}
webpack.config.js 文件
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');
var config = {
entry: APP_DIR + '/index.jsx',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
module : {
loaders : [
{
test : /\.jsx?/,
exclude : /(node_modules)/,
include : APP_DIR,
loader : 'babel-loader'
}
]
}
};
module.exports = config;
最佳答案
create-react-app 命令在幕后构建了一些有趣的东西。我将突出显示一些命令，start 和 build。
start，为您运行开发环境。每次更改文件时它都会重新编译。类似于nodejs中的nodemon。
build 这会将你的 React 文件编译成缩小版本，基本上与 webpacks 相同。
因此不需要安装 webpack 或 babel。
关于node.js - npm create-react-app 与 babel 和 webpack 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45661479/