jtaro-module - npm Package Compare versions

Comparing version 0.2.8 to 0.3.1

package.json

 {
   "name": "jtaro-module",
-  "version": "0.2.8",
+  "version": "0.3.1",
   "description": "Explain the ES6 module to Es5 syntax",
-  "main": "index.js",
+  "main": "src/server.js",
   "scripts": {
@@ -26,5 +26,8 @@ "default": "node src/server.js 3001",
     "babel-preset-es2015": "^6.24.0",
-    "eslint": "^3.9.1",
-    "eslint-config-vue": "^2.0.0",
-    "eslint-plugin-vue": "^1.0.0",
+    "eslint": "^4.19.1",
+    "eslint-config-standard": "^11.0.0",
+    "eslint-plugin-import": "^2.11.0",
+    "eslint-plugin-node": "^6.0.1",
+    "eslint-plugin-promise": "^3.7.0",
+    "eslint-plugin-standard": "^3.1.0",
     "rollup": "^0.38.0",
@@ -34,3 +37,6 @@ "rollup-plugin-babel": "^2.7.1",
     "rollup-plugin-paths": "0.0.1"
+  },
+  "dependencies": {
+    "socket.io": "^2.1.0"
   }
 }

README.md

@@ -37,2 +37,4 @@ # JTaro Module
 4. 在浏览器上运行`localhost:3000/index.html`，所有js文件都会被拦截，所有符合条件的import/export将会被转换
