refactor(@vant/cli): migrate to ESM package

This commit is contained in:
chenjiahan
2021-10-28 11:48:11 +08:00
committed by neverland
parent eec2ac4c0f
commit 1b45f38133
50 changed files with 255 additions and 196 deletions

View File

@@ -1,26 +0,0 @@
/**
* @babel/preset-typescript 不支持编译 Vue 文件中的 ts 代码
* 通过手动添加 @babel/plugin-transform-typescript 的方式来解决这个问题
* see: https://github.com/babel/babel-loader/pull/738
*/
import { readFileSync } from 'fs';
import { declare } from '@babel/helper-plugin-utils';
module.exports = declare(() => ({
overrides: [
{
test: (filePath: string) => {
if (/\.vue$/.test(filePath)) {
const template = readFileSync(filePath, { encoding: 'utf8' });
return (
template.includes('lang="ts"') || template.includes("lang='ts'")
);
}
return false;
},
plugins: [require('@babel/plugin-transform-typescript')],
},
],
}));

View File

@@ -1,7 +1,7 @@
import postcss from 'postcss';
import postcssrc from 'postcss-load-config';
import CleanCss from 'clean-css';
import { POSTCSS_CONFIG_FILE } from '../common/constant';
import { POSTCSS_CONFIG_FILE } from '../common/constant.js';
const cleanCss = new CleanCss();

View File

