npm と仲良くなりたかったので、小さい node package をつくって、require したり babel で import したり

8024 ワード
babel npm npm テキストリンク

npm と仲良くなりたかったので、小さいの作って戯れてみました。

小さいパッケージ作成はこちらの記事をやっただけです。とても良い記事でした、ありがとうございます。
https://medium.freecodecamp.org/how-to-make-a-beautiful-tiny-npm-package-and-publish-it-2881d4307f78

まずは最小のパッケージを作ります

まず、npm のアカウント持って無い人は作ります。正直これが一番時間かかります。アイコンどうしようってなります。Gravatar アカウントが無いので困ります。

Sign up
https://www.npmjs.com/signup

アカウントができたら、あとは２つのファイルを書いて、publish したら終わります。

$ touch package.json
$ touch index.js
package.json
{
    "name": "@mochizukikotaro/tiny",
    "version": "2.0.0",
    "description": "Remove all spaces",
    "main": "index.js"
}
index.js
module.exports = function tiny(string) {
  if (typeof string != "string") throw new TypeError("Tiny wants a string!");
  return string.replace(/\s/g, "");
}

文字列を引数に渡すと、全てのスペースを削除する function です。

$ npm adduser
// or 
$ npm login
$ npm publish --access=public

つかってみる in node

$ npm i @mochizukikotaro/tiny
$ node
> const tiny = require("@mochizukikotaro/tiny")
undefined
> tiny("a b")
'ab'

無事動きました。

import してみる

node では import が使えませんので以下のようになります。

$ node
> import tiny from "@mochizukikotaro/tiny"
import tiny from "@mochizukikotaro/tiny"
       ^^^^

SyntaxError: Unexpected identifier

babel を使ってみます。
https://babeljs.io/setup#installation

$ npm init
$ npm install --save-dev @babel/core @babel/cli
$ touch .babelrc
$ touch piyo.js
.babelrc
{
  "presets": ["@babel/preset-env"]
}
piyo.js
import tiny from "@mochizukikotaro/tiny"
console.log(tiny("a b"))

babel でトランスパイラすると下のようになります。

$ babel piyo.js
"use strict";

var _tiny = _interopRequireDefault(require("@mochizukikotaro/tiny"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

console.log((0, _tiny.default)("a b"));

// アウトプットファイルが欲しい場合
$ babel piyo.js -d output_dir

これで得られるトランスパイラされたコードはもちろん node output_dir/piyo.js などで動きます。

npx babel-node してみる

import を含んだ piyo.js を 

$ node piyo.js

のように動かしてみたいと思います。

$ npm i --save-dev @babel/node
$ npx babel-node piyo.js
ab

動きました。

少しずつ仲良くなっていきたいと思います。TypeScript からも呼んでみたいです。

A*イニシアチブ検索テンプレート
HandlerMethodArgumentResolver(パラメータ解析器)の役割+使用事例