NPM Publish

Initial Project

1
2
3
4
5
6
7
8
9
10
$ mkdir publishDemo
$ yarn init
// question name (publishDemo):
// question version (1.0.0):
// question description: publishdemo
// question entry point (index.js):
// question repository url:
// question author: Tomas
// question license (MIT):
// success Saved package.json

初始化結束後會增加一個 package.json

1
2
3
4
5
6
7
8
{
  "name": "publishDemo",
  "version": "1.0.0",
  "description": "publishdemo",
  "main": "index.js",
  "author": "Tomas",
  "license": "MIT"
}

Create index.js

1
module.exports = 'hello world';

publish

1
2
$ npm login
// 登入 NPM 的帳號並且驗證信箱
1
2
$ npm publish
+ publishdemotest@1.0.0

npm publish success

add Gulp

gulpfile.js

1
$ mkdir src && mv index.js ./src
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const gulp = require("gulp");
const babel = require("gulp-babel");

gulp.task("compile", () => {
  return gulp
    .src("./src/**/*.js")
    .pipe(
      babel({
        presets: ["es2015", "stage-2"],
        plugins: []
      })
    )
    .pipe(gulp.dest("./build"));
});

gulp.task("default", ["compile"]);

1
2
3
4
5
6
7
8
9
10
$ gulp
// result
.
├── build
│   └── index.js
├── gulpfile.js
├── package.json
├── src
│   └── index.js
└── yarn.lock

Git

.gitignore

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
# Logs
logs
*.log
npm-debug.log*

# Runtime data
pids
*.pid
*.seed

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# node-waf configuration
.lock-wscript

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

# Dependency directory
# https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
node_modules
build

publishdemo

update NPM version and main

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "name": "publishdemotest",
  "version": "1.0.1",
  "description": "publishdemo",
  "main": "./build/index.js",
  "author": "Tomas",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "gulp": "^3.9.1",
    "gulp-babel": "^7.0.0"
  }
}

重新 publish

1
2
$ npm publish
//+ publishdemotest@1.0.1

這時如果我在其他專案從 NPM 下載結果如下圖

1
$ yarn add publishdemotest
1
2
3
4
5
6
7
8
9
  $ tree ./node_modules/publishdemotest
  //result

./node_modules/publishdemotest
├── gulpfile.js
├── package.json
├── src
│   └── index.js
└── yarn.lock

並沒有build 這個 folder

但是因為在 package.json 中我們將進入點設定為 ./build/index.js

所以會造成我們引入時的錯誤

NPM 會自動將 .gitignore 設定為預設的設定檔案

但是我們希望可以有其他的設定

我們可以增加一個 .npmignore

1
2
3
4
5
6
7
# Logs
logs
*.log
npm-debug.log*
node_modules

*error*

我們將build 移除在 .npmignore 中

再將 package.json 的version 升級

再重新publish 一次

在 Demo 的 project 升級 package

1
$ yarn upgrade publishdemotest
1
2
3
4
5
6
7
8
9
10
$ tree node_modules/publishdemotest

node_modules/publishdemotest
├── build
│   └── index.js
├── gulpfile.js
├── package.json
├── src
│   └── index.js
└── yarn.lock

透過 .npmignore 就可以達到我們需要的效果

同樣如果不希望使用者還需要安裝相關套件

也可以把 node_modules 移除 .npmignore 中

如此使用者就不需要安裝相關套件

也可以達到鎖定版本的效果

License

本文採用 署名-非商業性使用-相同方式共享 4.0 國際 許可協議，轉載請註明出處。