npm与巴贝尔和webpack创建反应应用程序不起作用

问题描述：

我是新的UI技术。我正在尝试我的手在reactjs随着webpack和babel 我创建了一个应用程序后使用npm安装它使用create-react-app插件。我进入src文件夹并执行npm start，它启动浏览器并显示演示页面。我想将babel和webpack添加到此演示中，但不幸的是它不起作用。我在布劳尔打开index.html页，它不显示JSX文件内容我下面 https://www.codementor.io/tamizhvendan/beginner-guide-setup-reactjs-environment-npm-babel-6-webpack-du107r9zr npm与巴贝尔和webpack创建反应应用程序不起作用

我不知道为什么，这是不行的，可以请一些这方面的帮助？

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'已经包含了webpack和Babel，这是它的一大卖点。它在[立即开始]（https://github.com/facebookincubator/create-react-app#get-started-immediately）中提到：*您**不需要安装或配置诸如Webpack之类的工具或巴贝尔。他们已预先配置和隐藏，以便您可以专注于代码。*您是否阅读了[用户指南]（https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/） template/README.md）或者至少是[README]（https://github.com/facebookincubator/create-react-app#create-react-app-）？ –

答

create-react-app命令在场景后面创建了一些有趣的事物。我将强调一些命令，start和build。
start，为您运行开发环境。每次更改文件时都会重新编译。类似于nodejs中的nodemon。

build这会将你的反应文件编译成缩小版本，基本上和webpacks一样。

因此，不需要安装webpack或babel。

我明白你的观点，但babel和webpack如何整合到这个项目中？ –

答

您需要安装通天编译器ES6和响应代码

使用

 C:\Users\username\Desktop\reactApp>npm install babel-core 
    C:\Users\username\Desktop\reactApp>npm install babel-loader 
    C:\Users\username\Desktop\reactApp>npm install babel-preset-react 
    C:\Users\username\Desktop\reactApp>npm install babel-preset-es2015 
C:\Users\username>npm install -g babel 
C:\Users\username>npm install -g babel-cli

尽量保持我们的WebPack作为

var config = { 
    entry: './todoApp.js', 

    output: { 
     path:'./', 
     filename: 'index.js', 
    }, 

    devServer: { 
     inline: true, 
     port: 9191 
    }, 

    module: { 
     rules: [ 
     { 
     test: /\.css$/, 
     use: [ 'style-loader', 'css-loader' ] 
     } 
     ], 
     loaders: [ 
     { 
      test: /\.jsx?$/, 
      exclude: /node_modules/, 
      loader: 'babel', 

      query: { 
       presets: ['es2015', 'react'] 
      } 
     } 

     ] 
    } 
} 

module.exports = config;

做到这一点，你需要改变你的渲染进口为

var ReactDOM=require('react-dom');

，然后用它作为

ReactDOM.render

添加的WebPack它只是安装的WebPack全球使用NPM

npm install webpack --save 
npm install webpack -dev-server --save

更多的帮助遵循这一reactjs setup

答

创建反应的，应用程序使用的WebPack和巴贝尔。它已被纳入该项目。如果您想手动修改create react应用的默认配置，即将事情添加到您的webpack配置中，而这些配置本身不会与create-react-app一起提供，那么您需要运行npm run eject以将内部配置从控制它们的react-scripts包中分离出来。合理？

npm与巴贝尔和webpack创建反应应用程序不起作用

相关推荐