babel로 컴파일 된 npm 모듈을 TravisCI에서 릴리스

처음으로 npm 패키지를 만들어 보면서 여러 가지 일이 있었기 때문에 메모합니다.
ES2015 코드로 개발하고 babel로 ES5로 컴파일합니다.

여기에 움직이는 코드는 놓여 있습니다. htps : // 기주 b. 코 m / 모오 kjp / 무 l 치 p 여 xy

전제

babel을 사용하여 다음과 같은 패키지 구성으로 ES2015에서 npm 모듈을 개발한다고 가정합니다.

.
├── dist # babelでコンパイルしたコードを配置
├── package.json
└── src # ES2015のコードを配置
    ├── main
    │   ├── lib
    │   ├── main.js
    │   └── middleware
    └── test
        ├── lib
        └── middleware

패키지 설정

package.json

"scripts" 에 babel-cli 를 사용하여 ES2015 코드를 컴파일하는 프로세스를 추가합니다.
또, "main" 에는 컴파일 후의 코드를 지정합니다.

// 省略
"main": "dist/main.js", # babelでコンパイルしたコード
"scripts": {
// 省略
    "build": "babel src/main -d dist" # dist以下に出力
},
"devDependencies": {
    "babel-cli": "^6.3.17",
    // 省略、テスト用パッケージ等
}

.gitignore

ES2015에서 개발하고 있는 모듈이므로, babel로 컴파일한 후의 코드는 버전 관리는 불필요하다고 생각합니다..gitignore 에 babel로 컴파일한 코드를 포함하지 않도록 합니다.

// 省略
dist/

.npmignore

npm publish 때 패키지의 루트 디렉터리

.npmignore 없음

.gitignore 있다

.gitignore 에서 무시된 파일은 npm publish 때때로 무시됩니다.
(참고: 개발자 | npm Documentation )

이번에는

npm 모듈은 dist/ 아래에 빌드 된 ES5 파일을 배포하고 싶습니다

반대로 git 저장소에 포함 된 ES2015 소스 코드는 무시하고 싶습니다

그래서 다음과 같은 .npmignore 를 씁니다.

// 省略
# dist/
src/ # ES2015のソースコードが配置されているディレクトリ

TravisCI 설정

.travis.yml

deploy 단계를 설정합니다.
다음 예제에서는 TravisCI가 표준으로 제공하는 npm 패키지를 배포할 수 있는 provider를 그대로 사용합니다.

language: node_js
node_js:
    - "4.1"
after_success:
  - npm run-script build
deploy:
  provider: npm
  email: "[email protected]"
  api_key: $NPM_API_KEY
  skip_cleanup: true # `run-script build`で生成したES5のコードを消さないようにする
  on:
    tags: true

TravisCI 프로젝트 설정

TravisCI의 프로젝트 별 환경 변수 설정 항목에 $NPM_API_KEY를 미리 설정하십시오.
프로젝트 설정은 h tps://t 등ゔぃs-해. 오 rg / r 우세 r 핥기 / p 로지 ct / 의 오른쪽에 settings 라는 링크가 있으므로 거기에서 할 수 있습니다.


$NPM_API_KEY 는 자신의 컴퓨터에서 npm login 후 다음 명령에서 확인할 수 있습니다.

cat ~/.npmrc
//registry.npmjs.org/:_authToken=<Your key>

babel6의 default export 취급 정보

babel6에서는 export default로 export 한 모듈에 require로 액세스 할 때의 거동이 바뀌었습니다.
다음과 같이 ES2015의 export default를 사용했을 때는

mybar.js

export default myVar;

아래와 같이 require 로 취득한 오브젝트의 default 를 참조할 필요가 있습니다.

importing.js

// var myVar = require('myVar'); これはbabel6からは使えない

var myVar = require('myVar').default; // defaultオブジェクトを指定する

이번에 예로 하고 있는 프로젝트를 babel6 를 사용해 컴파일할 때는, src/main/main.js 를 이하와 같이 쓸 수가 있습니다.
이것은 ES5 코드이므로 babel 컴파일러를 통해서도 그대로 dist/main.js에 쓰여집니다.

src/main/main.js

module.exports = require('./lib/my_util').default; // ユーザー側からrequireを使ってアクセスされるであろうモジュール

npm 모듈의 사용자는 평소와 같이 감각으로 require를 사용할 수 있습니다.

npm install great-package

main-by-user.js

var myUtil = require('great-package');