@@ -1,11 +1,11 @@
import less from 'less';
import { join } from 'path';
import { render } from 'less';
import { readFileSync } from 'fs-extra';
import { CWD } from '../common/constant';
import { readFileSync } from 'fs';
import { CWD } from '../common/constant.js';
export async function compileLess(filePath: string) {
const source = readFileSync(filePath, 'utf-8');
const { css } = await render(source, {
const { css } = await less.render(source, {
filename: filePath,
paths: [join(CWD, 'node_modules')],
});

View File

@@ -1,6 +1,6 @@
import { build } from 'vite';
import { mergeCustomViteConfig } from '../common';
import { getViteConfigForPackage } from '../config/vite.package';
import { mergeCustomViteConfig } from '../common/index.js';
import { getViteConfigForPackage } from '../config/vite.package.js';
export async function compilePackage(minify: boolean) {
const config = mergeCustomViteConfig(getViteConfigForPackage(minify));

View File

@@ -1,3 +1,5 @@
import { createRequire } from 'module';
// allow to import from node_modules
// @import "~package-name/var.scss"
const tildeImporter = (url: string) => {
@@ -14,6 +16,7 @@ const tildeImporter = (url: string) => {
};
export async function compileSass(filePath: string) {
const require = createRequire(import.meta.url);
const { renderSync } = require('sass');
const { css } = renderSync({ file: filePath, importer: tildeImporter });
return css;

View File

@@ -1,9 +1,11 @@
import fse from 'fs-extra';
import { sep } from 'path';
import { transformAsync } from '@babel/core';
import { readFileSync, removeSync, outputFileSync } from 'fs-extra';
import { replaceExt } from '../common';
import { replaceCSSImportExt } from '../common/css';
import { replaceScriptImportExt } from './get-deps';
import { replaceExt } from '../common/index.js';
import { replaceCSSImportExt } from '../common/css.js';
import { replaceScriptImportExt } from './get-deps.js';
const { readFileSync, removeSync, outputFileSync } = fse;
export async function compileScript(filePath: string): Promise<void> {
return new Promise((resolve, reject) => {

View File

@@ -1,8 +1,10 @@
import hash from 'hash-sum';
import fse from 'fs-extra';
import path from 'path';
import hash from 'hash-sum';
import { parse, SFCBlock, compileTemplate } from '@vue/compiler-sfc';
import { remove, readFileSync, outputFile } from 'fs-extra';
import { replaceExt } from '../common';
import { replaceExt } from '../common/index.js';
const { remove, readFileSync, outputFile } = fse;
const RENDER_FN = '__vue_render__';
const VUEIDS = '__vue_sfc__';

View File

@@ -1,17 +1,18 @@
import chalk from 'chalk';
import { createRequire } from 'module';
import { createServer, build } from 'vite';
import {
getViteConfigForSiteDev,
getViteConfigForSiteProd,
} from '../config/vite.site';
import { mergeCustomViteConfig, replaceExt } from '../common';
import { CSS_LANG } from '../common/css';
import { genPackageEntry } from './gen-package-entry';
import { genPackageStyle } from './gen-package-style';
import { genSiteMobileShared } from './gen-site-mobile-shared';
import { genSiteDesktopShared } from './gen-site-desktop-shared';
import { genStyleDepsMap } from './gen-style-deps-map';
import { PACKAGE_ENTRY_FILE, PACKAGE_STYLE_FILE } from '../common/constant';
} from '../config/vite.site.js';
import { mergeCustomViteConfig, replaceExt } from '../common/index.js';
import { CSS_LANG } from '../common/css.js';
import { genPackageEntry } from './gen-package-entry.js';
import { genPackageStyle } from './gen-package-style.js';
import { genSiteMobileShared } from './gen-site-mobile-shared.js';
import { genSiteDesktopShared } from './gen-site-desktop-shared.js';
import { genStyleDepsMap } from './gen-style-deps-map.js';
import { PACKAGE_ENTRY_FILE, PACKAGE_STYLE_FILE } from '../common/constant.js';
export async function genSiteEntry(): Promise<void> {
return new Promise((resolve, reject) => {
@@ -44,6 +45,7 @@ export async function compileSite(production = false) {
const server = await createServer(config);
await server.listen();
const require = createRequire(import.meta.url);
const { version } = require('vite/package.json');
const viteInfo = chalk.cyan(`vite v${version}`);
console.log(`\n ${viteInfo}` + chalk.green(` dev server running at:\n`));

View File

@@ -1,10 +1,10 @@
import { parse } from 'path';
import { readFileSync, writeFileSync } from 'fs';
import { replaceExt } from '../common';
import { compileCss } from './compile-css';
import { compileLess } from './compile-less';
import { compileSass } from './compile-sass';
import { consola } from '../common/logger';
import { replaceExt } from '../common/index.js';
import { compileCss } from './compile-css.js';
import { compileLess } from './compile-less.js';
import { compileSass } from './compile-sass.js';
import { consola } from '../common/logger.js';
async function compileFile(filePath: string) {
const parsedPath = parse(filePath);

View File

@@ -2,19 +2,21 @@
* Build style entry of all components
*/
import fse from 'fs-extra';
import { createRequire } from 'module';
import { sep, join, relative } from 'path';
import { outputFileSync } from 'fs-extra';
import { getComponents, replaceExt } from '../common';
import { CSS_LANG, getCssBaseFile } from '../common/css';
import { checkStyleExists } from './gen-style-deps-map';
import { getComponents, replaceExt } from '../common/index.js';
import { CSS_LANG, getCssBaseFile } from '../common/css.js';
import { checkStyleExists } from './gen-style-deps-map.js';
import {
ES_DIR,
SRC_DIR,
LIB_DIR,
STYLE_DEPS_JSON_FILE,
} from '../common/constant';
} from '../common/constant.js';
function getDeps(component: string): string[] {
const require = createRequire(import.meta.url);
const styleDepsJson = require(STYLE_DEPS_JSON_FILE);
if (styleDepsJson.map[component]) {
@@ -73,7 +75,7 @@ function genEntry(params: {
content += depsPath.map(template).join('\n');
content = content.replace(new RegExp('\\' + sep, 'g'), '/');
outputFileSync(outputFile, content);
fse.outputFileSync(outputFile, content);
});
}
@@ -81,6 +83,7 @@ export function genComponentStyle(
options: { cache: boolean } = { cache: true }
) {
if (!options.cache) {
const require = createRequire(import.meta.url);
delete require.cache[STYLE_DEPS_JSON_FILE];
}

View File

@@ -1,12 +1,12 @@
import { get } from 'lodash';
import { get } from 'lodash-es';
import { join } from 'path';
import {
pascalize,
getComponents,
smartOutputFile,
normalizePath,
} from '../common';
import { SRC_DIR, getPackageJson, getVantConfig } from '../common/constant';
} from '../common/index.js';
import { SRC_DIR, getPackageJson, getVantConfig } from '../common/constant.js';
type PathResolver = (path: string) => string;

View File

@@ -1,8 +1,9 @@
import { join } from 'path';
import { existsSync } from 'fs-extra';
import { smartOutputFile, normalizePath } from '../common';
import { CSS_LANG, getCssBaseFile } from '../common/css';
import { SRC_DIR, STYLE_DEPS_JSON_FILE } from '../common/constant';
import { existsSync } from 'fs';
import { createRequire } from 'module';
import { smartOutputFile, normalizePath } from '../common/index.js';
import { CSS_LANG, getCssBaseFile } from '../common/css.js';
import { SRC_DIR, STYLE_DEPS_JSON_FILE } from '../common/constant.js';
type Options = {
outputPath: string;
@@ -10,6 +11,7 @@ type Options = {
};
export function genPackageStyle(options: Options) {
const require = createRequire(import.meta.url);
const styleDepsJson = require(STYLE_DEPS_JSON_FILE);
const ext = '.' + CSS_LANG;

View File

@@ -1,20 +1,20 @@
import glob from 'fast-glob';
import { join, parse } from 'path';
import { existsSync, readFileSync, readdirSync } from 'fs-extra';
import { existsSync, readFileSync, readdirSync } from 'fs';
import {
pascalize,
getVantConfig,
smartOutputFile,
normalizePath,
isDev,
} from '../common';
} from '../common/index.js';
import {
SRC_DIR,
DOCS_DIR,
getPackageJson,
VANT_CONFIG_FILE,
SITE_DESKTOP_SHARED_FILE,
} from '../common/constant';
} from '../common/constant.js';
type DocumentItem = {
name: string;

View File

@@ -1,6 +1,6 @@
import { join } from 'path';
import { existsSync, readdirSync } from 'fs-extra';
import { SRC_DIR, SITE_MOBILE_SHARED_FILE } from '../common/constant';
import { existsSync, readdirSync } from 'fs';
import { SRC_DIR, SITE_MOBILE_SHARED_FILE } from '../common/constant.js';
import {
pascalize,
removeExt,
@@ -8,8 +8,8 @@ import {
getVantConfig,
smartOutputFile,
normalizePath,
} from '../common';
import { CSS_LANG } from '../common/css';
} from '../common/index.js';
import { CSS_LANG } from '../common/css.js';
type DemoItem = {
name: string;

View File

@@ -1,9 +1,9 @@
import { relative, sep, join } from 'path';
import { CSS_LANG } from '../common/css';
import { existsSync } from 'fs-extra';
import { getDeps, clearDepsCache, fillExt } from './get-deps';
import { getComponents, smartOutputFile } from '../common';
import { SRC_DIR, STYLE_DEPS_JSON_FILE } from '../common/constant';
import { CSS_LANG } from '../common/css.js';
import { existsSync } from 'fs';
import { getDeps, clearDepsCache, fillExt } from './get-deps.js';
import { getComponents, smartOutputFile } from '../common/index.js';
import { SRC_DIR, STYLE_DEPS_JSON_FILE } from '../common/constant.js';
function matchPath(path: string, component: string): boolean {
const p = relative(SRC_DIR, path);

View File

@@ -1,11 +1,11 @@
import markdownVetur from '@vant/markdown-vetur';
import { get } from 'lodash';
import { get } from 'lodash-es';
import {
SRC_DIR,
VETUR_DIR,
getVantConfig,
getPackageJson,
} from '../common/constant';
} from '../common/constant.js';
// generate vetur tags & attributes
export function genVeturConfig() {

View File

@@ -1,12 +1,13 @@
import { join } from 'path';
import { SCRIPT_EXTS } from '../common/constant';
import { readFileSync, existsSync } from 'fs-extra';
import { SCRIPT_EXTS } from '../common/constant.js';
import { readFileSync, existsSync } from 'fs';
let depsMap: Record<string, string[]> = {};
let existsCache: Record<string, boolean> = {};
// https://regexr.com/47jlq
const IMPORT_RE = /import\s+?(?:(?:(?:[\w*\s{},]*)\s+from(\s+)?)|)(?:(?:".*?")|(?:'.*?'))[\s]*?(?:;|$|)/g;
const IMPORT_RE =
/import\s+?(?:(?:(?:[\w*\s{},]*)\s+from(\s+)?)|)(?:(?:".*?")|(?:'.*?'))[\s]*?(?:;|$|)/g;
function matchImports(code: string): string[] {
const imports = code.match(IMPORT_RE) || [];

View File

@@ -1,6 +1,6 @@
import releaseIt from 'release-it';
import { build } from '../commands/build';
import { changelog } from '../commands/changelog';
import { build } from '../commands/build.js';
import { changelog } from '../commands/changelog.js';
class VantCliReleasePlugin extends releaseIt.Plugin {
async beforeRelease() {