Создание пакетов NPM на основе Webpack и ES6

использоватьES6написать код, использоватьWebpackУпакуйте и экспортируйте модуль и опубликуйте его в сообществе NPM, добавьте на основеTravis-CIа такжеCoverallsпостоянная интеграция в проект Github

характеристика

на основеWebpack 4
Напишите исходный код, используя ES6
Поддержка модуля:
- Используется в среде браузера через<script>тег для импорта этой библиотеки
- пройти черезNPMУстановите и используйте
- Модульная система, совместимая с ES6 (ES2015),CommonJSа такжеAMDСпецификация модуля
использоватьAVAавтоматизация тестирования и прохождениеnycПокрытие тестового кода
Непрерывная интеграция (Travis-CI + Coveralls)
использоватьESLint + StandradПроверить качество кода

Инициализация проекта

1. Создайте репозиторий иcloneк местному

$ git clone https://github.com/eteplus/typeof

2. Добавьте .editorconfig

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.yml]
indent_style = space
indent_size = 2

3. Создайте каталог

+-- src 源码目录
|   +-- typeof.js
|   +-- types.js
+-- test 测试用例
|   +--- test.js
+-- dist 输出目录
.
.

4. Создайте package.json

использоватьОбъем НПМУправляйте модулями выпуска, избегайте модулей с одинаковыми именами, обычно используйтеимя пользователязарегистрировать приватные модули (@eteplus/<package name>)

$ npm init --scope=eteplus

package name: (@eteplus/typeof)
version: (1.0.0) 0.1.0
description: The typeOf method returns a string indicating the type of the value
entry point: (index.js) dist/typeof.js
test command:
git repository: https://github.com/eteplus/typeof.git
keywords: node,javascript,typeof
author: eteplus
license: (ISC) MIT
About to write to /Users/eteplus/Workspace/Node/study/typeof/package.json:

{
  "name": "@eteplus/typeof",
  "version": "0.1.0",
  "description": "The typeOf method returns a string indicating the type of the value",
  "main": "dist/typeof.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/eteplus/typeof.git"
  },
  "keywords": [
    "node",
    "javascript",
    "typeof"
  ],
  "author": "eteplus",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/eteplus/typeof/issues"
  },
  "homepage": "https://github.com/eteplus/typeof#readme"
}

5. Инициализация ESLint

Создано автоматически.eslintrc.jsфайл и установить соответствующие зависимости (вы можете выбрать спецификацию кода в соответствии с вашими предпочтениями)

Установить ESlint

# or use yarn
$ npm install eslint -D

$ npm install eslint -g # 全局安装ESLint
$ eslint --init

? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? Standard
? What format do you want your config file to be in? JavaScript

Добавить к.eslintignoreфайл игнорирует обнаружение кода для выходного каталога

dist/

6. Создайте файлы конфигурации для webpack и babel

Установите связанные зависимости:

$ npm install webpack webpack-cli uglifyjs-webpack-plugin -D
$ npm install babel-loader babel-core babel-plugin-transform-runtime babel-preset-env -D
$ npm install eslint-loader eslint-friendly-formatter -D

Создайтеwebpack.config.js:

Описание элемента конфигурации вывода webpackВеб-пакет Просто .org/config как у ATI...

'use strict'

const path = require('path')
const webpack = require('webpack')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

const resolve = dir => path.join(__dirname, '.', dir)

const isProd = process.env.NODE_ENV === 'production'

module.exports = {
  entry: {
    typeof: './src/typeof.js'
  },
  output: {
    path: resolve('dist'), // 输出目录
    filename: '[name].js', // 输出文件
    libraryTarget: 'umd', // 采用通用模块定义
    library: 'typeOf', // 库名称
    libraryExport: 'default', // 兼容 ES6(ES2015) 的模块系统、CommonJS 和 AMD 模块规范
    globalObject: 'this' // 兼容node和浏览器运行，避免window is not undefined情况
  },
  devtool: '#source-map',
  module: {
    rules: [
      {
        test: /\.(js)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src'), resolve('test')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /(node_modules)/
      }
    ]
  },
  plugins: isProd
    ? [
      new UglifyJsPlugin({
        parallel: true,
        uglifyOptions: {
          compress: {
            warnings: false
          },
          mangle: true
        },
        sourceMap: true
      })
    ]
    : [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NamedModulesPlugin(),
      new webpack.NoEmitOnErrorsPlugin()
    ]
}

Создайте.babelrc:

Помощники и полифиллы включаются/отключаются в зависимости от реальной ситуации, см. конкретную конфигурацию (babel-plugin-transform-runtime)

{
  "presets": ["env"],
  "plugins": [
    ["transform-runtime", {
      "helpers": false,
      "polyfill": false
      }
    ]
  ]
}

7. Добавьте команду npm

добавить в package.jsonнпм-команда, выполнить задачу через npm run [имя]

{
  "scripts": {
    "dev": "NODE_ENV=development webpack --config webpack.config.js --mode=development -w",
    "build": "NODE_ENV=production webpack --config webpack.config.js --mode=production",
    "lint": "eslint ."
  }
}

Тестирование и покрытие кода

использоватьAVA + nycАвтоматизированное тестирование и тестирование покрытия кода

1. УстановкаAVAа такжеnyc

$ npm install ava nyc -D

2. Добавьте конфигурацию ava и nyc в package.json.

AVA:

файлы: файлы вариантов использования для тестирования
verbose: включить подробный вывод
babel: конфигурация babel для тестовых файлов, «наследовать» использует .babelrc в корневом каталоге
require: перед запуском тестов требуются дополнительные модули

Другие элементы конфигурации:

официальная документация

Нью-Йорк:

официальная документация

