Question

所以我试图设置React / Babel / Webpack环境但是我在这方面遇到了一些麻烦。我开始创建一个新文件夹，执行npm init，然后我按照本教程中的所有内容进行操作：https://facebook.github.io/react/docs/package-management.html

首先，我已经在全球范围内安装了webpack
我在教程

index.js

我使用.babelrc

{ "presets": ["react"] }

跑npm install --save react react-dom babel-preset-react babel-loader babel-core

然后，当我运行命令webpack main.js bundle.js --module-bind 'js=babel-loader'时，它给出了一个错误：“模块解析失败〜您可能需要一个合适的加载器来处理这种文件类型。

任何想法的人？我从字面上复制并粘贴了教程中的每一步，我确信所有文件都是正确的。谢谢你的建议！

Answer 1

创建文件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/ 
    }] 
  }, 
};

运行

webpack

它将为您生成bundle.js。

现在确保您已添加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

看起来你从全球访问webpack。您可能已经通过

安装了webpack

npm install -g webpack

现在，在本地安装webpack，

npm install webpack

然后跑。

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

无法设置React / Babel / Webpack

2 个答案: