无法设置React/Babel/Webpack

所以我试图设置React/Babel/Webpack环境，但是我在这样做时遇到了一些麻烦。我开始创建一个新的文件夹，做了npm init，然后我跟着本教程的一切：https://facebook.github.io/react/docs/package-management.html 无法设置React/Babel/Webpack

首先，我已经安装的WebPack全球
我创建了一个index.js与本教程的内容相同
我创建了一个.babelrc文件，{ "presets": ["react"] }
冉npm install --save react react-dom babel-preset-react babel-loader babel-core

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

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

来源

2016-04-30 GBarroso

这应该工作，请确保安装的一切吗？ –

这个问题似乎是JSX代码，当我切断它时命令起作用。但它看起来像一切都很好。我怎样才能确保一切安装？ – GBarroso

有'node_modules'文件夹，检查是否安装了所有东西。尝试： 'webpack main.js bundle.js --module-bind'js = babel'' –

创建文件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>

来源

2016-04-30 03:44:54

这种方式工作。非常感谢你！ – GBarroso

看起来像你从全球访问webpack。你可能会做

npm install -g webpack

现在，安装的WebPack本地已经安装的WebPack，

npm install webpack

和运行。

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

来源

2016-04-30 03:00:59

完成它，但它是说，点不被识别为内部或外部命令。 – GBarroso

而你在Windows或Linux？好的。然后最后做'npm -g webpack'并运行'webpack main.js bundle.js --module-bind'js = babel-loader'' –

我在windows上。 'npm -g webpack'不是命令，你的意思是'npm install -g webpack'吗？仍然得到模块解析器错误 – GBarroso

无法设置React/Babel/Webpack

回答

相关问题