{
  "ava": {
    "files": [
      "test/test.js"
    ],
    "verbose": true,
    "babel": "inherit",
    "require": [
      "babel-core/register"
    ]
  },
  "nyc": {
    "exclude": [
      "test/*.js"
    ]
  }
}

3. Добавьте команду npm

{
  "scripts": {
    ...
    "test": "npm run lint && nyc ava",
    "test:watch": "ava --watch"
  }
}

Непрерывная интеграция Travis CI

1. Войдите в Travis-CI

travis-ci.org, используйте авторизацию Github для входа

2. Добавить репо

3. Создать`.travis.yml`

Добавьте в корневой каталог проекта.travis.yml

проиллюстрировать:

язык определяет язык разработки
node_js указывает номер версии node.js

Другие элементы конфигурации:

Официальная справочная документация

language: node_js
node_js:
- '9'
- '8'
- '7'

4. Отправить`.travis.yml`

представить.travis.ymlПерейти к GitHub, Trvis-CI автоматически запускает непрерывную интеграцию на основе коммитов, вы можете отменить автоматическое запуск непрерывной интеграции на основе коммитов в настройках

5. Получить значок

Значок «Получить результаты непрерывной интеграции» добавлен кREADME.mdсередина

Комбинезоны с тестовым покрытием

1. Войдите в комбинезон

coveralls.io, используйте авторизацию Github для входа

2. Добавить репо

3. Зашифровать repo_token

В целях безопасности repo_token не следует записывать открытым текстом..travis.ymlкомбинезон предоставляет способ асимметричного шифрования repo_token

использоватькомандный инструмент трэвисашифрование

# 更改为国内的安装源
$ gem sources --add https://gems.ruby-china.org/ --remove https://rubygems.org/
$ gem sources -l

# 安装travis
$ sudo gem install travis -v 1.8.8 --no-rdoc --no-ri
$ travis version
1.8.8

# 加密
travis encrypt COVERALLS_REPO_TOKEN=your_repo_token

добавить зашифрованныйsecureприбыть.travis.yml

Исправлять.travis.yml, установите переменную среды env (один из методов безопасности repo_token, предоставляемых travis), вы также можете использовать--addавтоматически добавляется в.travis.ymlсередина.

4. Установите комбинезоны и добавьте команду npm

установить комбинезон

$ npm install coveralls -D

добавить команду нпм

nycСоздайте отчет о покрытии, чтобы отправить егоcoveralls

{
  "scripts": {
    ...
    "coverage": "nyc report --reporter=text-lcov | coveralls"
  }
}

5. Модификация`.travis.yml`

Добавить кafter_success: npm run coverage

after_success: Выполняется при успешном выполнении этапа сценария. Сценарий по умолчанию для этапа сценарияnpm test, можно опустить

Повторно отправьте на Github, запустите непрерывную интеграцию, чтобыcoveralls.ioПросматривайте отчеты о покрытии и добавляйте значки на README.md

Публикация модулей в сообществе NPM

1. Упаковка кода

$ npm run build

2. Добавить учетную запись

нужно приехать первымwww.npmjs.comзарегистрировать аккаунт

$ npm adduser
Username: your username
Password: your password
Email: your email

3. Опубликовать

Пакеты с незаданной областью всегда общедоступны. Существуют области, которые ограничены по умолчанию и могут использоваться с–-access publicПри публикации установите разрешение на общедоступность

$ npm publish --access public

Правило номера версии сообщества npm использует semver (семантическая версия).Основные правила следующие:

Формат версии: основной номер версии, дополнительный номер версии, номер редакции.

Правила увеличения номера версии следующие:

Номер основной версии: когда вы вносите несовместимое изменение API,
Второстепенный номер версии: Когда вы делаете обратно совместимые функциональные дополнения,
Номер редакции: при исправлении ошибки для обратной совместимости.
Номер предыдущей версии и информация о компиляции версии могут быть добавлены в конце «основной номер версии. дополнительный номер версии. номер редакции» в качестве расширения.

Добавить персональный значок

рекомендоватьshields.io/

Добавляйте различные значки к таким предметам, как:

Прохождение теста и покрытие кода
последняя версия проекта
Использование проекта
стиль кода
Лицензия проекта с открытым исходным кодом

пример проекта

Этот проект содержит всю полную конфигурацию учебника.

Адрес на гитхабе:GitHub.com/etprussia/трейлерная бутылка…

Ссылки по теме

Webpack
AVA
nyc
Travis-CI
Coveralls
Учебное пособие Travis CI по службе непрерывной интеграции

характеристика

Инициализация проекта

1. Создайте репозиторий иcloneк местному

2. Добавьте .editorconfig

3. Создайте каталог

4. Создайте package.json

5. Инициализация ESLint

6. Создайте файлы конфигурации для webpack и babel

7. Добавьте команду npm

Тестирование и покрытие кода

1. УстановкаAVAа такжеnyc

2. Добавьте конфигурацию ava и nyc в package.json.

3. Добавьте команду npm

Непрерывная интеграция Travis CI

1. Войдите в Travis-CI

2. Добавить репо

3. Создать.travis.yml

4. Отправить.travis.yml

5. Получить значок

Комбинезоны с тестовым покрытием

1. Войдите в комбинезон

2. Добавить репо

3. Зашифровать repo_token

4. Установите комбинезоны и добавьте команду npm

5. Модификация.travis.yml

Публикация модулей в сообществе NPM

1. Упаковка кода

2. Добавить учетную запись

3. Опубликовать

Добавить персональный значок

пример проекта

Ссылки по теме

3. Создать`.travis.yml`

4. Отправить`.travis.yml`

5. Модификация`.travis.yml`