Как использовать модуль React Module в Meteor 1.3 beta

EDIT: релиз Meteor 1.3 отсутствует, и пакет npm будет выпущен, что позволяет напрямую использовать модули CSS без Webpack

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

Знаете ли вы, в этом конкретном случае, использование React Module CSS в Meteor 1.3 beta?

Ответ 1

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

Чтобы иметь веб-пакеты в meteor just >

meteor add webpack:webpack
meteor remove ecmascript

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

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

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

Ответ 2

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

Ответ 3

Вы можете начать с нуля, как это.

Начать с нуля

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

Файлы ввода

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

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

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