无法设置React / Babel / Webpack

Question

So I was trying to set up the React/Babel/Webpack environment but I had some trouble doing so. 所以我试图建立React / Babel / Webpack环境但是我在这方面遇到了一些麻烦。 I started creating a new folder, did the npm init and then I followed everything in this tutorial: https://facebook.github.io/react/docs/package-management.html 我开始创建一个新文件夹，执行npm init然后我按照本教程中的所有内容进行操作： https ： //facebook.github.io/react/docs/package-management.html

First, I've installed webpack globally 首先，我在全球范围内安装了webpack
I've created a index.js with the same content on the tutorial 我在教程中创建了一个与内容相同的index.js
I've created a .babelrc file with { "presets": ["react"] } 我创建了一个带有{ "presets": ["react"] } .babelrc { "presets": ["react"] }的.babelrc文件{ "presets": ["react"] }
Ran the npm install --save react react-dom babel-preset-react babel-loader babel-core 跑npm install --save react react-dom babel-preset-react babel-loader babel-core

Then, when I run the command webpack main.js bundle.js --module-bind 'js=babel-loader' it gives me an error: "Module parse failed ~ You may need an appropriate loader to handle this file type. 然后，当我运行命令webpack main.js bundle.js --module-bind 'js=babel-loader'它给出了一个错误：“模块解析失败〜您可能需要一个合适的加载器来处理这种文件类型。

Any idea guys? 伙计们好吗？ I've literally copy and pasted every step from the tutorial and I am sure all the files are correct. 我从字面上复制并粘贴了教程中的每一步，我确信所有文件都是正确的。 Thanks in advice! 谢谢你的建议！

Answer 1

Create file webpack.config.js 创建文件webpack.config.js

var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
  entry: './main.js', 
  output: { path: __dirname, filename: 'bundle.js' }, 
  module: { 
    loaders: [{ 
      test: /.js?$/, 
      loader: 'babel-loader', 
      exclude: /node_modules/ 
    }] 
  }, 
};

Run 跑

webpack

and it will generate bundle.js for you. 它会为你生成bundle.js 。

Now make sure you have added index.html 现在确保添加了index.html

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8" /> 
    <title>Hello React!</title> 
  </head> 
<body> 
  <div id="example"></div> 
  <script src="bundle.js"></script> 
</body> 
</html>

Answer 2

Looks like you accessing webpack from global. 看起来你从全球访问webpack。 You might have installed webpack by doing 您可能已经安装了webpack

npm install -g webpack

Now, Install webpack locally, 现在，在本地安装webpack，

npm install webpack

and run. 并运行。

./node_modules/webpack/bin/webpack.js main.js bundle.js --module-bind 'js=babel-loader'

无法设置React / Babel / Webpack

问题描述

2 个解决方案

解决方案1
2 已采纳 2016-04-30 03:44:54

解决方案2
1 2016-04-30 03:00:59

无法设置React / Babel / Webpack

问题描述

2 个解决方案

解决方案1 2 已采纳 2016-04-30 03:44:54

解决方案2 1 2016-04-30 03:00:59

解决方案1
2 已采纳 2016-04-30 03:44:54

解决方案2
1 2016-04-30 03:00:59