為何捐款
API 瀏覽器
App Extension Install API

本頁說明 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 語法進行插值,將一些決策程式碼注入到要渲染的檔案中。

範例

src/install.js

// (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」的變數中。

我們可以在渲染檔案時,決定要渲染的檔案的外觀。這消除了建立兩個資料夾並根據某些決策決定要渲染哪個資料夾的需求。

src/my-folder/some-file.js

<% 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')