Skip to content
This repository has been archived by the owner on Oct 24, 2021. It is now read-only.

Updates to the build article content for 1.3 #225

Merged
merged 3 commits into from
Mar 1, 2016
Merged
Changes from 1 commit
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
44 changes: 41 additions & 3 deletions content/build-tool.md
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,16 @@ One difference between pre-published packages and local app packages is that the

<h4 id="npm-adding">Adding packages to your app</h4>

Meteor 1.3 will have seamless integration with NPM, and you will be able to simply `npm install` these packages into your app directory. Until then, the easiest way to use NPM packages in your app is [`meteorhacks:npm`](https://atmospherejs.com/meteorhacks/npm).
To install an NPM package into your app, you can simply run NPM's standard install command:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should mention that different versions of NPM do significantly different things, and that some packages might only work with NPM 2, but NPM 3 is better about deduplicating and path length on Windows. In short, we suggest NPM 3 but if that doesn't work for you try NPM 2. What do you think?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, it's a good point. I don't really feel confident on this exact topic. Do we know NPM3 doesn't work for certain use cases? Because if not, perhaps we can leave it and expect people to just install whatever makes sense for them? It's pretty backwards compatible, right?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NPM

It's pretty backwards compatible, right?

Top kek.

No but seriously libraries such as Relay don't work properly with NPM 3 sometimes. This is a fact: facebook/relay#832

Doesn't matter though - I think we should probably recommend NPM 3, and maybe people can figure it out.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should I just leave it or do think we should call out a specific version?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should, since "use NPM" is not specific, since there are three different NPMs that perform in dramatically different ways.


```
npm install --save-dev <package name>
```

XXX: Is it `meteor npm`
XXX: Do we use --save-dev
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It should be --save for production deps, and --save-dev for development deps, right? Another place where in Meteor the package specifies it (build plugin, debugOnly) and in NPM the user does.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I mean... how does this actually work in practice? I mean the difference between dependencies and devDependencies has a fixed meaning for an npm module which is irrelevant to a meteor app, I would have thought. Unless the build tool respects this somehow?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In an ideal world, when you deploy your app it would install your dependencies but not your devDependencies on the production server, so I think there's a valid distinction that a future Meteor tool should respect.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's no reason why someone couldn't do that right away so I think this makes a lot of sense, thinking about it more.

XXX: What about creating an initial `package.json`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This would definitely make sense in the universe where a meteor create gives you an app with NPM dependencies. If we have meteor create --react or similar, that will be necessary, and I bet a Meteor 1.4 app will require NPM dependencies for some core Meteor stuff?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we just have package.js in the boilerplate now? ....

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It just seems weird to me to have meteor create give you an empty package.json file, but maybe that's not so bad?

XXX: How do other developers get the packages?
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it should be up to users to run npm install vs. Meteor somehow doing it for you, but we should try to figure out a way to warn users when their dependencies aren't installed? This could be as easy as something in .meteor/local which is a straight copy of package.json, and complains if it's different.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah. I guess we leave this here until we know the answer to this.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the above is easy to implement, it could be a good suggestion to the platform team. I don't think they have any plans about this right now but I could be wrong.


<h4 id="npm-searching">Searching for packages</h4>

Expand Down Expand Up @@ -175,7 +184,10 @@ sendTextMessage() {

<h3 id="client-npm">NPM on the client</h3>

NPM started as a package manager for Node.js, but is quickly becoming one of the most popular places to publish client-side modules as well. Meteor 1.3 will include built-in support for bundling NPM modules on the client, but in the meantime the best option is to use the [`cosmos:browserify`](https://atmospherejs.com/cosmos/browserify) package to bundle these modules. Since one of the most common scenarios is using React components from NPM, read about how to do this in the [React in Meteor guide](http://react-in-meteor.readthedocs.org/en/latest/client-npm/).
NPM started as a package manager for Node.js, but is quickly becoming one of the most popular places to publish client-side modules as well. Thanks to Meteor's built in client-side support for [ES2015 modules](app-structure.html#modules), you can use appropriate NPM packages on the client easily, simply by installing the package as usual and `import`-ing from it from a client-side file.

For example, in the [React article](react.html#react-router) we discuss how to use the [React Router](https://github.com/rackt/react-router) in the client side of an app with a few simple commands.


<h2 id="javascript-transpilation">JavaScript transpilation</h2>

Expand Down Expand Up @@ -302,7 +314,33 @@ Currently, Meteor doesn't have a separate build step for post-processing CSS, so

<h3 id="juliancwirko-postcss">juliancwirko:postcss</h3>

Use the package [juliancwirko:postcss](https://atmospherejs.com/juliancwirko/postcss) to your app to enable PostCSS for your Meteor app. It's not completely trivial to set it up, and we hope to make support for PostCSS a more core part of Meteor in the future. Read the documentation for the package to get the steps to add it to your app; we won't reproduce the instructions here since they might change in future versions.
Use the package [juliancwirko:postcss](https://atmospherejs.com/juliancwirko/postcss) to your app to enable PostCSS for your Meteor app. To do so, we remove the standard CSS minifier and replace it with the postcss package:

```
meteor remove standard-minifiers
meteor add juliancwirko:postcss
# We still want Meteor's built in JS minifiers
meteor add standard-minifiers-js
```

Then we can install any NPM CSS processing packages that we'd like to use and reference them from a `postcss` section of our `package.json`. In the Todos example app, we use `autoprefixer` package to increase browser support:

```
{
"devDependencies": {
"autoprefixer": "^6.3.1"
},
"postcss": {
"plugins": {
"autoprefixer": {"browsers": ["last 2 versions"]}
}
}
}
```

After doing the above, you'll need to ensure you `npm install` and restart the `meteor` process running your app to make sure the PostCSS system has had a chance to set itself up.

XXX: ensure the 1.3 version of this package has been release before publishing this?

<h2 id="minification">Minification</h2>

Expand Down