Skip to content

Fix lib exclude #37

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"stage": 0,
"plugins": [
"react-transform"
],
"extra": {
"react-transform": [{
"target": "react-transform-webpack-hmr",
"imports": ["react"],
// this is important for Webpack HMR:
"locals": ["module"]
},
{
"target": "react-transform-catch-errors",
// the second import is the React component to render error
// (it can be a local path too, like "./src/ErrorReporter")
"imports": ["react", "redbox-react"]
}]
}
}
14 changes: 7 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
# meteor-webpack-react

THis is a Meteor project skeleton where the client (in React) and server get built by Webpack. In dev mode,
webpack-dev-server is used with react-hot-loader. There are a bunch of run and build scripts to make things more
webpack-dev-server is used with [react-transform](https://github.com/gaearon/babel-plugin-react-transform). There are a bunch of run and build scripts to make things more
convenient.

There is a port of the Meteor simple-todos tutorial to this stack on the `simple-todos` branch.

## Advantages of packaging with Webpack instead of Meteor

* `require`/ES6 `import` let you avoid Meteor global variables/load order issues
* `react-hot-loader` reloads React components without reloading the entire page
* `react-transform` reloads React components without reloading the entire page
when you make changes
* If you `require` your styles with Webpack, it will also reload them without
reloading the entire page when you make changes to them
Expand Down Expand Up @@ -39,10 +39,10 @@ In dev mode, both `webpack-dev-server` and `meteor_core` run simultaneously on d

This is where it gets tricky, but there is an experimental solution in the `react-commons` branch.

`react-hot-loader` requires many internal React modules, thus it doesn't work with components
`react-transform` requires many internal React modules, thus it doesn't work with components
created by an instance of React loaded from `react-runtime-dev`.

But if React is loaded by Webpack, then the the modules required by `react-hot-loader`
But if React is loaded by Webpack, then the the modules required by `react-transform`
will be the same as in that instance of React.

This poses a problem if you want to use any Meteor packages that depend on the `react` package,
Expand Down Expand Up @@ -107,9 +107,9 @@ Put your settings in `settings/devel.json` & `settings/prod.json` and they will

## Running Meteor Commands

As a convenince you can run `./met` in the root directory to run the `meteor` command. However you can still `cd meteor_core` and then run `meteor` from that directory as well.
As a convenience you can run `./met` in the root directory to run the `meteor` command. However you can still `cd meteor_core` and then run `meteor` from that directory as well.

```
./met --version
./met search moment
```
./met search simple-schema
```
5 changes: 4 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,16 @@
"devDependencies": {
"babel-eslint": "^4.0.5",
"babel-loader": "^5.1.2",
"babel-plugin-react-transform": "^1.0.3",
"css-loader": "^0.15.3",
"eslint-config-airbnb": "0.0.7",
"eslint-plugin-react": "^3.2.2",
"grunt": "^0.4.5",
"grunt-cli": "^0.1.13",
"node-libs-browser": "^0.5.2",
"react-hot-loader": "^1.2.7",
"react-transform-catch-errors": "^0.1.1",
"react-transform-webpack-hmr": "^0.1.4",
"redbox-react": "^1.0.1",
"style-loader": "^0.12.3",
"webpack": "^1.10.1",
"webpack-dev-server": "^1.10.1"
Expand Down
12 changes: 0 additions & 12 deletions webpack/webpack.config.client.dev.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
var webpack = require('webpack');
var config = require('./webpack.config.client');
var _ = require('lodash');

var devProps = require('./devProps');

var config = module.exports = _.assign(_.cloneDeep(config), {
Expand Down Expand Up @@ -31,14 +30,3 @@ var config = module.exports = _.assign(_.cloneDeep(config), {
port: devProps.webpackPort,
}
});

// inject react-hot loader

var jsLoader = _.find(config.module.loaders, function(loader) {
return loader.test.test('.js');
});

if (jsLoader) {
jsLoader.loader = 'react-hot!' + jsLoader.loader;
}

7 changes: 4 additions & 3 deletions webpack/webpack.config.client.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,13 @@ module.exports = {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel?stage=0',
exclude: /node_modules|lib/,
loader: 'babel',
exclude: [/node_modules/, path.join(__dirname, '../lib')],
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
loader: 'style-loader!css-loader',
exclude: /node_modules/,
},
],
},
Expand Down