npm与yarn

Comments

npm

npm 包中的模块版本都需要遵循 SemVer 规范，该规范的标准版本号采用 X.Y.Z 的格式，其中 X、Y 和 Z 均为非负的整数，且禁止在数字前方补零：

  • X 是主版本号(major)：修改了不兼容的 API
  • Y 是次版本号(minor)：新增了向下兼容的功能
  • Z 为修订号(patch)：修正了向下兼容的问题

当某个版本改动比较大、并非稳定而且可能无法满足预期的兼容性需求时，我们可能要先发布一个先行版本。

先行版本号可以加到主版本号.次版本号.修订号的后面，通过 - 号连接一连串以句点分隔的标识符和版本编译信息：

  • 内部版本(alpha)
  • 公测版本(beta)

  • 正式版本的候选版本rc（即 Release candiate）

  • “5.0.3”表示安装指定的5.0.3版本

  • “～5.0.3”表示安装5.0.X中最新的版本
  • “^5.0.3”表示安装5.X.X中最新的版本

安装的时候，包会在同一时间下载和安装，中途某个时候，一个包抛出了一个错误，npm会继续下载和安装包。因为npm会把所有的日志输出到终端，有关错误包的错误信息就会在一大堆npm打印的警告中丢失掉，你甚至永远不会注意到实际发生的错误。

5.0以下版本npm缺陷：

  1. 安装特别慢，采用队列形式安装
  2. 版本无法保持一致性，每次执行npm install 的时候，都会下载最新版本的文件
  3. 安装过程中如果出现问题，会跳过error继续安装。

yarn解决的问题：

  1. 安装包的时候，同步安装，解决npm队列形式的安装，速度提升
  2. 支持离线模式（前提是曾经下载过这个包）
  3. 安装版本统一 ：有一个yarn.lock文件，安装会严格按照yarn.lock的版本号进行安装，（npm也支持锁定，需要执行npm shrinkwrap）

npm 5.0

增加了package-lock.json

  1. 版本
  2. 位置
  3. 完整的hash

package-lock.json 在npm 5.4版本之后：

  1. 先去判断package-lock.json
  2. 如果一致，直接按照package-lock.json的版本号去下载
  3. 如果不一致，npm会根据package中版本号，以及语义含义去下载最新的包，并更新至lock ，保持一致。

yarn和npm命令对比

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
npm
yarn


npm install
yarn


npm install react --save
yarn add react


npm uninstall react --save
yarn remove react


npm install react --save-dev
yarn add react --dev


npm update --save
yarn upgrade
1
2
3
npm install express -g
cd ~/mynodeproject/
npm link express
1
2
3
4
5
6
7
8
npm login
npm adduser --registry http://registry.npmjs.org
npm publish --registry http://registry.npmjs.org
npm publish --access=public
npm unpublish 包名 --force
npm docs

npm link

npm包制作

1. 新建一个空白文件夹

2. 初始化项目

注意name不要和现有的其他npm包重名了，不然一会儿发Npm包的时候会失败，可以先去npmjs.com搜一下有没有重名的。

1
npm init

3. package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
    "name": "...",
    "version": "0.0.1",
    "description": "...",
    "main": "dist/index.min.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "start": "webpack-dev-server --hot --inline",
      "build": "webpack --display-error-details --config webpack.config.js"
    },
    "repository": {
      "type": "git",
      "url": "..."
    },
    "author": "...",
    "license": "ISC",
    "bugs": {
			"url": "..."
    },
    "homepage": "...",
    "devDependencies": {
      ...
    }
}

4. 执行下载依赖包

1
npm install

5. 新建 src 和 dist 文件夹

dist代表发布时的目录，src是开发目录。dist里面的js是到时候通过webpack打包后的文件。只会提交dist目录到npm官网上，src不提交。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- app.vue -->

<template>
  <div>
 ...
  </div>
</template>

<script>
  export default {
    data () {
      return {}
    },
    props: {
      ...
    }
  }
</script>

<style scoped lang='less'>
</style>
1
2
3
4
// index.js

import NpmVue from './app.vue'
export default NpmVue

6. 加入webpack打包配置，并把src中的内容打包进dist目录中

在根目录下新增webpack.config.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
const path = require("path");
const webpack = require("webpack");
const uglify = require("uglifyjs-webpack-plugin");
 
module.exports = {
    devtool: 'source-map',
    entry: "./src/index.js",//入口文件，就是上步骤的src目录下的index.js文件，
    output: {
        path: path.resolve(__dirname, './dist'),//输出路径，就是上步骤中新建的dist目录，
        publicPath: '/dist/',
        filename: 'index.min.js', // 输出文件，对应package.json中的main字段
        libraryTarget: 'umd',
        umdNamedDefine: true
    },
    module: {
        rules: [{
                test: /\.vue$/,  
                loader: 'vue-loader'
            },
            {
                test: /\.less$/,
                use: [
                    { loader: "style-loader" },
                    { loader: "css-loader" },
                    { loader: "less-loader" }
                ]
            },
            {
                test: /\.js$/,
                exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
                loader: 'babel-loader'
            },
            {
                test: /\.(png|jpg|gif|ttf|svg|woff|eot)$/,
                loader: 'url-loader',
                query: {
                    limit: 30000,
                    name: '[name].[ext]?[hash]'
                }
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            "process.env": {
                NODE_ENV: JSON.stringify("production")
            }
        })
    ]
};

7. 打包

注意，这里要修改package.json中的main字段指向的主文件信息

1
npm run build

修改package.json中的main字段

1
2
3
4
{
  ...
  "main": "dist/index.min.js" 
}

8. 忽略要上的文件

新建一个文件，名为.npmignore，是不需要发布到npm的文件和文件夹，规则和.gitignore一样。如果你的项目底下有.gitignore但是没有.npmignore，那么会使用.gitignore里面的配置

1
2
3
4
5
6
7
.*
*.md
*.yml
build/
node_modules/
src/
test/

9. 发布

先去npm注册一个账号 （一定要进行邮箱验证），然后进入根目录，运行 npm login

它会让你输入你的用户名，密码和邮箱，若登录成功，会显示：

1
Logged in as 你的名字 on https://registry.npmjs.org/.

接着执行 npm publish 发布到npm官网上

当你的包需要更新时，需要自己手动修改package.json中的version版本号，惯例是+1啦，比如1.0.0–>1.0.1。然后 npm login, npm publish。即可。

如果发现 npm login 不行，报 409 error，那么你可以考虑换下淘宝源

1
2
npm login --registry http://registry.npmjs.org
npm publish --registry http://registry.npmjs.org

node&npm version update

1
2
3
4
5
6
7
8
9
node -v
npm cache clean -f
npm install -g n

sudo n stable
sudo n latest
n [version.number]

sudo npm install -g npm@latest

张英姿前端工程师

梦里寻他千百度 蓦然回首 那人却在灯火阑珊处