前情提要:自動 Import 工具,前端打字員的自我救贖 javascript
github: smart-importhtml
根據配置文件,在目標文件中自動導入規定目錄下自定義模塊,並監聽規定目錄下文件的變更,自動更新前端
尚在測試中vue
安裝工具java
npm install smart-import -g
編寫配置文件smart-import.json
node
{ "extname": ".vue", "from": "demo/pages", "to": "demo/router/index.js", "template": "const moduleName = () => import(modulePath)", "ignored": [ "demo/pages/pageA.vue", "demo/pages/**/*.js" ] }
extname:須要自動導入的模塊的後綴名git
from:自動導入的模塊的來源目錄github
to:目標文件npm
template:導入方式的模版json
ignored:須要忽略的模塊
啓動工具
在命令行輸入
simport
smart-import 的誕生
smart-import做爲命令行工具,和日常寫網站仍是有些不一樣的。
一樣的部分,github建倉庫,npm init
經過npm init
會生成package.json
文件,其中main字段的做用在於,若是你的代碼最終做爲一個模塊被其餘人import/require,那麼這個文件就是這個模塊的入口文件,能夠參考node加載模塊的機智
摘自npm官方文檔
The main field is a module ID that is the primary entry point to your program. That is, if your package is namedfoo
, and a user installs it, and then doesrequire("foo")
, then your main module's exports object will be returned.This should be a module ID relative to the root of your package folder.
For most modules, it makes the most sense to have a main script and often not much else.
因爲smart-import是一個命令行工具,並不會被其餘人import/require,因此main字段能夠忽略;而要注意的是bin字段
"bin": { "simport": "./bin/index.js" },
摘自npm官方文檔
A lot of packages have one or more executable files that they'd like to install into the PATH. npm makes this pretty easy (in fact, it uses this feature to install the "npm" executable.)To use this, supply a
bin
field in your package.json which is a map of command name to local file name. On install, npm will symlink that file intoprefix/bin
for global installs, or./node_modules/.bin/
for local installs.
簡單來講,就是將你的腳本放到環境變量中
而在你的腳本的第一行務必要加上
#!/usr/bin/env node
用於告訴計算機用 node 來運行這段腳本
在測試本身的腳本以前要把運行
npm install -g
把本身的腳本連接到環境變量中,否則會被告知該命令不存在
smart-import 的發佈
先要有npm的帳號
而後給package添件帳號
npm adduser
以後能夠經過npm whoami
來覈實本身的帳號信息
最後就是
npm publish
版本更新
npm version patch npm publish
https://docs.npmjs.com/files/...
https://developer.atlassian.c...