Update migration, fix various minor issues
- Lot of people couldn't migrate to v1 and plan to reevaluate when v2 is released. - It's "npm" not "NPM". It doesn't stand for anything, and it never has - it was initially chosen simply because it was easy to type. It has a lot of unofficial backronyms with "Node Package Manager" being one of the most common ones, but it's never officially stood for anything as an acronym *or* initialism. - Fixed a few errors in the change log, like non-breaking changes being included in the "Breaking Changes" section and an inaccuracy in the summary of a particular change. - Fixed RawGit URLs to point to GitHack, which is a lighter proxy that offloads caching to Cloudflare instead of also implementing it itself. (It also just uses nginx for all the important server logic, so it scales better.) - Add a few more v0.2 references as appropriate
This commit is contained in:
Isiah Meadows
parent
8186818e10
commit
234b1c9302
26 changed files with 1389 additions and 935 deletions
|
|
@ -1,7 +1,7 @@
|
|||
# Installation
|
||||
|
||||
- [CDN](#cdn)
|
||||
- [NPM](#npm)
|
||||
- [npm](#npm)
|
||||
- [Quick start with Webpack](#quick-start-with-webpack)
|
||||
- [TypeScript](#typescript)
|
||||
|
||||
|
|
@ -15,7 +15,7 @@ If you're new to JavaScript or just want a very simple setup to get your feet we
|
|||
|
||||
---
|
||||
|
||||
### NPM
|
||||
### npm
|
||||
|
||||
```bash
|
||||
$ npm install mithril --save
|
||||
|
|
@ -83,11 +83,11 @@ $ npm start
|
|||
|
||||
#### Step by step
|
||||
|
||||
For production-level projects, the recommended way of installing Mithril is to use NPM.
|
||||
For production-level projects, the recommended way of installing Mithril is to use npm.
|
||||
|
||||
NPM (Node package manager) is the default package manager that is bundled w/ Node.js. It is widely used as the package manager for both client-side and server-side libraries in the JavaScript ecosystem. Download and install [Node.js](https://nodejs.org); NPM will be automatically installed as well.
|
||||
npm is the default package manager that is bundled w/ Node.js. It is widely used as the package manager for both client-side and server-side libraries in the JavaScript ecosystem. Download and install [Node](https://nodejs.org); npm is bundled with that and installed alongside it.
|
||||
|
||||
To use Mithril via NPM, go to your project folder, and run `npm init --yes` from the command line. This will create a file called `package.json`.
|
||||
To use Mithril via npm, go to your project folder, and run `npm init --yes` from the command line. This will create a file called `package.json`.
|
||||
|
||||
```bash
|
||||
npm init --yes
|
||||
|
|
@ -113,11 +113,11 @@ m.render(document.body, "hello world")
|
|||
|
||||
Modularization is the practice of separating the code into files. Doing so makes it easier to find code, understand what code relies on what code, and test.
|
||||
|
||||
CommonJS is a de-facto standard for modularizing JavaScript code, and it's used by Node.js, as well as tools like [Browserify](http://browserify.org/) and [Webpack](https://webpack.js.org/). It's a robust, battle-tested precursor to ES6 modules. Although the syntax for ES6 modules is specified in Ecmascript 6, the actual module loading mechanism is not. If you wish to use ES6 modules despite the non-standardized status of module loading, you can use tools like [Rollup](http://rollupjs.org/) or [Babel](https://babeljs.io/).
|
||||
CommonJS is a de-facto standard for modularizing JavaScript code, and it's used by Node.js, as well as tools like [Browserify](https://browserify.org/) and [Webpack](https://webpack.js.org/). It's a robust, battle-tested precursor to ES6 modules. Although the syntax for ES6 modules is specified in Ecmascript 6, the actual module loading mechanism is not. If you wish to use ES6 modules despite the non-standardized status of module loading, you can use tools like [Rollup](https://rollupjs.org/) or [Babel](https://babeljs.io/).
|
||||
|
||||
Most browser today do not natively support modularization systems (CommonJS or ES6), so modularized code must be bundled into a single JavaScript file before running in a client-side application.
|
||||
|
||||
A popular way for creating a bundle is to setup an NPM script for [Webpack](https://webpack.js.org/). To install Webpack, run this from the command line:
|
||||
A popular way for creating a bundle is to setup an npm script for [Webpack](https://webpack.js.org/). To install Webpack, run this from the command line:
|
||||
|
||||
```bash
|
||||
npm install webpack webpack-cli --save-dev
|
||||
|
|
@ -140,7 +140,7 @@ The `-d` flag tells webpack to use development mode, which produces source maps
|
|||
|
||||
The `--watch` flag tells webpack to watch the file system and automatically recreate `app.js` if file changes are detected.
|
||||
|
||||
Now you can run the script via `npm start` in your command line window. This looks up the `webpack` command in the NPM path, reads `index.js` and creates a file called `app.js` which includes both Mithril and the `hello world` code above. If you want to run the `webpack` command directly from the command line, you need to either add `node_modules/.bin` to your PATH, or install webpack globally via `npm install webpack -g`. It's, however, recommended that you always install webpack locally and use npm scripts, to ensure builds are reproducible in different computers.
|
||||
Now you can run the script via `npm start` in your command line window. This looks up the `webpack` command in the npm path, reads `index.js` and creates a file called `app.js` which includes both Mithril and the `hello world` code above. If you want to run the `webpack` command directly from the command line, you need to either add `node_modules/.bin` to your PATH, or install webpack globally via `npm install webpack -g`. It's, however, recommended that you always install webpack locally and use npm scripts, to ensure builds are reproducible in different computers.
|
||||
|
||||
```
|
||||
npm start
|
||||
|
|
@ -159,7 +159,7 @@ Now that you have created a bundle, you can then reference the `bin/app.js` file
|
|||
</html>
|
||||
```
|
||||
|
||||
As you've seen above, importing a module in CommonJS is done via the `require` function. You can reference NPM modules by their library names (e.g. `require("mithril")` or `require("jquery")`), and you can reference your own modules via relative paths minus the file extension (e.g. if you have a file called `mycomponent.js` in the same folder as the file you're importing to, you can import it by calling `require("./mycomponent")`).
|
||||
As you've seen above, importing a module in CommonJS is done via the `require` function. You can reference npm modules by their library names (e.g. `require("mithril")` or `require("jquery")`), and you can reference your own modules via relative paths minus the file extension (e.g. if you have a file called `mycomponent.js` in the same folder as the file you're importing to, you can import it by calling `require("./mycomponent")`).
|
||||
|
||||
To export a module, assign what you want to export to the special `module.exports` object:
|
||||
|
||||
|
|
@ -187,7 +187,7 @@ Note that in this example, we're using `m.mount`, which wires up the component t
|
|||
|
||||
If you open bin/app.js, you'll notice that the Webpack bundle is not minified, so this file is not ideal for a live application. To generate a minified file, open `package.json` and add a new npm script:
|
||||
|
||||
```
|
||||
```json
|
||||
{
|
||||
"name": "my-project",
|
||||
"scripts": {
|
||||
|
|
@ -236,21 +236,6 @@ npm start
|
|||
|
||||
The source file `index.js` will be compiled (bundled) and a browser window opens showing the result. Any changes in the source files will instantly get recompiled and the browser will refresh reflecting the changes.
|
||||
|
||||
#### Mithril bundler
|
||||
|
||||
Mithril comes with a bundler tool of its own. It is sufficient for ES5-based projects that have no other dependencies other than Mithril, but it's currently considered experimental for projects that require other NPM dependencies. It produces smaller bundles than webpack, but you should not use it in production yet.
|
||||
|
||||
If you want to try it and give feedback, you can open `package.json` and change the npm script for webpack to this:
|
||||
|
||||
```
|
||||
{
|
||||
"name": "my-project",
|
||||
"scripts": {
|
||||
"build": "bundle src/index.js --output bin/app.js --watch"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Vanilla
|
||||
|
||||
If you don't have the ability to run a bundler script due to company security policies, there's an options to not use a module system at all:
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue