nata-dfs

node-es6-template

本文主要记录基于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}]
        }
}

基本文件结构

新建src和test文件夹

$ 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进行发布

参考资料

• ES2015 & babel 实战：开发 NPM 模块
• ESLint官网
• babel-eslint