无法设置React / Babel / Webpack

debugcn 发表于 Dev

巴罗佐

所以我试图设置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'它给我一个错误：“模块解析失败〜您可能需要适当的加载器来处理此文件类型。

有主意吗？我已经从字面上复制并粘贴了教程中的每个步骤，并且我确信所有文件都是正确的。感谢您的建议！

瓦比哈夫·穆勒

建立档案 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。