mirror of
https://github.com/youzan/vant.git
synced 2025-10-22 20:04:09 +00:00
build: add files of vant-cli 2
This commit is contained in:
14
packages/vant-cli/src/compiler/compile-js.ts
Normal file
14
packages/vant-cli/src/compiler/compile-js.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import { transformFileSync } from '@babel/core';
|
||||
import { removeSync, outputFileSync } from 'fs-extra';
|
||||
import { replaceExt } from '../common';
|
||||
|
||||
export function compileJs(filePath: string) {
|
||||
const result = transformFileSync(filePath);
|
||||
|
||||
if (result) {
|
||||
const jsFilePath = replaceExt(filePath, '.js');
|
||||
|
||||
removeSync(filePath);
|
||||
outputFileSync(jsFilePath, result.code);
|
||||
}
|
||||
}
|
100
packages/vant-cli/src/compiler/compile-sfc.ts
Normal file
100
packages/vant-cli/src/compiler/compile-sfc.ts
Normal file
@@ -0,0 +1,100 @@
|
||||
import * as compiler from 'vue-template-compiler';
|
||||
import * as compileUtils from '@vue/component-compiler-utils';
|
||||
import { parse } from 'path';
|
||||
import { removeSync, writeFileSync, readFileSync } from 'fs-extra';
|
||||
import { replaceExt } from '../common';
|
||||
import { compileJs } from './compile-js';
|
||||
import { compileStyle } from './compile-style';
|
||||
|
||||
const RENDER_FN = '__vue_render__';
|
||||
const STATIC_RENDER_FN = '__vue_staticRenderFns__';
|
||||
const EXPORT = 'export default {';
|
||||
|
||||
// trim some unused code
|
||||
function trim(code: string) {
|
||||
return code.replace(/\/\/\n/g, '').trim();
|
||||
}
|
||||
|
||||
// inject render fn to script
|
||||
function injectRender(script: string, render: string) {
|
||||
script = trim(script);
|
||||
|
||||
render = render
|
||||
.replace('var render', `var ${RENDER_FN}`)
|
||||
.replace('var staticRenderFns', `var ${STATIC_RENDER_FN}`);
|
||||
|
||||
return script.replace(
|
||||
EXPORT,
|
||||
`${render}\n${EXPORT}\n render: ${RENDER_FN},\n\n staticRenderFns: ${STATIC_RENDER_FN},\n`
|
||||
);
|
||||
}
|
||||
|
||||
function injectStyle(
|
||||
script: string,
|
||||
styles: compileUtils.SFCBlock[],
|
||||
filePath: string
|
||||
) {
|
||||
if (styles.length) {
|
||||
const imports = styles
|
||||
.map((style, index) => {
|
||||
const prefix = index !== 0 ? `-${index + 1}` : '';
|
||||
const { base } = parse(replaceExt(filePath, `${prefix}.css`));
|
||||
return `import './${base}';`;
|
||||
})
|
||||
.join('\n');
|
||||
|
||||
return script.replace(EXPORT, `${imports}\n\n${EXPORT}`);
|
||||
}
|
||||
|
||||
return script;
|
||||
}
|
||||
|
||||
function compileTemplate(template: string) {
|
||||
const result = compileUtils.compileTemplate({
|
||||
compiler,
|
||||
source: template,
|
||||
isProduction: true
|
||||
} as any);
|
||||
|
||||
return result.code;
|
||||
}
|
||||
|
||||
export async function compileSfc(filePath: string) {
|
||||
const source = readFileSync(filePath, 'utf-8');
|
||||
const jsFilePath = replaceExt(filePath, '.js');
|
||||
|
||||
const descriptor = compileUtils.parse({
|
||||
source,
|
||||
compiler,
|
||||
needMap: false
|
||||
} as any);
|
||||
|
||||
const { template, styles } = descriptor;
|
||||
|
||||
removeSync(filePath);
|
||||
|
||||
// compile js part
|
||||
if (descriptor.script) {
|
||||
let script = descriptor.script.content;
|
||||
script = injectStyle(script, styles, filePath);
|
||||
|
||||
if (template) {
|
||||
const render = compileTemplate(template.content);
|
||||
script = injectRender(script, render);
|
||||
}
|
||||
|
||||
writeFileSync(jsFilePath, script);
|
||||
await compileJs(jsFilePath);
|
||||
}
|
||||
|
||||
// compile style part
|
||||
styles.forEach(async (style, index: number) => {
|
||||
const prefix = index !== 0 ? `-${index + 1}` : '';
|
||||
const ext = style.lang || 'css';
|
||||
const cssFilePath = replaceExt(filePath, `${prefix}.${ext}`);
|
||||
|
||||
writeFileSync(cssFilePath, trim(style.content));
|
||||
|
||||
await compileStyle(cssFilePath);
|
||||
});
|
||||
}
|
46
packages/vant-cli/src/compiler/compile-style.ts
Normal file
46
packages/vant-cli/src/compiler/compile-style.ts
Normal file
@@ -0,0 +1,46 @@
|
||||
import postcss from 'postcss';
|
||||
import postcssrc from 'postcss-load-config';
|
||||
import { parse } from 'path';
|
||||
import { render as renderLess } from 'less';
|
||||
import { renderSync as renderSass } from 'sass';
|
||||
import { readFileSync, writeFileSync } from 'fs';
|
||||
import { replaceExt } from '../common';
|
||||
import { POSTCSS_CONFIG_FILE } from '../common/constant';
|
||||
|
||||
async function compilePostcss(filePath: string, source: string | Buffer) {
|
||||
const config = await postcssrc({}, POSTCSS_CONFIG_FILE);
|
||||
const output = await postcss(config.plugins as any).process(source, {
|
||||
from: undefined
|
||||
});
|
||||
|
||||
writeFileSync(filePath, output);
|
||||
}
|
||||
|
||||
async function compileLess(filePath: string) {
|
||||
const source = readFileSync(filePath, 'utf-8');
|
||||
const { css } = await renderLess(source, {
|
||||
filename: filePath
|
||||
});
|
||||
|
||||
return css;
|
||||
}
|
||||
|
||||
async function compileSass(filePath: string) {
|
||||
const { css } = renderSass({ file: filePath });
|
||||
return css;
|
||||
}
|
||||
|
||||
export async function compileStyle(filePath: string) {
|
||||
const parsedPath = parse(filePath);
|
||||
|
||||
if (parsedPath.ext === '.less') {
|
||||
const source = await compileLess(filePath);
|
||||
await compilePostcss(replaceExt(filePath, '.css'), source);
|
||||
} else if (parsedPath.ext === '.scss') {
|
||||
const source = await compileSass(filePath);
|
||||
await compilePostcss(replaceExt(filePath, '.css'), source);
|
||||
} else {
|
||||
const source = readFileSync(filePath, 'utf-8');
|
||||
await compilePostcss(filePath, source);
|
||||
}
|
||||
}
|
55
packages/vant-cli/src/compiler/gen-desktop-config.ts
Normal file
55
packages/vant-cli/src/compiler/gen-desktop-config.ts
Normal file
@@ -0,0 +1,55 @@
|
||||
import { join, relative } from 'path';
|
||||
import { existsSync, writeFileSync } from 'fs-extra';
|
||||
import { pascalize, removeExt, getComponents } from '../common';
|
||||
import {
|
||||
SRC_DIR,
|
||||
CONFIG_FILE,
|
||||
DIST_DIR,
|
||||
DESKTOP_CONFIG_FILE
|
||||
} from '../common/constant';
|
||||
|
||||
function checkDocumentExists(component: string) {
|
||||
const absolutePath = join(SRC_DIR, component, 'README.md');
|
||||
return existsSync(absolutePath);
|
||||
}
|
||||
|
||||
function genImportDocuments(components: string[]) {
|
||||
return components
|
||||
.filter(component => checkDocumentExists(component))
|
||||
.map(component => {
|
||||
const absolutePath = join(SRC_DIR, component, 'README.md');
|
||||
const relativePath = relative(DIST_DIR, absolutePath);
|
||||
return `import ${pascalize(component)} from '${relativePath}';`;
|
||||
})
|
||||
.join('\n');
|
||||
}
|
||||
|
||||
function genExportDocuments(components: string[]) {
|
||||
return `export const documents = {
|
||||
${components
|
||||
.filter(component => checkDocumentExists(component))
|
||||
.map(component => pascalize(component))
|
||||
.join(',\n ')}
|
||||
};`;
|
||||
}
|
||||
|
||||
function genImportConfig() {
|
||||
const configRelative = relative(DIST_DIR, CONFIG_FILE);
|
||||
return `import config from '${removeExt(configRelative)}';`;
|
||||
}
|
||||
|
||||
function genExportConfig() {
|
||||
return 'export { config };';
|
||||
}
|
||||
|
||||
export function genDesktopConfig() {
|
||||
const components = getComponents();
|
||||
const code = `${genImportConfig()}
|
||||
${genImportDocuments(components)}
|
||||
|
||||
${genExportConfig()}
|
||||
${genExportDocuments(components)}
|
||||
`;
|
||||
|
||||
writeFileSync(DESKTOP_CONFIG_FILE, code);
|
||||
}
|
42
packages/vant-cli/src/compiler/gen-mobile-config.ts
Normal file
42
packages/vant-cli/src/compiler/gen-mobile-config.ts
Normal file
@@ -0,0 +1,42 @@
|
||||
import { join, relative } from 'path';
|
||||
import { existsSync, ensureDirSync, writeFileSync } from 'fs-extra';
|
||||
import { pascalize, removeExt, getComponents } from '../common';
|
||||
import { SRC_DIR, DIST_DIR, MOBILE_CONFIG_FILE } from '../common/constant';
|
||||
|
||||
function checkDemoExists(component: string) {
|
||||
const absolutePath = join(SRC_DIR, component, 'demo/index.vue');
|
||||
return existsSync(absolutePath);
|
||||
}
|
||||
|
||||
function genImports(components: string[]) {
|
||||
return components
|
||||
.filter(component => checkDemoExists(component))
|
||||
.map(component => {
|
||||
const absolutePath = join(SRC_DIR, component, 'demo/index.vue');
|
||||
const relativePath = relative(DIST_DIR, absolutePath);
|
||||
|
||||
return `import ${pascalize(component)} from '${removeExt(
|
||||
relativePath
|
||||
)}';`;
|
||||
})
|
||||
.join('\n');
|
||||
}
|
||||
|
||||
function genExports(components: string[]) {
|
||||
return `export const demos = {\n ${components
|
||||
.filter(component => checkDemoExists(component))
|
||||
.map(component => pascalize(component))
|
||||
.join(',\n ')}\n};`;
|
||||
}
|
||||
|
||||
function genCode(components: string[]) {
|
||||
return `${genImports(components)}\n\n${genExports(components)}\n`;
|
||||
}
|
||||
|
||||
export function genMobileConfig() {
|
||||
const components = getComponents();
|
||||
const code = genCode(components);
|
||||
|
||||
ensureDirSync(DIST_DIR);
|
||||
writeFileSync(MOBILE_CONFIG_FILE, code);
|
||||
}
|
Reference in New Issue
Block a user