摘要:故事背景前情提要自動工具,前端打字員的自我救贖的功能根據(jù)配置文件,在目標(biāo)文件中自動導(dǎo)入規(guī)定目錄下自定義模塊,并監(jiān)聽規(guī)定目錄下文件的變動,自動更新尚在測試中的使用安裝工具編寫配置文件需要自動導(dǎo)入的模塊的后綴名自動導(dǎo)入的模塊的來源目
故事背景
前情提要:自動 Import 工具,前端打字員的自我救贖
github: smart-import
smart-import 的功能根據(jù)配置文件,在目標(biāo)文件中自動導(dǎo)入規(guī)定目錄下自定義模塊,并監(jiān)聽規(guī)定目錄下文件的變動,自動更新
尚在測試中
smart-import 的使用安裝工具
npm install smart-import -g
編寫配置文件smart-import.json
{ "extname": ".vue", "from": "demo/pages", "to": "demo/router/index.js", "template": "const moduleName = () => import(modulePath)", "ignored": [ "demo/pages/pageA.vue", "demo/pages/**/*.js" ] }
extname:需要自動導(dǎo)入的模塊的后綴名
from:自動導(dǎo)入的模塊的來源目錄
to:目標(biāo)文件
template:導(dǎo)入方式的模版
ignored:需要忽略的模塊
啟動工具
在命令行輸入
simport
smart-import 的誕生
smart-import作為命令行工具,和平常寫網(wǎng)站還是有些不同的。
同樣的部分,github建倉庫,npm init
通過npm init會生成package.json文件,其中main字段的作用在于,如果你的代碼最終作為一個模塊被其他人import/require,那么這個文件就是這個模塊的入口文件,可以參考node加載模塊的機(jī)智
摘自npm官方文檔
The main field is a module ID that is the primary entry point to your program. That is, if your package is named foo, and a user installs it, and then does require("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 into prefix/bin for global installs, or ./node_modules/.bin/ for local installs.
簡單來說,就是將你的腳本放到環(huán)境變量中
而在你的腳本的第一行務(wù)必要加上
#!/usr/bin/env node
用于告訴計算機(jī)用 node 來運(yùn)行這段腳本
在測試自己的腳本之前要把運(yùn)行
npm install -g
把自己的腳本鏈接到環(huán)境變量中,不然會被告知該命令不存在
smart-import 的發(fā)布
先要有npm的賬號
然后給package添件賬號
npm adduser
之后可以通過npm whoami來核實(shí)自己的賬號信息
最后就是
npm publish
版本更新
npm version patch npm publish參考資料
https://docs.npmjs.com/files/...
https://developer.atlassian.c...
https://javascriptplayground....
https://www.sitepoint.com/jav...
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.hztianpu.com/yun/92475.html
摘要:前情提要自動工具,前端打字員的自我救贖記第一次發(fā)布包經(jīng)歷,是重構(gòu)中的代碼是版本可以工作的代碼配置文件待導(dǎo)入的模塊引用模塊的文件引用模塊的方式忽略的模塊實(shí)現(xiàn)監(jiān)聽文件的刪除和添加以上代碼主要使用了來監(jiān)聽文件的變化。 前情提要 自動 Import 工具,前端打字員的自我救贖 記第一次發(fā)布npm包經(jīng)歷,smart-import GitHub:smart-import develop是重構(gòu)中的代...
摘要:記使用方式和之前版本的差異的使用下載和安裝項(xiàng)目生成的目錄結(jié)構(gòu)以上,目前版本的使用下載和安裝項(xiàng)目生成的目錄結(jié)構(gòu)新的目錄結(jié)構(gòu),隱藏了配置文件,封裝了細(xì)節(jié)對比個區(qū)別區(qū)別下載包的包命變化。貌似是之前的版本有點(diǎn)問題 記vue-cli@3.0使用方式和之前版本的差異 @2.9.3的使用 1.下載vue-cli和安裝項(xiàng)目 cnpm i -g vue-cli#2.9.3 vue init webpa...
摘要:前言這里是發(fā)布包的具體步驟,手把手教會,相關(guān)原理在其他文章下面有原理好文章指路分鐘教你快速開發(fā)一個插件并發(fā)布手把手教你封裝一個發(fā)布之前,需要注冊一個賬號這里注冊具體步驟新建項(xiàng)目如需安裝代碼下面新建一個文件夾。 前言 這里是發(fā)布npm包的具體步驟,手把手教會,相關(guān)原理在其他文章下面有原理好文章指路10分鐘教你快速開發(fā)一個vue插件并發(fā)布npm 手把手教你封裝一個 vue componen...
摘要:文章介紹如何創(chuàng)建發(fā)布一個包,包括項(xiàng)目搭建發(fā)布流程注意事項(xiàng)等。語義化版本號分為三位。主版本號當(dāng)進(jìn)行了大都改動或者對有很多不兼容修改時應(yīng)該進(jìn)行版本號升級。次版本號增加了部分特性或者優(yōu)化時升級該版本。如如果你想撤回指定版本,執(zhí)行包名版本號。 文章介紹如何創(chuàng)建發(fā)布一個npm包,包括項(xiàng)目搭建、發(fā)布流程、注意事項(xiàng)等。 演示代碼GitHub地址 1. 初始化項(xiàng)目 首先在創(chuàng)建好的項(xiàng)目文件夾下面執(zhí)行 ...
摘要:看下狀態(tài)可以看到我已經(jīng)有一些鏡像了我已經(jīng)刪除了拉鏡像正常即可,中間那段是中國鏡像源,我們成功下來了的鏡像。攻破像我這樣屌絲的服務(wù)器一般都買的,大的資源文件不住,一個動輒的文件這很蛋疼,不上很難受。 4000字長文,多圖預(yù)警?。?!流量慎入!! 性能優(yōu)化 - 屌絲前端性能優(yōu)化、上線一條龍 大家好我又來了,本章給大家?guī)淼膬?nèi)容是:上線和上線后的性能優(yōu)化 項(xiàng)目地址 實(shí)戰(zhàn)預(yù)覽地址 實(shí)戰(zhàn)項(xiàng)目地址...
閱讀 1511·2021-10-08 10:05
閱讀 3168·2021-09-26 10:10
閱讀 957·2019-08-30 15:55
閱讀 562·2019-08-26 11:51
閱讀 505·2019-08-23 18:10
閱讀 3947·2019-08-23 15:39
閱讀 716·2019-08-23 14:50
閱讀 846·2019-08-23 14:46