+5. 监听文件变化自动刷新浏览器`node node_modules/jtaro-module/src/server.js --watch=.`，watch后面参数是以`.`开头的相对路径，相对于当前执行命令的目录，例：`.`、`..`、`./src`，该路径表示要监听的目录。
+6. 若需要监听文件变化自动刷新浏览器，必须自行将客户端的`socket.io.js`在`client.js`之前引入。了解socket.io请看[https://socket.io/docs/](https://socket.io/docs/)
 
@@ -200,2 +202,4 @@ 建议使用[Visual Studio Code](https://code.visualstudio.com/)进行开发，可直接在编辑器开启nodejs服务
 
+> __注意：__`import`语句必须单独成行
+
 ```js
@@ -202,0 +206,0 @@ // 1、花括号变量

src/client.js

@@ -1,3 +0,3 @@
-/*! JTaro-Module client.js v0.2.3 ~ (c) 2017 Author:BarZu Git:https://github.com/chjtx/JTaro-Module/ */
-/* global XMLHttpRequest */
+/*! JTaro-Module client.js v0.3.0 ~ (c) 2017-2018 Author:BarZu Git:https://github.com/chjtx/JTaro-Module/ */
+/* global io */
 /**
@@ -95,20 +95,9 @@ * 保证先执行依赖文件的实现思路
   loader = {
-    // 同步加载
-    ajax: function (path, callback) {
-      var xhr = new XMLHttpRequest()
-      xhr.onreadystatechange = function () {
-        if (xhr.readyState === XMLHttpRequest.DONE) {
-          callback(xhr.responseText)
-        }
-      }
-      xhr.open('GET', path, true)
-      xhr.send()
-    },
     // 路径处理
     path: {
-      dirname: function (p) {
+      dirname (p) {
         return p.substr(0, p.lastIndexOf('/'))
       },
-      resolve: function (p) {
-        var currentScript = document.currentScript && document.currentScript.src || document.baseURI.split('?')[0].split('#')[0]
+      resolve (p) {
+        var currentScript = (document.currentScript && document.currentScript.src) || document.baseURI.split('?')[0].split('#')[0]
         var d = this.dirname(currentScript)
@@ -139,3 +128,3 @@ var path
     // 判断脚本是否存在
-    isExist: function (path) {
+    isExist (path) {
       var exist
@@ -151,3 +140,3 @@ var scripts = document.getElementsByTagName('script')
     },
-    importJs: function (result) {
+    importJs (result) {
       var me = this
@@ -174,8 +163,10 @@ var script = me.isExist(result.path)
     // 将路径转换成id
-    path2id: function (path) {
+    path2id (path) {
       return path.substr(0, path.lastIndexOf('.')).replace(/\//g, '_')
     },
-    importHtml: function (result) {
+    importHtml (result) {
       var me = this
-      this.ajax(result.src, function (data) {
+      window.fetch(result.src).then((res) => {
+        return res.text()
+      }).then(data => {
         var reg = /<style>([\s\S]+)<\/style>/
@@ -194,3 +185,3 @@ var styleText = reg.exec(data)
               // 以.#[*和字母开头的选择器前面加上jtaro标识
-              .replace(/(^|{|})\s*([.#a-zA-Z\[*][^{}]+)?{/g, function (match, m1, m2) {
+              .replace(/(^|{|})\s*([.#a-zA-Z[*][^{}]+)?{/g, function (match, m1, m2) {
                 var selector = (m2 || '').trim()
@@ -208,3 +199,3 @@ // from和to是@keyframes的关键词，不能替换
               // 拆分用逗号分隔的选择符并加上jtaro标识，例：h1, h2, h3 {}
-              .split(/,\s+(?=[.#a-zA-Z\[*])/).join(',\n[jtaro' + id + '] ')
+              .split(/,\s+(?=[.#a-zA-Z[*])/).join(',\n[jtaro' + id + '] ')
               // 还原<mark>
@@ -237,5 +228,7 @@ .replace(/<mark>/g, ',')
     },
-    importCss: function (result) {
+    importCss (result) {
       var id = 'jtaro_css' + this.path2id(result.src)
-      this.ajax(result.src, function (data) {
+      window.fetch(result.src).then((res) => {
+        return res.text()
+      }).then(data => {
         var link = document.getElementById(id)
@@ -252,3 +245,3 @@ if (!link) {
     // 引入模块
-    import: function (path, callback) {
+    'import' (path, callback) {
       var result = this.path.resolve(path)
@@ -296,4 +289,10 @@ var child = {
   }
+  if (typeof io === 'function') {
+    const socket = io(document.baseURI)
+    socket.on('fileChange', () => {
+      window.location.reload()
+    })
+  }
 
   window.JTaroLoader = loader
 })()

src/parse.js

@@ -1,2 +0,2 @@
-/*! JTaro-Module parse.js v0.2.8 ~ (c) 2017 Author:BarZu Git:https://github.com/chjtx/JTaro-Module/ */
+/*! JTaro-Module parse.js v0.3.0 ~ (c) 2017-2018 Author:BarZu Git:https://github.com/chjtx/JTaro-Module/ */
 /**
@@ -24,3 +24,3 @@ * JTaro Module
 function getExports (text) {
-  return text.match(/^[\t ]*export\s+.*/mg)
+  return text.match(/([\t ]*export +[^{\n\r]+)|([\t ]*export +\{[^}]+\})/g)
 }
@@ -40,3 +40,3 @@
   })
-  return d + '/' + p
+  return (d + '/' + p).replace(/\\/g, '/')
 }
@@ -64,3 +64,3 @@
     // return b ? getRelativePath(plugins.id, b) : a
-    return b || a
+    return (b || a).replace(/\\/g, '/')
   }
@@ -115,15 +115,15 @@
   return {
-    imports: newArr,
-    exports: varArr
+    imps: newArr,
+    exps: varArr
   }
 }
 
-function joinImports (exports) {
-  if (!exports.length) {
+function joinImports (exps) {
+  if (!exps.length) {
     return ''
   }
   var s = ', ['
-  exports.forEach((item, index) => {
+  exps.forEach((item, index) => {
     s += 'JTaroModules[\'' + item.name + '\']' + item.variable
-    if (index !== exports.length - 1) {
+    if (index !== exps.length - 1) {
       s += ', '
@@ -135,7 +135,7 @@ }
 
-function joinVariables (exports) {
+function joinVariables (exps) {
   var s = ''
-  exports.forEach((item, index) => {
+  exps.forEach((item, index) => {
     s += item.alias
-    if (index !== exports.length - 1) {
+    if (index !== exps.length - 1) {
       s += ', '
@@ -149,8 +149,8 @@ }
   return '(function (f) {JTaroAssets[\'' + name + '\'] = 1;' +
-    'var g = function () { f.apply(null' + joinImports(loaders.exports) + ')};' +
-    loaders.imports.join(';') +
-    '})(function (' + joinVariables(loaders.exports) + ') {\n'
+    'var g = function () { f.apply(null' + joinImports(loaders.exps) + ')};' +
+    loaders.imps.join(';') +
+    '})(function (' + joinVariables(loaders.exps) + ') {\n'
 }
 
-function nodeImport (a, f, h) { // (imports, file, header)
+function nodeImport (a, f, h) { // (imps, file, header)
   var t
@@ -258,3 +258,3 @@ for (var i = 0, l = a.length; i < l; i++) {
   // 提取import
-  var imports = getImports(copy)
+  var imps = getImports(copy)
 
@@ -265,21 +265,21 @@ var loaders = []
 
-  if (imports) {
+  if (imps) {
     // 转换成JTaroLoader.import
-    loaders = parseImport(imports, name, plgs)
+    loaders = parseImport(imps, name, plgs)
     // 头部
     header = mixHeader(loaders, name)
     // 注释已转换的import
-    file = nodeImport(imports, file, header) + '\n})'
+    file = nodeImport(imps, file, header) + '\n})'
   }
 
   // 提取export
-  var exports = getExports(copy)
+  var exps = getExports(copy)
 
-  if (exports) {
+  if (exps) {
     // 只有export没有import也需要使用闭包
-    if (!imports) {
+    if (!imps) {
       file = '!function(){' + file + '\n}()'
     }
 
-    exportMaps = getExportMaps(exports, name)
+    exportMaps = getExportMaps(exps, name)
     exportMaps.forEach((item, index) => {
@@ -286,0 +286,0 @@ if (index === 0) {

src/server.js

@@ -1,11 +0,17 @@
-/*! JTaro-Module server.js v0.2.6 ~ (c) 2017 Author:BarZu Git:https://github.com/chjtx/JTaro-Module/ */
-var fs = require('fs')
-var path = require('path')
-var http = require('http')
-var url = require('url')
-var jtaroModule = require('./parse')
-var port = 3000 // 默认端口
-var configPath = './jtaro.module.config' // 默认配置文件
-var hasConfigFile = false
+/*! JTaro-Module server.js v0.3.0 ~ (c) 2017-2018 Author:BarZu Git:https://github.com/chjtx/JTaro-Module/ */
+const fs = require('fs')
+const path = require('path')
+const http = require('http')
+const url = require('url')
+const socketio = require('socket.io')
+const jtaroModule = require('./parse')
+const cwd = process.cwd()
 
+let port = 3000 // 默认端口
+let configPath = './jtaro.module.config' // 默认配置文件
+let watchPath = '' // 默认不监听
+let hasConfigFile = false
+let fileChangeTime = 0 // 防抖
+let socket = null
+
 // 截取命令
@@ -28,6 +34,11 @@ for (var i = 2; i < process.argv.length; i++) {
   }
+  // 监听文件 --watch="./src"
+  if (/^--watch=/.test(process.argv[i])) {
+    watchPath = process.argv[i].replace('--watch=', '')
+      .replace(/^("|')|("|')$/g, '').trim()
+  }
 }
 
 // 如果存在配置文件，使用rollupjs的插件过滤文件内容
-var config = {}
+let config = {}
 fs.access(path.join(__dirname, configPath + '.js'), function (err) {
@@ -43,3 +54,3 @@ if (!err) {
 function runServer () {
-  var mime = {
+  const mime = {
     'css': 'text/css',
@@ -65,12 +76,12 @@ 'gif': 'image/gif',
 
-  http.createServer((req, res) => {
-    var parseURL = url.parse(req.url)
-    var pathname = parseURL.pathname
+  const server = http.createServer((req, res) => {
+    const parseURL = url.parse(req.url)
+    let pathname = parseURL.pathname
     if (/\/$/.test(pathname)) {
       pathname = pathname + 'index.html'
     }
-    var ext = path.extname(pathname)
-    var realPath = '.' + pathname
+    let ext = path.extname(pathname)
+    const realPath = '.' + pathname
     ext = ext ? ext.slice(1) : 'unknown'
-    var contentType = mime[ext] || 'text/plain'
+    const contentType = mime[ext] || 'text/plain'
 
@@ -102,5 +113,58 @@ fs.stat(realPath, (err, stats) => {
     })
-  }).listen(port)
+  })
+
+  const io = socketio(server)
+  server.listen(port)
+
+  io.on('connection', function (s) {
+    socket = s
+  })
+
+  // 监听文件变化
+  function watchFiles (dir) {
+    const w = fs.watch(dir, (event, filename) => {
+      const p = path.resolve(dir, filename)
+      if (event === 'rename') {
+        fs.stat(p, (err, state) => {
+          if (!err) {
+            if (state.isDirectory()) {
+              w.close()
+              watchFiles(p)
+            }
+          } else {
+            w.close()
+          }
+        })
+      } else {
+        // event === change
+        fs.stat(p, (err, state) => {
+          const now = Date.now()
+          if (!err && state.isFile() && (now - fileChangeTime > 100)) {
+            fileChangeTime = now
+            if (socket) {
+              socket.emit('fileChange')
+            }
+          }
+        })
+      }
+    })
+    w.on('error', (e) => {
+      console.error(e)
+    })
+    // 递归监听
+    fs.readdirSync(dir).forEach(f => {
+      const p = path.resolve(dir, f)
+      fs.stat(p, (err, state) => {
+        if (err) throw err
+        if (state.isDirectory()) {
+          watchFiles(p)
+        }
+      })
+    })
+  }
+  if (watchPath) {
+    watchFiles(path.resolve(cwd, watchPath))
+  }
 }
 
 console.log('JTaro Module Server run on port: ' + port)

New alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

35059

6.65%

Lines of code

683

9.46%

Number of lines in readme file

320

1.27%

Worsened metrics

Dependency count

1

Infinity%

Dev dependency count

11

37.5%

Number of low supply chain risk alerts

3

50%

Number of medium supply chain risk alerts

7

40%

Dependency changes

• + Added

  socket.io@^2.1.0

• + Added

  accepts@1.3.8
  (transitive)

• + Added

  after@0.8.2
  (transitive)

• + Added

  arraybuffer.slice@0.0.7
  (transitive)

• + Added

  backo2@1.0.2
  (transitive)

• + Added

  base64-arraybuffer@0.1.4
  (transitive)

• + Added

  base64id@2.0.0
  (transitive)

• + Added

  blob@0.0.5
  (transitive)

• + Added

  component-bind@1.0.0
  (transitive)

• + Added

  component-emitter@1.2.11.3.1
  (transitive)

• + Added

  component-inherit@0.0.3
  (transitive)

• + Added

  cookie@0.4.2
  (transitive)

• + Added

  debug@3.1.04.1.1
  (transitive)

• + Added

  engine.io@3.6.2
  (transitive)

• + Added

  engine.io-client@3.5.6
  (transitive)

• + Added

  engine.io-parser@2.2.1
  (transitive)

• + Added

  has-binary2@1.0.3
  (transitive)

• + Added

  has-cors@1.1.0
  (transitive)

• + Added

  indexof@0.0.1
  (transitive)

• + Added

  isarray@2.0.1
  (transitive)

• + Added

  mime-db@1.52.0
  (transitive)

• + Added

  mime-types@2.1.35
  (transitive)

• + Added

  ms@2.0.02.1.3
  (transitive)

• + Added

  negotiator@0.6.3
  (transitive)

• + Added

  parseqs@0.0.6
  (transitive)

• + Added

  parseuri@0.0.6
  (transitive)

• + Added

  socket.io@2.5.1
  (transitive)

• + Added

  socket.io-adapter@1.1.2
  (transitive)

• + Added

  socket.io-client@2.5.0
  (transitive)

• + Added

  socket.io-parser@3.3.53.4.4
  (transitive)

• + Added

  to-array@0.1.4
  (transitive)

• + Added

  ws@7.5.11
  (transitive)

• + Added

  xmlhttprequest-ssl@1.6.3
  (transitive)

• + Added

  yeast@0.1.2
  (transitive)