ES6 модули и Webpack
 

Мне нужно использовать ES6 модули для приложения на React+Flux.
Как я понял - для того чтобы их использовать нужен Webpack, я вроде как настроил его, и даже что-то работает.

например:

welcome.js

"use strict";
export default function (message) {
	console.log("Welcome ${message}");
};

и
home.js

"use strict";
import welcome from './welcome';
welcome("home");

адекватно взаимодействуют, и выводят то что нужно.

но как только я пытаюсь подключить любой модуль, загруженный через npm:

home.js

import request  from 'request';

у меня при попытке сборки начинается ад в командной строке типа такого:



Подскажите плз, как правильно использовать ES6 модули а то меня уже плавит.
package.json

{
  "name": "gitter-demo-app",
  "version": "0.0.1",
  "dependencies": {
    "babel-runtime": "^6.9.2",
    "express": "~3.4.4",
    "jade": "~0.35.0",
    "passport": "~0.2.0",
    "passport-oauth2": "~1.1.1",
    "request": "~2.27.0"
  },
  "devDependencies": {
    "babel-plugin-transform-runtime": "^6.9.0",
    "mocha": "",
    "nodemon": "~1.0.15",
    "webpack": "^1.13.1"
  },
  "scripts": {
    "start": "node app.js",
    "pretest": "make restart-test-server",
    "test": "NODE_ENV=test mocha",
    "posttest": "make stop-test-server"
  }
}

webpack.config.js

const webpack = require('webpack');

module.exports = {
	entry : "./home",            
	output : {
		filename : "build.js"	 
	},

	watch : true ,               

	watchOptions : {
		aggregateTimeout : 100   
	},

	devtool : "source-map",      

	module : {
		loaders: [{
		    test: /\.js$/,
		    exclude: /(node_modules|bower_components)/,				
		    loader: 'babel',									//babel
		    query: {
		      presets: ['es2015'],
		      plugins: ['transform-runtime']
		    }
		}]
	},
};

lakusha,
разве модули написаны в ES6
используй

var request  = require('request');

Poznakomlus,
https://learn.javascript.ru/modules - вот эти модули мне нужны, как их юзать со всякими npm штуками?

через

var request = require('request');

та же шляпа в терминале.

Babel же переводит все import/export в require, если я это делаю вместо бабеля - ничего не меняется :(

lakusha,
в package.json добавь

{
  "browser": {
    "net": false,
    "tls": false
  }
}

destus,

package.json

{
  "name": "gitter-demo-app",
  "version": "0.0.1",
  "dependencies": {
    "babel-runtime": "^6.9.2",
    "express": "~3.4.4",
    "jade": "~0.35.0",
    "passport": "~0.2.0",
    "passport-oauth2": "~1.1.1",
    "request": "~2.27.0"
  },
  "devDependencies": {
    "babel-plugin-transform-runtime": "^6.9.0",
    "mocha": "",
    "nodemon": "~1.0.15",
    "webpack": "^1.13.1"
  },
  "scripts": {
    "start": "node app.js",
    "pretest": "make restart-test-server",
    "test": "NODE_ENV=test mocha",
    "posttest": "make stop-test-server"
  },
  "browser": {
    "tls": false
  }
}

Не помогло :(

lakusha,
хм, а тут пишут что помогло. Ну можно ещё через конфиг самого вебпака. Попробуй https://github.com/webpack/react-starter/issues/3

destus,
Порыл в сети еще, нашел чуть более расширенную штуку ( больше параметров)

node: {
      net: "empty",
      tls: "empty",
      fs : "empty",
      console : "empty"
    }

Ну, некий прогресс есть - ошибок стало меньше, но они остались)

destus,
Ну и остальные красные ошибки уловил как убрать:

dgram: "empty",
dns: "empty"

осталась только желтая.
И что означали те красные ошибки - хз, мб они еще потом вылезут боком.

lakusha,
Ну это вроде как модуль для ноды, а ты его на фронте используешь.

destus,
Окей, я понял. Спасибо за помощь.

Не вроде как, а точно.
Нет, конечно, можно поизвращаться и запустить его на фронтэнде (что вы и сделали), но зачем? Если хочется высокоуровневой работы с запросами, то есть же fetch - https://learn.javascript.ru/fetch.

и зачем этот функционал с своей ограниченностью
Забить на яблочников и на ишаков

Ну ёлы, мы же о вебпаке говорим.
Разумеется, я подразумеваю, что ТС подключит полифилл.

Fetch это конечно круто, но я бы лучше поставил суперагента и пользовался бы одним апи на сервере и на клиенте. Чтобы не таскать за собой полифиллы https://www.npmjs.com/package/superagent

Аха, а суперагент за собой таскать не придется?)

Erolast,
Fetch возвращает промис. То есть чтобы раскрутить всю эту карусель, еще нужно ставить полифилл бабеля. А на суперагента можно просто навешивать коллбэки и радоваться жизни.

Так ТС же и так бабель использует.

С async/await радости больше)

Ну бабель можно же просто использовать на уровне переписывания няшных штучек типа let, const, =>, ``, class и т.д. в ES5. А полифилл это дополнительные килобайты.
Это да, но не у всех могут быть знания на уровне твоих. Кто-то не понимает как всем этим пользоваться и какие сложности влечет за собой асинхронный стэк.

Ну разве что место критично.

Так суперагент - такая же асинхрощина.