Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add asset options into build options #53

Merged
merged 6 commits into from
May 5, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 8 additions & 3 deletions src/node/build.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { Options } from 'rollup-plugin-vue'
import { createBuildResolvePlugin } from './buildPluginResolve'
import { createBuildHtmlPlugin, scriptRE } from './buildPluginHtml'
import { createBuildCssPlugin } from './buildPluginCss'
import { createBuildAssetPlugin } from './buildPluginAsset'
import { AssetsOptions, createBuildAssetPlugin } from './buildPluginAsset'
import { isExternalUrl } from './utils'

export interface BuildOptions {
Expand All @@ -42,6 +42,10 @@ export interface BuildOptions {
* Defaults to `assets`
*/
assetsDir?: string
/**
* The option with process assets. eg.image
*/
assetsOptions?: AssetsOptions
/**
* List files that are included in the build, but not inside project root.
* e.g. if you are building a higher level tool on top of vite and includes
Expand Down Expand Up @@ -107,6 +111,7 @@ export async function build(options: BuildOptions = {}): Promise<BuildResult> {
cdn = !resolveVue(root).hasLocalVue,
outDir = path.resolve(root, 'dist'),
assetsDir = 'assets',
assetsOptions = {},
resolvers = [],
srcRoots = [],
rollupInputOptions = {},
Expand Down Expand Up @@ -185,9 +190,9 @@ export async function build(options: BuildOptions = {}): Promise<BuildResult> {
__DEV__: 'false'
}),
// vite:css
createBuildCssPlugin(root, assetsDir, cssFileName, minify),
createBuildCssPlugin(root, assetsDir, cssFileName, minify, assetsOptions),
// vite:asset
createBuildAssetPlugin(assetsDir),
createBuildAssetPlugin(assetsDir, assetsOptions),
// minify with terser
// modules: true and toplevel: true are implied with format: 'es'
...(minify ? [require('rollup-plugin-terser').terser()] : [])
Expand Down
27 changes: 20 additions & 7 deletions src/node/buildPluginAsset.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,27 @@ import mime from 'mime-types'

const debug = require('debug')('vite:build:asset')

// TODO make this configurable
const inlineThreshold = 4096
export interface AssetsOptions {
inlineThreshold?: number
}

const defaultAssetsOptions: AssetsOptions = {
inlineThreshold: 4096
}

export const getAssetPublicPath = async (id: string, assetsDir: string) => {
export const getAssetPublicPath = async (
id: string,
assetsDir: string,
assetsOptions: AssetsOptions
) => {
const ext = path.extname(id)
const baseName = path.basename(id, ext)
const resolvedFileName = `${baseName}.${hash_sum(id)}${ext}`

let url = slash(path.join('/', assetsDir, resolvedFileName))
const content = await fs.readFile(id)
if (!id.endsWith(`.svg`)) {
if (content.length < inlineThreshold) {
if (content.length < assetsOptions.inlineThreshold!) {
url = `data:${mime.lookup(id)};base64,${content.toString('base64')}`
}
}
Expand All @@ -45,16 +54,20 @@ export const registerAssets = (
}
}

export const createBuildAssetPlugin = (assetsDir: string): Plugin => {
export const createBuildAssetPlugin = (
assetsDir: string,
assetsOptions: AssetsOptions
): Plugin => {
const assets = new Map()

assetsOptions = { ...defaultAssetsOptions, ...assetsOptions }
return {
name: 'vite:asset',
async load(id) {
if (isStaticAsset(id)) {
const { fileName, content, url } = await getAssetPublicPath(
id,
assetsDir
assetsDir,
assetsOptions
)
assets.set(fileName, content)
debug(`${id} -> ${url}`)
Expand Down
12 changes: 9 additions & 3 deletions src/node/buildPluginCss.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
import path from 'path'
import { Plugin } from 'rollup'
import { getAssetPublicPath, registerAssets } from './buildPluginAsset'
import {
AssetsOptions,
getAssetPublicPath,
registerAssets
} from './buildPluginAsset'
import { loadPostcssConfig } from './config'
import { isExternalUrl } from './utils'

Expand All @@ -12,7 +16,8 @@ export const createBuildCssPlugin = (
root: string,
assetsDir: string,
cssFileName: string,
minify: boolean
minify: boolean,
assetsOptions: AssetsOptions
): Plugin => {
const styles: Map<string, string> = new Map()
const assets = new Map()
Expand Down Expand Up @@ -40,7 +45,8 @@ export const createBuildCssPlugin = (
const file = path.join(fileDir, rawUrl)
const { fileName, content, url } = await getAssetPublicPath(
file,
assetsDir
assetsDir,
assetsOptions
)
assets.set(fileName, content)
debug(`url(${rawUrl}) -> url(${url})`)
Expand Down