Question

我是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

我不确定为什么这不起作用，有人可以帮忙吗？

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;

Answer 1

create-react-app命令在场景背后构建了一些有趣的东西。我将重点介绍的一些命令start和build start，为您运行开发环境。每次对文件进行更改时都会重新编译。类似于nodejs中的nodemon。

build这会将您的反应文件编译成缩小版本，基本上与webpacks的工作方式相同。

因此无需安装webpack或babel。

Answer 2

你需要安装babel来编译你的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添加到它只需使用npm

全局安装webpack

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

要获得更多帮助，请按照此reactjs setup

进行操作

Answer 3

Create-react-app使用webpack和babel。它已经整合到项目中。如果您想手动修改create react app的默认配置，即在webpack配置中添加一些本地不与create-react-app一起使用的内容，那么您需要运行npm run eject才能分开来自控制它们的react-scripts包的内部配置。有意义吗？

npm create-react-app与babel和webpack不起作用

3 个答案: