記第一次發(fā)布npm包經歷，smart-import

Raaabbit 發(fā)布于2019-08-22 13:49 / 1351人閱讀

摘要：故事背景前情提要自動工具，前端打字員的自我救贖的功能根據(jù)配置文件，在目標文件中自動導入規(guī)定目錄下自定義模塊，并監(jiān)聽規(guī)定目錄下文件的變動，自動更新尚在測試中的使用安裝工具編寫配置文件需要自動導入的模塊的后綴名自動導入的模塊的來源目

故事背景

前情提要：自動 Import 工具，前端打字員的自我救贖

github: smart-import

smart-import 的功能

根據(jù)配置文件，在目標文件中自動導入規(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：需要自動導入的模塊的后綴名

from：自動導入的模塊的來源目錄

to：目標文件

template：導入方式的模版

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 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)境變量中

而在你的腳本的第一行務必要加上

#!/usr/bin/env node

用于告訴計算機用 node 來運行這段腳本

在測試自己的腳本之前要把運行

npm install -g

把自己的腳本鏈接到環(huán)境變量中，不然會被告知該命令不存在

smart-import 的發(fā)布

先要有npm的賬號

然后給package添件賬號

npm adduser

之后可以通過npm whoami來核實自己的賬號信息

最后就是

npm publish

版本更新

npm version patch
npm publish

參考資料

https://docs.npmjs.com/files/...

https://developer.atlassian.c...

https://javascriptplayground....

https://www.sitepoint.com/jav...

GPU云服務器云服務器 NPM包管理器在npm 包 coa 和 rc 中發(fā)現(xiàn)惡每周數(shù)百萬下載量!NPM包修復了一個遠程 python包發(fā)布

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/92475.html

重構smart-import

摘要：前情提要自動工具，前端打字員的自我救贖記第一次發(fā)布包經歷，是重構中的代碼是版本可以工作的代碼配置文件待導入的模塊引用模塊的文件引用模塊的方式忽略的模塊實現(xiàn)監(jiān)聽文件的刪除和添加以上代碼主要使用了來監(jiān)聽文件的變化。前情提要自動 Import 工具，前端打字員的自我救贖記第一次發(fā)布npm包經歷，smart-import GitHub:smart-import develop是重構中的代...

Pocher 2019-08-22 13:50 評論0 收藏0
記[email protected]和之前版本的差異

摘要：記使用方式和之前版本的差異的使用下載和安裝項目生成的目錄結構以上，目前版本的使用下載和安裝項目生成的目錄結構新的目錄結構，隱藏了配置文件，封裝了細節(jié)對比個區(qū)別區(qū)別下載包的包命變化。貌似是之前的版本有點問題記[email protected]使用方式和之前版本的差異 @2.9.3的使用 1.下載vue-cli和安裝項目 cnpm i -g vue-cli#2.9.3 vue init webpa...

wow_worktile 2019-08-22 18:15 評論0 收藏0
手把手發(fā)布一個npm包及相關注意事項

摘要：前言這里是發(fā)布包的具體步驟，手把手教會，相關原理在其他文章下面有原理好文章指路分鐘教你快速開發(fā)一個插件并發(fā)布手把手教你封裝一個發(fā)布之前，需要注冊一個賬號這里注冊具體步驟新建項目如需安裝代碼下面新建一個文件夾。前言這里是發(fā)布npm包的具體步驟，手把手教會，相關原理在其他文章下面有原理好文章指路10分鐘教你快速開發(fā)一個vue插件并發(fā)布npm 手把手教你封裝一個 vue componen...

ZoomQuiet 2019-08-23 12:36 評論0 收藏0
如何發(fā)布你自己的React模塊至NPM

摘要：文章介紹如何創(chuàng)建發(fā)布一個包，包括項目搭建發(fā)布流程注意事項等。語義化版本號分為三位。主版本號當進行了大都改動或者對有很多不兼容修改時應該進行版本號升級。次版本號增加了部分特性或者優(yōu)化時升級該版本。如如果你想撤回指定版本，執(zhí)行包名版本號。文章介紹如何創(chuàng)建發(fā)布一個npm包，包括項目搭建、發(fā)布流程、注意事項等。演示代碼GitHub地址 1. 初始化項目首先在創(chuàng)建好的項目文件夾下面執(zhí)行 ...

zombieda 2019-08-23 14:48 評論0 收藏0
前端性能優(yōu)化與上線

摘要：看下狀態(tài)可以看到我已經有一些鏡像了我已經刪除了拉鏡像正常即可，中間那段是中國鏡像源，我們成功下來了的鏡像。攻破像我這樣屌絲的服務器一般都買的，大的資源文件不住，一個動輒的文件這很蛋疼，不上很難受。 4000字長文，多圖預警?。。×髁可魅耄?！性能優(yōu)化 - 屌絲前端性能優(yōu)化、上線一條龍大家好我又來了，本章給大家?guī)淼膬热菔牵荷暇€和上線后的性能優(yōu)化項目地址實戰(zhàn)預覽地址實戰(zhàn)項目地址...

wupengyu 2019-06-28 16:51 評論0 收藏0