Как подружить babel + webpack + react + npm?

Question

[mletov]

Пожалуйста, подскажите:

Пытаюсь освоить всю эту ноджеэсовскую кухню, компиляцию js кода в исполняемые модули через Webpack. Боле-менее получается, но споткнулся на babel. Создал вот такой тестовый файл dgtest.js на примере с метанита, пытаюсь прогнать его через webpack с применением babel.

class Hello extends React.Component {
    render() {
        return <h1>Hello, React</h1>;
    }
}
ReactDOM.render(
    <Hello></Hello>,
    document.getElementById("app")
)

Получаю ошибку
"locals[0] does not appear to be a `module` object with Hot Module replacement API enabled. You should disable react-transform-hmr in production by using `env` section in Babel configuration. See the example in "

Гуглил. Пытался вставить предложенные конфигурации с SO в секцию "babel" в package.json - не работает.
Подскажите, пожалуйста, как с этим бороться. Ну и заодно хотел уточнить, нужно ли перед этим кодом вставлять require("react") и/или require("babel")?

Использую Visual Studio.

webpack.config.js

var path = require('path');

module.exports = {
	
		entry: {
			react: './node_modules/react/index',
			reactdom: './node_modules/react-dom/index',
			datagrid: './node_modules/react-data-grid/index',
			addons: './node_modules/react-data-grid-addons/index',
			jquery: './node_modules/jquery/src/jquery',
			dgtest: './wp/Scripts/dgtest.js'
		},
		output: {
			publicPath: "/js/",
			path: path.join(__dirname, '/wp/wwwroot/js/'),
			filename: "[name].bundle.js",
			chunkFilename: "[id].bundle.js"
		},
		module: 
		{
			 loaders:  [
							  {
									test: /\.js$/,
									loader: 'babel-loader',
									exclude: /node_modules/,									
									query: {
									  presets: ['react', 'es2015', 'react-hmre'],									  
									  plugins: ['transform-class-properties'],								
									}
							  }
						]
       }

	
};

package.json

{
  "name": "wp",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-react-hmre": "^1.1.1",
    "jquery": "^3.2.1",
    "react": "^16.0.0",
    "react-data-grid": "^2.0.69",
    "react-data-grid-addons": "^2.0.70",
    "react-dom": "^16.0.0",
    "webpack": "^3.8.1",
    "webpack-notifier": "^1.5.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-react-transform": "^3.0.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-register": "^6.26.0",
    "react-transform-hmr": "^1.0.4",
    "webpack": "^3.8.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "babel": {}
}

Answer 1

[197291]

1) Для освоения всего стэка, лучше использовать create-react-app, погугли посмотри. Для начала очень хорошо.
2) Если же ты хочешь с места в карьер, то рекомендую посмотреть boilerplate какой нибудь. А там разбирай его и смотри. Конфиги, структуру. Boilerplate react в гугл и качай.

Comments

[mletov]

Спасибо, попробую

Answer 2

[Alan Ikaev]

Думаю будет полезная эта статья. Просто сделаешь все как тебе нужно