Невозможно настроить 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

Тогда ш Когда я запускаю команду 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/ 
    }] 
    }, 
};

Run

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 локально,

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'' –

Я нахожусь в окнах. 'npm -g webpack' - это не команда, вы имели в виду' npm install -g webpack'? Все еще получение ошибки парсера модуля – GBarroso

Невозможно настроить React/Babel/Webpack

ответ

Смежные вопросы