Как использовать React Module CSS в бета-версии Meteor 1.3

РЕДАКТИРОВАТЬ: Выпущен выпуск Meteor 1.3, и скоро появится пакет npm быть выпущенным, позволяющим напрямую использовать модули CSS без Webpack.

Я хотел бы использовать https://github.com/gajus/react-css-modules в Meteor 1.3 через NPM. Но в ридми говорится, что нужно использовать Webpack. Я никогда не использовал Webpack, поскольку мне кажется, что он выполняет ту же работу по сборке, что и Meteor.

Итак, знаете ли вы, как в данном конкретном случае использовать CSS модуля React в бета-версии Meteor 1.3?


webpack reactjs meteor react-css-modules
person dagatsoin    schedule 01.02.2016    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Для этого есть пакет. MDG также рассматривает возможность переноса веб-пакетов на ядро ​​Meteor на каком-то этапе. И да, это инструмент для сборки. Просто более модульный и более быстрый, чем нынешний. Это также довольно сложно с точки зрения инструментов сборки, по крайней мере, на мой взгляд.

Чтобы иметь веб-пакеты в метеоре, просто>

meteor add webpack:webpack
meteor remove ecmascript

Вам также необходимо удалить ecmascripts, поскольку вы получаете их из веб-пакета, и наличие двух установок может вызвать ошибки.

Более полный ответ можно найти в сообщении в блоге Сэма Коркоса, а также в комментарии Бена Страхана к бета-версии Meteor 1.3. Я использовал его в качестве учебного пособия для создания другого пакета веб-пакетов.

https://medium.com/@SamCorcos/meteor-webpack-from-the-ground-up-f123288c7b75#.phcq5lvm8

Я думаю, что для пакета, который вы упомянули, webpack.packages.json должен выглядеть примерно так

{
  "private": true,
  "scripts": {
    "start": "webpack-dev-server"
  },
  "devDependencies": {
    "babel-core": "^6.4.5",
    "babel-loader": "^6.2.1",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.3.13",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "style-loader": "^0.13.0",
    "webpack": "^2.0.6-beta",
    "webpack-dev-server": "^2.0.0-beta"
  },
  "dependencies": {
    "react": "^0.15.0-alpha.1",
    "react-css-modules": "^3.7.4",
    "react-dom": "^0.15.0-alpha.1"
  }

И webpack.config.js вы можете скопировать прямо из

https://github.com/gajus/react-css-modules-examples/blob/master/webpack.config.js.

person Kimmo Hintikka    schedule 29.02.2016
comment
Пока рано говорить о том, что Meteor собирается использовать Webpack. youtube.com/watch?v=hk0h_7-N9hA - person zVictor; 01.03.2016
comment
Я сказал обдумываю, но согласен с комментарием. Надеюсь нет. Webpack делает все, кроме его слишком сложного использования, и, по крайней мере, мне все равно никогда не понадобятся 90% функций - person Kimmo Hintikka; 01.03.2016
comment
Спасибо за ответ, Киммо. Но я бы даже не стал говорить об этом, поскольку этот пост forum.meteor.com/t/, где Бенджамин (работающий в MDG над созданием части Meteor) объясняет, почему он не одобряет использование Webpack. Однако github.com/thereactivestack/meteor-webpack/tree/master/ packages / действительно теперь доступен для Meteor 1.3 уже через несколько дней. К сожалению, этот пакет мне больше не нужен, и у меня нет времени на запуск теста. Если вы хотите получить награду, не могли бы вы сделать тест и показать результат. Тогда я приму твой ответ. - person dagatsoin; 02.03.2016
comment
Я как раз собирался прокомментировать, что, следовательно, вопрос о щедрости, мне, вероятно, нужно будет его протестировать. Я постараюсь найти время завтра, еще кто-нибудь сможет взять кредит. - person Kimmo Hintikka; 02.03.2016
comment
награда была назначена вам автоматически, потому что вы получили 2 голоса за. Забавно, что у тебя +125, а у меня -250. Математика неверна = p - person zVictor; 07.03.2016
comment
Вы правы, zVictor, возможно, stackoverflow начал собирать комиссию за транзакции и забыл сообщить кому-либо ... - person Kimmo Hintikka; 07.03.2016

arrow_upward
2
arrow_downward

В Meteor v1.3.2 появилась встроенная функция импорта файлов .css (а также других файлов препроцессора CSS, таких как less и sass) из .js и .jsx.

Например, учитывая следующую (упрощенную) структуру папок,

.
├── client
│   └── main.js
├── imports
│   └── client
│       ├── main.css
│       └── main.jsx
├── node_modules
│   └── some-module
│       └── dist
│           └── css
│               └── main.css
├── package.json
└── server
    └── main.js

где some-module - модуль npm, установленный с использованием:

$ meteor npm install --save some-module

импорт локальных и модульных таблиц стилей в imports/client/main.jsx:

// importing a style file from a node module
import 'some-module/dist/css/main.css';

// importing a style from a local file
import './main.css';
person MasterAM    schedule 15.04.2016
comment
Он будет только прикреплять содержимое css из этих файлов к тегу 'head', но вы можете изменить эту функциональность, чтобы получить что-то вроде модулей css. Взгляните на этот эксперимент: github.com/juliancwirko/meteor-css-modules-test - person juliancwirko; 18.04.2016

arrow_upward
1
arrow_downward

Вот так можно начать с нуля.

Начинать с нуля

meteor create test-project
cd test-project
npm init
meteor remove ecmascript
meteor add webpack:webpack
meteor add webpack:react
meteor add webpack:less
meteor add react-runtime # Skip this step if you want to use the NPM version
meteor add react-meteor-data
meteor
npm install
meteor

Входные файлы

Ваши входные файлы определены в вашем package.json. Главное - это ваша запись на сервере, а браузер - это ваша клиентская запись.

{
  "name": "test-project",
  "private": true,
  "main": "server/entry.js",
  "browser": "client/entry.js"
}

Для получения дополнительной информации перейдите по этой ссылке.

person Pankaj Jatav    schedule 03.03.2016