首页 文章

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

提问于
浏览 次
1

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

enter image description here

node.js reactjs npm webpack babeljs

3 回答

  • 0

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

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

    因此，无需安装 webpack 或 babel .

    回复于
  • 0

    你需要安装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

    回复于
  • 0

    Create-react-app使用webpack和babel . 它已经整合到项目中 . 如果您想手动修改create react app的默认配置，即将内容添加到您需要运行 npm run eject 的webpack配置中，以便将内部配置与控制它们的react-scripts包分开 . 合理？

    回复于

相关问题