本頁說明 src/install.js
檔案,該檔案僅在安裝 App Extension 時執行。並非所有 App Extensions 都需要安裝,這是一個可選步驟。
檔案基本結構範例
// can be async
export default function (api) {
// props and methods for "api" Object
// are described below
}
api.engine
包含正在使用的 Quasar CLI 引擎(字串)。範例:@quasar/app-vite
或 @quasar/app-webpack
。
api.hasVite
布林值 - 是否在 @quasar/app-vite
上執行。
api.hasWebpack
布林值 - 是否在 @quasar/app-webpack
上執行。
api.extId
包含此 App Extension 的 ext-id
(字串)。
api.prompts
是一個物件,其中包含安裝此 App Extension 時對提示的回答。有關提示的更多資訊,請查看 Prompts API。
api.resolve
解析執行此 App Extension 的應用程式中的路徑。無需導入 path
並自行解析路徑。
// resolves to root of app
api.resolve.app('src/my-file.js')
// resolves to root/src of app
api.resolve.src('my-file.js')
// resolves to root/public of app
// (@quasar/app-webpack v3.4+ or @quasar/app-vite v1+)
api.resolve.public('my-image.png')
// resolves to root/src-pwa of app
api.resolve.pwa('some-file.js')
// resolves to root/src-ssr of app
api.resolve.ssr('some-file.js')
// resolves to root/src-cordova of app
api.resolve.cordova('config.xml')
// resolves to root/src-electron of app
api.resolve.electron('some-file.js')
// resolves to root/src-bex of app
api.resolve.bex('some-file.js')
api.appDir
包含執行此 App Extension 的應用程式根目錄的完整路徑(字串)。
api.hasTypescript@quasar/app-vite 1.6+ @quasar/app-webpack 3.11+
/**
* @return {Promise<boolean>} host project has Typescript active or not
*/
await api.hasTypescript()
api.hasLint@quasar/app-vite 1.6+ @quasar/app-webpack 3.11+
/**
* @return {Promise<boolean>} host project has ESLint or not
*/
await api.hasLint()
api.getStorePackageName@quasar/app-vite 1.6+ @quasar/app-webpack 3.11+
/**
* @return {Promise<string|undefined>} 'pinia' | 'vuex' | undefined
*/
await api.getStorePackageName()
api.getNodePackagerName@quasar/app-vite 1.6+ @quasar/app-webpack 3.11+
/**
* @return {Promise<'npm' | 'yarn' | 'pnpm' | 'bun'>}
*/
await api.getNodePackagerName()
api.compatibleWith
確保 App Extension 與主機應用程式中透過語義版本條件安裝的套件相容。
如果未滿足語義版本條件,則 Quasar CLI 會發生錯誤並停止執行。
語義版本條件範例:'1.x || >=2.5.0 || 5.0.0 - 7.2.3'
。
/**
* @param {string} packageName
* @param {string} semverCondition
*/
api.compatibleWith(packageName, '1.x')
if (api.hasVite === true) {
api.compatibleWith('@quasar/app-vite', '^2.0.0-beta.1')
}
else {
api.compatbileWith('@quasar/app-webpack', '^4.0.0-beta.1')
}
api.hasPackage
判斷主機應用程式中是否透過語義版本條件安裝了某些套件。
語義版本條件範例:'1.x || >=2.5.0 || 5.0.0 - 7.2.3'
。
/**
* @param {string} packageName
* @param {string} (optional) semverCondition
* @return {boolean} package is installed and meets optional semver condition
*/
if (api.hasPackage('vuelidate')) {
// hey, this app has it (any version of it)
}
if (api.hasPackage('quasar', '^2.0.0')) {
// hey, this app has Quasar UI v2 installed
}
api.hasExtension
檢查是否已 npm 安裝另一個 app extension,且 Quasar CLI 已調用它。
/**
* Check if another app extension is installed
*
* @param {string} extId
* @return {boolean} has the extension installed & invoked
*/
if (api.hasExtension(extId)) {
// hey, we have it
}
api.getPackageVersion
取得主機應用程式套件的版本。
/**
* @param {string} packageName
* @return {string|undefined} version of app's package
*/
console.log( api.getPackageVersion(packageName) )
// output examples:
// 1.1.3
// undefined (when package not found)
api.extendPackageJson
用於使用新屬性擴充 package.json 的輔助方法。如果指定現有屬性,**它將覆寫**它們。
/**
* @param {object|string} extPkg - Object to extend with or relative path to a JSON file
*/
api.extendPackageJson({
scripts: {
'electron': 'quasar dev -m electron'
}
})
上面的範例將 npm 腳本新增至應用程式的 package.json,因此您可以執行 yarn electron
(或等效的 npm run electron
)。
api.extendJsonFile
使用新屬性擴充 JSON 檔案(深度合併)。如果指定現有屬性,它將覆寫它們。
/**
* @param {string} file (relative path to app root folder)
* @param {object} newData (Object to merge in)
*/
api.extendJsonFile('src/some.json', {
newProp: 'some-value'
})
api.render
將 App Extension 範本中的資料夾(您指定的任何資料夾)渲染(複製)到應用程式的根目錄中。維護與範本資料夾相同的資料夾結構。
如果應用程式中已存在某些檔案,則會詢問使用者是否應覆寫它們。
需要呼叫 render() 的檔案資料夾的相對路徑。
/**
* Render a folder from extension templates into devland
* Needs a path (to a folder) relative to the path of the file where render() is called
*
* @param {string} templatePath (relative path to folder to render in app)
* @param {object} scope (optional; rendering scope variables)
*/
api.render('./path/to/a/template/folder')
檔案名稱邊緣案例
如果您想要渲染名稱以點開頭的範本檔案(即 .env),則必須遵循特定的命名慣例,因為將外掛程式發佈到 npm 時,點檔案會被忽略
# templates containing dotfiles must use an
# underscore instead of the dot in their names:
some-folder/_env
# When calling api.render('./some-folder'), this will be
# rendered in the project folder as:
/.env
如果您想要渲染名稱實際上以底線開頭的檔案,則檔案名稱必須以 __
開頭(兩個底線字元而不是只有一個)
some-folder/__my.css
# When calling api.render('./template'), this will be
# rendered in the project folder as:
/_my.css
使用 scope
您也可以透過使用 lodash/template 語法進行插值,將一些決策程式碼注入到要渲染的檔案中。
範例
// (my-folder is located in same folder as
// the file in which following call takes place)
api.render('./my-folder', {
prompts: api.prompts
})
假設我們也使用 Prompts API 檔案。它詢問使用者是否想要「功能 X」,並將答案儲存在名為「featureX」的變數中。
我們可以在渲染檔案時,決定要渲染的檔案的外觀。這消除了建立兩個資料夾並根據某些決策決定要渲染哪個資料夾的需求。
<% if (prompts.featureX) { %>
const message = 'This is content when "Feature X" exists'
<% } else { %>
const message = 'This is content when we don\'t have "Feature X"'
<% } %>
可能性僅受您的想像力限制。
api.renderFile
與 api.render() 類似,不同之處在於此方法會渲染單一檔案。
/**
* Render a file from extension template into devland
* Needs a path (to a file) relative to the path of the file where renderFile() is called
*
* @param {string} relativeSourcePath (file path relative to the folder from which the install script is called)
* @param {string} relativeTargetPath (file path relative to the root of the app -- including filename!)
* @param {object} scope (optional; rendering scope variables)
*/
api.renderFile('./path/to/a/template/filename', 'path/relative/to/app/root/filename', {
prompts: api.prompts
})
api.renderFile('./my-file.json', 'src/my-file.json')
api.getPersistentConf
取得此外掛程式的內部永久設定。如果沒有,則傳回空物件。
/**
* @return {object} cfg
*/
api.getPersistentConf()
api.setPersistentConf
設定此外掛程式的內部永久設定。如果已存在,則會覆寫它。
/**
* @param {object} cfg
*/
api.setPersistentConf({
// ....
})
api.mergePersistentConf
深度合併到此外掛程式的內部永久設定中。如果外掛程式尚未設定任何設定,則這基本上等同於第一次設定它。
/**
* @param {object} cfg
*/
api.mergePersistentConf({
// ....
})
api.onExitLog
新增一則訊息,以便在 App CLI 完成安裝 App Extension 並即將結束時列印。可以多次呼叫以註冊多個結束記錄。
/**
* @param {string} msg
*/
api.onExitLog('Thanks for installing my awesome extension')