npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

node-es6-module-template

v0.0.5

Published

node es6 module template

Downloads

4

Readme

node-es6-template

Usage

$ git clone [email protected]:rdmclin2/node-es6-template.git <your package name> && cd $_
$ rm -rf .git
$ echo "<your package name>" > README.md

Then modify the informations in package.json and create your repo in github, then

$ git init
$ git remote add origin <your repo origin>
$ git add .
$ git commit -m "first commit"
$ git push -u origin master
$ npm install 
$ npm publish

Add --registry=http://registry.npm.taobao.org when npm install if you are in china


Blog

本文主要记录基于ES6的Nodejs模块项目初始化的过程,主要参考ES2015 & babel 实战:开发 NPM 模块一文,原文比我写的详细的多,这里简略记录一下自己的配置过程,方便其他项目复制配置。项目文件详见node-es6-template

本文主要配置项为:

  • 使用Babel为项目提供使用ES6的能力
  • 接入babel-preset-stage-3 以支持使用async/await
  • 加入Eslint以控制代码风格和质量
  • 加入mocha配置单元测试的es6环境

初始化项目

$ mkdir node-es6-module-template && cd node-es6-module-template && git init && npm init

安装babel

为了能使用es2015以及async和await,新建文件.babelrc:

{
  "presets": ["es2015", "stage-3"]
}

安装babel插件:

$ npm i babel-preset-es2015 babel-preset-stage-3 --save-dev

安装polyfill:

$ npm i babel-polyfill --save-dev

要让babel正确编译需要在入口文件顶部添加require('babel-polyfill');

配置Eslint

$ npm install --save-dev eslint

然后配置

$ eslint --init

选择airbnb,json即可,为了让eslint能够识别es6的特性我们安装babel-eslint模块:

$ npm install babel-eslint@6 --save-dev

修改.eslintrc

{
    "extends": "airbnb",
    "parser": "babel-eslint",
    "parserOptions": {
         "sourceType": "module"
    },
    "env": {
        "mocha": true,
        "node": true
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "strict": 0,
        "semi": [2, "never"],
        "arrow-body-style": ["off", "always"],
        "no-console": 0,
        "eol-last": "off",
        "quotes": [2, "single", {"avoidEscape": true, "allowTemplateLiterals": true}]
        }
}

基本文件结构

新建srctest文件夹

$ mkdir src test

src中新建index.js文件 导出一个示例函数

export default function foo() {
  return 'foo'
}

可以用babel-node index.js进行测试

单元测试

为了让nodejs的require可以载入es6模块,需要babel-core

$ npm i babel-core mocha --save-dev

修改package.json的test命令

{
  "scripts": {
    "test": "mocha --compilers js:babel-core/register"
  }
}

在test文件夹中新建test.js文件,写入如下:

import foo from '../src'
import assert from 'assert'

describe('node-es6-template', () => {
  it('should return foo', done => {
    const output = foo()
    assert(output, 'foo')
    done()
  })
})

使用npm test进行测试

编译

package.json中增加compile命令

{
  "scripts": {
    "compile": "babel -d lib/ src/"
  }
}

新建入口文件index.js

require('babel-polyfill');
module.exports = require('./lib').default;

为了让我们能够测试转换后的lib中的模块, 修改test.js

import foo from '../src'

import foo from '../'

编辑package.json文件,将test命令改为先执行compile编译代码后再执行mocha测试

{
  "scripts": {
    "test": "npm run compile && mocha --compilers js:babel-core/register"
  }
}

可以用$ npm test测试

发布

添加.gitignore文件

node_modules
lib
logs
*.log
npm-debug.log*
coverage
.DS_Store

添加.npmignore取消源文件

src

在package.json设置中设置prepublish让其在发布前自动执行编译

{
  "scripts": {
    "prepublish": "npm run compile"
  }
}

善后

为了开发环境一致在本地安装mocha和babel

$ npm i babel-cli mocha --save-dev

更改package.json中的compile和test命令

{
  "scripts": {
    "compile": "./node_modules/.bin/babel -d lib/ src/",
    "test": "npm run compile && ./node_modules/.bin/mocha --compilers js:babel-core/register"
  }
}

可以用npm test进行测试,使用npm publish进行发布

参考资料