13

编辑:Meteor 1.3 版本已经发布,一个npm 包即将发布,允许在没有 Webpack 的情况下直接使用 CSS 模块


我想通过 NPM 在 Meteor 1.3中使用https://github.com/gajus/react-css-modules 。但是自述文件说要使用 Webpack。我从未使用过 Webpack,因为在我看来,它的构建工作与 Meteor 相同。

那么你知道在这种特定情况下在 Meteor 1.3 beta 中使用 React Module CSS 的方法吗?

4

3 回答 3

3

实际上有这个包。MDG 也在考虑在某个阶段将 webpacks 引入流星核心。是的,它是构建工具。只是比目前的更模块化和更快。至少在我看来,随着构建工具的发展,它也非常复杂。

在流星中有 webpacks 只是 >

meteor add webpack:webpack
meteor remove ecmascript

您还需要在从 webpack 获取 ecmascript 时删除它们,并且安装 2 次可能会导致错误。

有关更完整的答案,请查看 Sam Corcos 博客文章以及 Ben Strahan 对 Meteor 1.3 Beta 的评论。我用它作为教程来获取不同的 webpack 包。

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

于 2016-02-29T18:54:03.687 回答
2

.cssMeteor v1.3.2 为文件(以及其他 CSS 预处理器文件,例如lesssass)引入了内置的导入.js功能.jsx

例如,给定以下(简化的)文件夹结构,

.
├── 客户
│ └── main.js
├── 进口
│ └── 客户
│ ├── main.css
│ └── main.jsx
├── 节点模块
│ └── some-module
│ └── dist
│ └── css
│ └── main.css
├── package.json
└── 服务器
    └── 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';
于 2016-04-15T22:28:52.867 回答
1

你可以像这样从头开始。

白手起家

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

有关更多信息,请查看此链接

于 2016-03-03T06:15:20.337 回答