You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
In this section we will set up Node, Yarn, a basic `package.json`file, and try a package.
5
+
在这部分，我们将安装Node，Yarn，`package.json`文件, 打成一个包.
6
6
7
7
## Node
8
8
9
-
> 💡 **[Node.js](https://nodejs.org/)**is a JavaScript runtime environment. It is mostly used for Back-End development, but also for general scripting. In the context of Front-End development, it can be used to perform a whole bunch of tasks like linting, testing, and assembling files.
We will use Node for basically everything in this tutorial, so you're going to need it. Head to the [download page](https://nodejs.org/en/download/current/)for **macOS** or **Windows** binaries, or the [package manager installations page](https://nodejs.org/en/download/package-manager/) for Linux distributions.
If Node is already installed, or if you want more flexibility, install NVM ([Node Version Manager](https://github.com/creationix/nvm)), and make NVM install and use the latest version of Node for you.
NPM is the default package manager for Node. It is automatically installed alongside with Node. Package managers are used to install and manage packages (modules of code that you or someone else wrote). We are going to use a lot of packages in this tutorial, but we'll use Yarn, another package manager.
> 💡 **[Yarn](https://yarnpkg.com/)** is a Node.js package manager which is much faster than NPM, has offline support, and fetches dependencies [more predictably](https://yarnpkg.com/en/docs/yarn-lock).
Since it [came out](https://code.facebook.com/posts/1840075619545360) in October 2016, it received a very quick adoption and may soon become the package manager of choice of the JavaScript community. If you want to stick to NPM you can simply replace all `yarn add` and `yarn add --dev` commands of this tutorial by `npm install --save` and `npm install --save-dev`.
Install Yarn by following the [instructions](https://yarnpkg.com/en/docs/install)for your OS. I would recommend using the **Installation Script** from the *Alternatives* tab if you are on macOS or Unix, to [avoid](https://github.com/yarnpkg/yarn/issues/1505)relying on other package managers:
> 💡 **[package.json](https://yarnpkg.com/en/docs/package-json)**is the file used to describe and configure your JavaScript project. It contains general information (your project name, version, contributors, license, etc), configuration options for tools you use, and even a section to run *tasks*.
**Note**: See that 🏁 racing flag emoji? I will use it every time you reach a **checkpoint**. We are sometimes going to make a lot of changes in a row, and your code may not work until you reach the next checkpoint.
Running`node .` to execute our program is a bit too low-level. We are going to use an NPM/Yarn script to trigger the execution of that code instead. That will give us a nice abstraction to be able to always use `yarn start`, even when our program gets more complicated.
-In`package.json`, add a `scripts` object like so:
71
+
-在`package.json`里, 添加 `scripts`字段，如下:
72
72
73
73
```json
74
74
{
@@ -81,42 +81,42 @@ Running `node .` to execute our program is a bit too low-level. We are going to
81
81
}
82
82
```
83
83
84
-
`start`is the name we give to the *task* that will run our program. We are going to create a lot of different tasks in this `scripts`object throughout this tutorial. `start` is typically the name given to the default task of an application. Some other standard task names are `stop`and`test`.
`package.json`must be a valid JSON file, which means that you cannot have trailing commas. So be careful when editing manually your `package.json`file.
-Create a `.gitignore`file and add the following to it:
94
+
-创建 `.gitignore`文件和添加内容如下:
95
95
96
96
```gitignore
97
97
.DS_Store
98
98
/*.log
99
99
```
100
100
101
-
`.DS_Store`files are auto-generated macOS files that you should never have in your repository.
101
+
`.DS_Store`是在MacOs自动生成的文件，在您的仓库是没有的。
102
102
103
-
`npm-debug.log` and `yarn-error.log`are files that are created when your package manager encounters an error, we don't want them versioned in our repository.
In this section we will install and use a package. A "package" is simply a piece of code that someone else wrote, and that you can use in your own code. It can be anything. Here, we're going to try a package that helps you manipulate colors for instance.
A `node_modules`folder has been created to store the package.
113
+
目录中多了一个`node_modules`文件夹，来存储包。
114
114
115
-
-Add`node_modules/`to your`.gitignore`
115
+
-添加`node_modules/`到你的`.gitignore`
116
116
117
-
You will also notice that a `yarn.lock`file got generated by Yarn. You should commit this file to your repository, as it will ensure that everyone in your team uses the same version of your packages. If you're sticking to NPM instead of Yarn, the equivalent of this file is the *shrinkwrap*.
**Dependencies**are libraries you need for your application to function (React, Redux, Lodash, jQuery, etc). You install them with `yarn add [package]`.
**Dev Dependencies** are libraries used during development or to build your application (Webpack, SASS, linters, testing frameworks, etc). You install those with `yarn add --dev [package]`.
0 commit comments