Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.07.2016, 20:10
Интересующийся
Отправить личное сообщение для lakusha Посмотреть профиль Найти все сообщения от lakusha
 
Регистрация: 30.01.2016
Сообщений: 17

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']
		    }
		}]
	},
};
Ответить с цитированием
  #2 (permalink)  
Старый 23.07.2016, 20:26
Аватар для Poznakomlus
Профессор
Отправить личное сообщение для Poznakomlus Посмотреть профиль Найти все сообщения от Poznakomlus
 
Регистрация: 13.03.2013
Сообщений: 1,280

lakusha,
разве модули написаны в ES6
используй
var request  = require('request');
Ответить с цитированием
  #3 (permalink)  
Старый 23.07.2016, 20:32
Интересующийся
Отправить личное сообщение для lakusha Посмотреть профиль Найти все сообщения от lakusha
 
Регистрация: 30.01.2016
Сообщений: 17

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

через
var request = require('request');
та же шляпа в терминале.

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

Последний раз редактировалось lakusha, 23.07.2016 в 20:38.
Ответить с цитированием
  #4 (permalink)  
Старый 23.07.2016, 20:58
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,176

lakusha,
в package.json добавь
{
  "browser": {
    "net": false,
    "tls": false
  }
}

Последний раз редактировалось destus, 23.07.2016 в 21:00.
Ответить с цитированием
  #5 (permalink)  
Старый 23.07.2016, 21:06
Интересующийся
Отправить личное сообщение для lakusha Посмотреть профиль Найти все сообщения от lakusha
 
Регистрация: 30.01.2016
Сообщений: 17

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
  }
}





Не помогло
Ответить с цитированием
  #6 (permalink)  
Старый 23.07.2016, 21:16
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,176

lakusha,
хм, а тут пишут что помогло. Ну можно ещё через конфиг самого вебпака. Попробуй https://github.com/webpack/react-starter/issues/3
Ответить с цитированием
  #7 (permalink)  
Старый 23.07.2016, 21:32
Интересующийся
Отправить личное сообщение для lakusha Посмотреть профиль Найти все сообщения от lakusha
 
Регистрация: 30.01.2016
Сообщений: 17

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

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


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

Ответить с цитированием
  #8 (permalink)  
Старый 23.07.2016, 21:39
Интересующийся
Отправить личное сообщение для lakusha Посмотреть профиль Найти все сообщения от lakusha
 
Регистрация: 30.01.2016
Сообщений: 17

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

dgram: "empty",
dns: "empty"


осталась только желтая.
И что означали те красные ошибки - хз, мб они еще потом вылезут боком.
Ответить с цитированием
  #9 (permalink)  
Старый 23.07.2016, 21:49
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,176

lakusha,
Ну это вроде как модуль для ноды, а ты его на фронте используешь.
Ответить с цитированием
  #10 (permalink)  
Старый 23.07.2016, 21:56
Интересующийся
Отправить личное сообщение для lakusha Посмотреть профиль Найти все сообщения от lakusha
 
Регистрация: 30.01.2016
Сообщений: 17

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как обработать css в webpack? karssen Сборка проекта, утилиты 0 03.02.2016 13:51
webpack Uglify и es6 kuzroman Сборка проекта, утилиты 4 14.12.2015 14:48
CoffeeScript vs ES6 ТОТ_САМЫЙ Оффтопик 98 29.09.2015 11:31
А как вы тестируете приложение написанное на ES6? kuzroman Сборка проекта, утилиты 4 23.09.2015 14:51
webpack & сторонние библиотеки kuzroman Сборка проекта, утилиты 4 21.09.2015 20:23