使用 es6 的模块风格重构代码

Author: lmk123

.eslintrc

@@ -4,9 +4,12 @@
     "ES6Promise": false,
     "chromeCall": false
   },
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module"
+  },
   "env": {
-    "browser": true,
-    "amd": true,
+    "node": true,
     "jasmine": true
   },
   "extends": [

.gitignore

@@ -1,2 +1,3 @@
 /node_modules/
 /coverage/
+/dist/

README.md

@@ -1,26 +1,53 @@
-# chrome call
+# chrome-call
 
 [![Build Status](https://img.shields.io/travis/Selection-Translator/chrome-call/master.svg?style=flat-square)](https://travis-ci.org/Selection-Translator/chrome-call)
 [![Coverage Status](https://img.shields.io/coveralls/Selection-Translator/chrome-call/master.svg?style=flat-square)](https://coveralls.io/github/Selection-Translator/chrome-call?branch=master)
 [![dependencies Status](https://img.shields.io/david/Selection-Translator/chrome-call.svg?style=flat-square)](https://david-dm.org/Selection-Translator/chrome-call)
 [![devDependencies Status](https://img.shields.io/david/dev/Selection-Translator/chrome-call.svg?style=flat-square)](https://david-dm.org/Selection-Translator/chrome-call?type=dev)
 [![NPM Version](https://img.shields.io/npm/v/chrome-call.svg?style=flat-square)](https://www.npmjs.com/package/chrome-call)
 
-A really simple way to call the original chrome javascript API and return a Promise.
+Call the original chrome javascript API and return a Promise.
 
 ## Install
 
+### Use with Webpack
+
+If you build your project with webpack, then you can install chrome-call from npm:
+
 ```
-npm i -S chrome-call
+npm install chrome-call
+```
+
+then you can import it in your project:
+
+```js
+// es6 
+import { call, scope } from 'chrome-call'
+
+// commonjs
+const { call, scope } = require('chrome-call')
+```
+
+### Use with <script>
+
+Download chrome-call.js from [unpkg](https://unpkg.com/chrome-call)([min version](https://unpkg.com/chrome-call/dist/chrome-call.min.js)), then reference it in your html:
+
+```html
+<script src="path/to/chrome-call.js"></script>
+<!-- now you will get a global variable named chromeCall -->
+<sciprt>
+  var call = chromeCall.call
+  var scope = chromeCall.scope
+</sciprt>
 ```
 
 ## Usage
 
 When you do:
 
 ```js
-var promise = new Promise(function (resolve, reject) {
-  chrome.storage.local.get('key', function (items) {
+const promise = new Promise((resolve, reject) => {
+  chrome.storage.local.get('key', items => {
     if(chrome.runtime.lastError){
       reject(chrome.runtime.lastError)
     } else {
@@ -33,7 +60,9 @@ var promise = new Promise(function (resolve, reject) {
 It's equal to:
 
 ```js
-var promise = chromeCall('storage.local.get', 'key')
+import { call } from 'chrome-call'
+
+const promise = call('storage.local.get', 'key')
 ```
 
 That's really simple, right?
@@ -45,21 +74,28 @@ Most of chrome API only has zero or one argument in callback, but someone not, s
 In this situation, pass `true` as the first argument, then the value of promise will be an __real__ Array:
 
 ```js
-chromeCall(true, 'hid.receive', connectionId)
-  .then(function (args) {
+import { call } from 'chrome-call'
+
+call(true, 'hid.receive', connectionId)
+  .then(args => {
     Array.isArray(args) // true
-    var reportId = args[0]
-    var data = args[1]
+    const reportId = args[0]
+    const data = args[1]
   })
 ```
 
 ### Scope
 
-The global `chromeCall` search function on `window.chrome`, but you can use different scope:
+The `call` method searches function on `window.chrome`, but you can use different scope:
 
 ```js
-var local = chromeCall.scope('storage.local') // or chromeCall.scope(chrome.storage.local)
-var promise = local('get', 'key')
+import { scope } from 'chrome-call'
+
+const callLocal = scope('storage.local') // or scope(chrome.storage.local)
+const promise = callLocal('get', 'key')
+
+const callHid = scope('hid') // or scope(chrome.hid)
+const promise2 = callHid(true, 'receive')
 ```
 
 ## License

build/build.js

@@ -0,0 +1,48 @@
+const path = require('path')
+const fs = require('fs-extra')
+
+// 清空输出目录
+fs.emptyDirSync(path.resolve(__dirname, '../dist'))
+
+// 编译 js
+const rollup = require('rollup')
+const buble = require('rollup-plugin-buble')
+const uglifyJS = require('uglify-js')
+const pkg = require('../package.json')
+
+const banner = [
+  '/*!',
+  ' * chrome-call v' + pkg.version,
+  ' * https://github.com/Selection-Translator/chrome-call',
+  ' * Released under the MIT License.',
+  ' */'
+].join('\n')
+
+rollup.rollup({
+  entry: path.resolve(__dirname, '../chrome-call.js'),
+  plugins: [buble()]
+}).then(bundle => {
+  // 输出 umd 格式
+  const { code } = bundle.generate({
+    format: 'umd',
+    moduleName: 'chromeCall',
+    banner
+  })
+
+  fs.writeFile(path.resolve(__dirname, '../dist/chrome-call.js'), code)
+  fs.writeFile(path.resolve(__dirname, '../dist/chrome-call.min.js'), uglifyJS.minify(code, { output: { comments: /^!/ } }).code)
+
+  // 输出 es 格式
+  bundle.write({
+    dest: path.resolve(__dirname, '../dist/chrome-call.esm.js'),
+    format: 'es',
+    banner
+  })
+
+  // 输出 cjs 格式
+  bundle.write({
+    dest: path.resolve(__dirname, '../dist/chrome-call.common.js'),
+    format: 'cjs',
+    banner
+  })
+})

chrome-call.js

@@ -1,108 +1,81 @@
-(function (root, factory) {
-  /* istanbul ignore next */
-  if (typeof module === 'object' && typeof module.exports === 'object') {
-    module.exports = factory()
-  } else if (typeof define === 'function' && define.amd) {
-    define([], factory)
-  } else {
-    root['chromeCall'] = factory()
-  }
-})(this, function () {
-  'use strict'
-  var runtime = chrome.runtime
+const { runtime } = chrome
 
-  /**
-   * 根据 base 对象返回指定路径的栈
-   * @param {String} path - 属性路径，可用点（.）分隔
-   * @param {Object} base - 开始查找的那个对象
-   * @returns {*[]}
-   *
-   * @example
-   *   pathStack('document.body',window) 应该返回 [window,window.document,window.document.body]
-   */
-  function pathStack (path, base) {
-    var keys = path.split('.')
-    var stack = [base]
+/**
+ * 根据 base 对象返回指定路径的栈
+ * @param {String} path - 属性路径，可用点（.）分隔
+ * @param {Object} base - 开始查找的那个对象
+ * @returns {*[]}
+ *
+ * @example
+ *   pathStack('document.body',window) 应该返回 [window,window.document,window.document.body]
+ */
+function pathStack (path, base) {
+  const keys = path.split('.')
+  const stack = [base]
 
-    keys.forEach(function (key, i) {
-      var val = stack[i][key]
-      if (!val) {
-        throw new Error('Cannot find "' + path + '".')
-      }
-      stack.push(val)
-    })
+  keys.forEach((key, i) => {
+    const val = stack[i][key]
+    if (!val) {
+      throw new Error('Cannot find "' + path + '".')
+    }
+    stack.push(val)
+  })
 
-    return stack
-  }
+  return stack
+}
+
+/**
+ * 根据基础对象返回一个函数，此函数会以基础对象为起点寻找指定属性并调用
+ * @param {String|Object} base
+ * @returns {Function}
+ */
+function scope (base) {
+  const baseObj = typeof base === 'string' ? pathStack(base, chrome).pop() : base
 
   /**
-   * 根据基础对象返回一个函数，此函数会以基础对象为起点寻找指定属性并调用
-   * @param {String|Object} base
-   * @returns {Function}
+   * 调用原本的 chrome api 并返回一个 Promise
+   * @param {Boolean} [returnArray] - 当函数的第一个值是 true 时，则 Promise 会返回一个数组，包含 callback 的所有参数
+   * @param {String} fnPath - 原本的 chrome api 的路径，相对于 chrome，如 storage.local.get
+   * @returns {Promise}
    */
-  function scope (base) {
-    var baseObj = typeof base === 'string' ? pathStack(base, chrome).pop() : base
-
-    /**
-     * 调用原本的 chrome api 并返回一个 Promise
-     * @param {Boolean} [returnArray] - 当函数的第一个值是 true 时，则 Promise 会返回一个数组，包含 callback 的所有参数
-     * @param {String} fnPath - 原本的 chrome api 的路径，相对于 chrome，如 storage.local.get
-     * @returns {Promise}
-     */
-    return function (/* returnArray , fnPath , ...args */) {
-      // inline copy arguments,
-      // see https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments
-      var length = arguments.length
-      var argumentsArray = []
+  return function (...args) {
+    let returnArray = args.shift()
+    let fnPath
 
-      for (var i = 0; i < length; i += 1) {
-        argumentsArray[i] = arguments[i]
-      }
-
-      var returnArray = argumentsArray.shift()
-      var fnPath
+    if (typeof returnArray === 'boolean') {
+      fnPath = args.shift()
+    } else {
+      fnPath = returnArray
+      returnArray = false
+    }
 
-      if (typeof returnArray === 'boolean') {
-        fnPath = argumentsArray.shift()
-      } else {
-        fnPath = returnArray
-        returnArray = false
-      }
+    // Step 1: find the function which need to be call
+    const stack = pathStack(fnPath, baseObj)
 
-      // Step 1: find the function which need to be call
-      var stack = pathStack(fnPath, baseObj)
+    return new Promise((resolve, reject) => {
+      // Step 2: inject callback
+      args.push((...results) => {
+        const { lastError } = runtime
+        if (lastError) {
+          reject(lastError)
+          return
+        }
 
-      var args = argumentsArray
-      return new Promise(function (resolve, reject) {
-        // Step 2: inject callback
-        args.push(function () {
-          var lastError = runtime.lastError
-          if (lastError) {
-            reject(lastError)
-            return
-          }
+        if (returnArray) {
+          resolve(results)
+        } else {
+          resolve(results[0])
+        }
+      })
 
-          if (returnArray) {
-            var length = arguments.length
-            var argumentsArray = []
+      // Step 3: call function with it's original "this"
+      stack.pop().apply(stack.pop(), args)
+    })
+  }
+}
 
-            for (var i = 0; i < length; i += 1) {
-              argumentsArray[i] = arguments[i]
-            }
+const call = scope(chrome)
 
-            resolve(argumentsArray)
-          } else {
-            resolve(arguments[0])
-          }
-        })
+export { scope, call }
 
-        // Step 3: call function with it's original "this"
-        stack.pop().apply(stack.pop(), args)
-      })
-    }
-  }
 
-  var defaultCp = scope(chrome)
-  defaultCp.scope = scope
-  return defaultCp
-})

karma.conf.js

@@ -9,9 +9,17 @@ module.exports = function (config) {
       'test/test.js'
     ],
     preprocessors: {
-      'chrome-call.js': ['coverage']
+      'chrome-call.js': ['rollup', 'coverage']
     },
     reporters: ['progress', 'coverage'],
+    rollupPreprocessor: {
+			plugins: [
+				require('rollup-plugin-buble')(),
+			],
+			format: 'iife',
+			moduleName: 'chromeCall',
+			sourceMap: 'inline',
+		},
     coverageReporter: {
       dir: 'coverage',
       reporters: [