NPM publish with gulp

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 中

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

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

本文标题:NPM publish with gulp

文章作者:

发布时间:2017-08-31, 09:01:45

最后更新:2024-07-26, 00:40:45

原始链接:https://horsekitlin.github.io/2017/08/31/NPM-Publish-With-Gulp/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
  1. 1. NPM Publish
    1. 1.1. Initial Project
      1. 1.1.1. Create index.js
      2. 1.1.2. publish
    2. 1.2. add Gulp
      1. 1.2.1. Git
      2. 1.2.2. update NPM version and main
      3. 1.2.3. 重新 publish
|