@es-pkg/compile 1.0.2 → 1.0.4

package/README.md

@@ -29,4 +29,4 @@
 
 #### default
 
-*   default(done:`Undertaker.TaskCallback`): `void` | `EventEmitter`<`DefaultEventMap`\> | `internal.Stream` | `"child_process".ChildProcess` | `asyncDone.Observable`<`any`\> | `PromiseLike`<`any`\>
+*   default(done:`Undertaker.TaskCallback`): `void` | `EventEmitter`<`DefaultEventMap`\> | `internal.Stream` | `PromiseLike`<`any`\> | `"child_process".ChildProcess` | `asyncDone.Observable`<`any`\>

package/cjs/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="undertaker" />
+declare const _default: import("undertaker").TaskFunction;
+export default _default;

package/cjs/index.js

@@ -0,0 +1,190 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var gulp = require('@es-pkg/gulp');
+var utils = require('@es-pkg/utils');
+var config = require('@es-pkg/config');
+var rollup = require('rollup');
+var resolve = require('@rollup/plugin-node-resolve');
+var commonjs = require('@rollup/plugin-commonjs');
+var typescript = require('@rollup/plugin-typescript');
+var json = require('@rollup/plugin-json');
+var postcss = require('rollup-plugin-postcss');
+var autoprefixer = require('autoprefixer');
+var cssnano = require('cssnano');
+var path = require('node:path');
+var fs = require('node:fs');
+
+const clean = () => {
+    utils.log(`清除 ${config.relativeToApp(config.config.es)} & ${config.relativeToApp(config.config.cjs)} 目录---开始`);
+    const promises = [
+        utils.remove(config.config.publishDir, true),
+        utils.remove(config.config.es, true),
+        utils.remove(config.config.cjs, true),
+        utils.remove(config.config.iife, true),
+    ];
+    return Promise.all(promises).then(res => {
+        utils.log(`清除 ${config.relativeToApp(config.config.es)} & ${config.relativeToApp(config.config.cjs)} 目录---结束`);
+    });
+};
+function getPostcss(extract) {
+    return postcss({
+        // 处理 Less（需安装 less）
+        extensions: ['.less', '.scss', '.sass'], // 识别 less 扩展名
+        // 为不同类型的文件指定对应的编译器（关键修改）
+        use: {
+            "stylus": ['sass'],
+            'less': ['less'], //.less 文件用 less 编译
+            'sass': ['sass'] //.sass 文件用 sass 编译（缩进语法）
+        },
+        // 配置 PostCSS 插件（自动前缀、压缩）
+        plugins: [
+            autoprefixer({ overrideBrowserslist: config.config.css.browserslist }),
+            cssnano() // 生产环境压缩 CSS
+        ],
+        // 输出配置：提取为单独的 CSS 文件（推荐）
+        extract, // 提取到 ${name}.min.css
+        // 可选：不提取，嵌入到 JS 中（通过 import 会生成 style 标签）
+        // extract: false
+    });
+}
+const name = utils.getValidPkgName(config.pkg.name);
+// 1. 配置输入选项
+function getInputOptions(isIIFE, declarationDir) {
+    function isNodeModule(id) {
+        // 获取模块绝对路径
+        try {
+            const resolved = require.resolve(id, { paths: [process.cwd()] });
+            return resolved.includes('node_modules');
+        }
+        catch {
+            // 无法 resolve 的，认为是本地模块
+            return false;
+        }
+    }
+    return ({
+        input: config.shallowInputs,
+        external: id => {
+            // 排除本地相对路径和绝对路径，别名映射到本地也不会 external
+            if (id.startsWith('.') || path.isAbsolute(id))
+                return false;
+            // node_modules 下的模块才 external
+            return isNodeModule(id);
+        },
+        plugins: [
+            json(),
+            isIIFE && resolve(), // 解析 node_modules
+            commonjs(), // 转换 CommonJS 模块
+            typescript({
+                tsconfig: config.resolveApp('tsconfig.json'), // 可选，指定 tsconfig
+                compilerOptions: {
+                    noImplicitAny: true,
+                    isolatedModules: false,
+                    declaration: !!declarationDir,
+                    allowImportingTsExtensions: false,
+                    declarationDir,
+                    noEmit: false,
+                    emitDeclarationOnly: !!declarationDir,
+                    esModuleInterop: true,
+                    resolveJsonModule: true,
+                    skipLibCheck: true,
+                    removeComments: false,
+                    rootDir: config.resolveApp('src'), // ✅ 指定源代码根目录
+                }
+            }),
+            getPostcss(config.config.css.extract)
+        ].filter(Boolean)
+    });
+}
+async function buildExtraCss() {
+    const extras = config.config.css.extra;
+    if (!extras?.length)
+        return;
+    const srcRoot = config.resolveApp('src');
+    const esRoot = config.resolveApp(config.config.es);
+    const tasks = extras.map(async (v) => {
+        try {
+            const absPath = config.resolveApp(v); // 源文件绝对路径
+            const relativePath = path.relative(srcRoot, absPath); // 相对于 src 的路径
+            const dirname = path.dirname(relativePath); // 相对目录
+            const filename = path.basename(v, path.extname(v)); // 文件名去掉扩展名
+            // rollup 打包
+            const bundle = await rollup.rollup({
+                input: [v],
+                plugins: getPostcss(path.join(dirname, `${filename}.min.css`))
+            });
+            await bundle.write({
+                dir: config.config.es,
+                format: 'es',
+                sourcemap: false,
+                preserveModules: true,
+                preserveModulesRoot: srcRoot
+            });
+            // 删除生成的 JS 文件
+            const jsFile = path.join(esRoot, dirname, `${filename}${path.extname(v)}.js`);
+            if (fs.existsSync(jsFile))
+                fs.unlinkSync(jsFile);
+            // 复制到其他目标目录
+            [config.config.cjs, config.config.iife].forEach(targetRoot => {
+                const dest = path.join(config.resolveApp(targetRoot), dirname, `${filename}.min.css`);
+                fs.mkdirSync(path.dirname(dest), { recursive: true });
+                fs.copyFileSync(path.join(esRoot, dirname, `${filename}.min.css`), dest);
+            });
+            utils.log.success(`✅ 编译完成: ${v}`);
+        }
+        catch (err) {
+            utils.log.error(`❌ 编译失败: ${v}`, err);
+        }
+    });
+    await Promise.all(tasks);
+    utils.log.success('✅ 所有额外 CSS 编译完成');
+}
+async function build() {
+    // 2. 配置输出选项
+    let outputOptions = [
+        {
+            dir: config.config.es,
+            format: 'es', // 输出 ES Module
+            sourcemap: false,
+            preserveModules: true,
+            preserveModulesRoot: config.resolveApp('src'), // ✅ 指定源代码根目录
+        },
+        {
+            dir: config.config.cjs,
+            format: 'cjs', // 输出 COMMONJS
+            sourcemap: false,
+            preserveModules: true,
+            preserveModulesRoot: config.resolveApp('src'), // ✅ 指定源代码根目录
+            exports: "named",
+        },
+        {
+            dir: config.config.iife,
+            format: 'iife', // 输出 iife
+            sourcemap: false,
+            exports: "named",
+            name: utils.toPascalCase(name)
+        }
+    ];
+    if (!config.config.iife) {
+        outputOptions = outputOptions.filter(op => op.format !== 'iife');
+    }
+    for (const output of outputOptions) {
+        // 3. 调用 rollup 打包
+        const bundle = await rollup.rollup(getInputOptions(output.format === 'iife'));
+        // 4. 写入文件
+        await bundle.write(output);
+    }
+    {
+        const bundle = await rollup.rollup(getInputOptions(false, config.config.es));
+        await bundle.write(outputOptions[0]);
+    }
+    await buildExtraCss();
+    utils.log.success('✅ Build complete!');
+}
+const copyTds = () => {
+    return gulp.src([`${config.config.es}/**/*.d.ts`]).pipe(gulp.dest(config.config.cjs));
+};
+var index = gulp.series(clean, build, copyTds);
+
+exports.default = index;

package/package.json

@@ -1,8 +1,8 @@
 {
 	"name": "@es-pkg/compile",
-	"version": "1.0.2",
+	"version": "1.0.4",
 	"description": "组件打包工具",
-	"main": "src/index.ts",
+	"main": "cjs/index.js",
 	"keywords": [
 		"package",
 		"es-pkg"
@@ -21,12 +21,14 @@
 	"author": "pan",
 	"license": "ISC",
 	"dependencies": {
-		"gulp-autoprefixer": "^8.0.0",
-		"gulp-babel": "^8.0.0",
-		"gulp-sass": "^5.1.0",
-		"gulp-typescript": "^6.0.0-alpha.1",
-		"gulp-plumber": "latest",
-		"gulp-rename": "latest",
+		"@rollup/plugin-commonjs": "^29.0.0",
+		"@rollup/plugin-node-resolve": "^16.0.3",
+		"rollup": "^4.52.5",
+		"rollup-plugin-postcss": "^4.0.2",
+		"@rollup/plugin-typescript": "^12.3.0",
+		"@rollup/plugin-json": "^6.1.0",
+		"autoprefixer": "^10.4.21",
+		"cssnano": "latest",
 		"sass": "^1.53.0",
 		"@es-pkg/gulp": "latest",
 		"@es-pkg/gulp-logger": "latest",
@@ -37,8 +39,10 @@
 		"access": "public",
 		"registry": "https://registry.npmjs.org"
 	},
+	"module": "src/index.ts",
 	"types": "src/index.ts",
 	"files": [
-		"src"
+		"src",
+		"cjs"
 	]
 }

package/src/index.ts

@@ -1,29 +1,17 @@
-import gulp, {series, parallel} from "@es-pkg/gulp";
-import logger from "@es-pkg/gulp-logger";
-import plumber from "gulp-plumber"
-import ts from "gulp-typescript"
-import typescript from "typescript"
-import babel from "gulp-babel"
-import gulpSass from "gulp-sass";
-import rename from "gulp-rename";
-import autoPreFixer from "gulp-autoprefixer"
-import Sass from "sass";
-import {remove, log} from "@es-pkg/utils";
-import {config, getIncludeFiles, relativeToApp, resolveApp} from "@es-pkg/config";
-import path from "path";
-
-const sass = gulpSass(Sass)
-const include = getIncludeFiles()
-
-function getMatchFiles(callback: (path: string) => (string[]) | string, contains: boolean = true) {
-    return include.flatMap(item => {
-        if (contains && !item.isDirectory) {
-            return [item.path]
-        }
-        const res = callback(item.path);
-        return Array.isArray(res) ? res : [res]
-    })
-}
+import gulp, {series} from "@es-pkg/gulp";
+import {remove, log, getValidPkgName, toPascalCase} from "@es-pkg/utils";
+import {config, shallowInputs, pkg, relativeToApp, resolveApp} from "@es-pkg/config";
+import {OutputOptions, rollup, RollupOptions} from 'rollup';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+import json from '@rollup/plugin-json';
+import postcss from 'rollup-plugin-postcss';
+import autoprefixer from 'autoprefixer';
+import cssnano from 'cssnano';
+import path from 'node:path';
+import fs from 'node:fs'
+import {builtinModules} from 'node:module';
 
 const clean = () => {
     log(`清除 ${relativeToApp(config.es)} & ${relativeToApp(config.cjs)} 目录---开始`);
@@ -38,149 +26,185 @@ const clean = () => {
     })
 }
 
+function getPostcss(extract?: string | boolean) {
+    return postcss({
+        // 处理 Less（需安装 less）
+        extensions: ['.less', '.scss', '.sass'], // 识别 less 扩展名
+        // 为不同类型的文件指定对应的编译器（关键修改）
+        use: {
+            "stylus": ['sass'],
+            'less': ['less'], //.less 文件用 less 编译
+            'sass': ['sass']  //.sass 文件用 sass 编译（缩进语法）
+        },
 
-const dealScss = () => {
-    const copy = (dest: string) => {
-        return () => gulp.src(
-            getMatchFiles((path) => `${path}/**/*.scss`, false)
-        ).pipe(logger({
-            before: `copyScss...`,
-            after: 'copyScss complete!',
-            extname: '.scss',
-            showChange: true
-        }))
-            .pipe(gulp.dest(dest))
-    }
-    const compileScss = () => {
-        return gulp.src(
-            getMatchFiles((path) => `${path}/**/*.scss`, false)
-        )
-            .pipe(sass({outputStyle: 'compressed', outFile: 'xx'}).on('error', sass.logError))
-            .pipe(autoPreFixer())
-            .pipe(rename((path) => {
-                path.extname = ".min.css"
-            }))
-            .pipe(plumber())
-            .pipe(gulp.dest(config.cjs));
-    }
-    return parallel(copy(config.es), copy(config.cjs), compileScss)
-}
+        // 配置 PostCSS 插件（自动前缀、压缩）
+        plugins: [
+            autoprefixer({overrideBrowserslist: config.css.browserslist}),
+            cssnano() // 生产环境压缩 CSS
+        ],
 
+        // 输出配置：提取为单独的 CSS 文件（推荐）
+        extract, // 提取到 ${name}.min.css
 
-const copyScssToLib = () => {
-    return gulp.src(
-        getMatchFiles((path) => [`${path}/**/*.scss`, `${path}/**/*.less`], false)
-    )
-        .pipe(logger({
-            before: 'copyScssToLib...',
-            after: 'copyScssToLib complete!',
-            extname: '.scss',
-            showChange: true
-        }))
-        .pipe(gulp.dest(config.cjs));
+        // 可选：不提取，嵌入到 JS 中（通过 import 会生成 style 标签）
+        // extract: false
+    })
 }
-const compileEs = () => {
-    const tsConfig = typescript.readConfigFile(resolveApp('tsconfig.json'), typescript.sys.readFile);
-    if (tsConfig.error) {
-        console.log(tsConfig.error.messageText);
-    }
-    const compile = (src: string[], target: string) => {
-        return gulp.src(src)
-            .pipe(logger({
-                before: 'generate ...es ...',
-                after: 'generate ...es complete!',
-                extname: '.ts',
-                showChange: false,
-            }))
-            .pipe(ts({
-                "jsx": "react",
-                "noImplicitAny": true,
-                ...tsConfig.config.compilerOptions,
-                "module": "esnext",
-                "target": "esnext",
-                "newLine": 'crlf',
-                "allowImportingTsExtensions": false,
-                "baseUrl": "./",
-                "isolatedModules": false,
-                "removeComments": false,
-                "declaration": true,
-                "noEmit": false,
-                "esModuleInterop": true,
-                "resolveJsonModule": true,
-                "skipLibCheck": true,
-                "moduleResolution": 'node',
-            }))
-            .on('error', (e) => {
-                console.error(e)
-                throw e;
-            })
-            .pipe(logger({
-                before: 'writing to es...',
-                after: 'write  complete!',
-                extname: '.ts',
-                showChange: true,
-                display: 'name'
-            }))
-            .pipe(plumber())
-            .pipe(gulp.dest(target))
-            .pipe(gulp.src(config.include.map(item => `${item}/**/*.json`)))
-            .pipe(gulp.dest(target));
+
+const name = getValidPkgName(pkg.name);
+
+// 1. 配置输入选项
+function getInputOptions(isIIFE?: boolean, declarationDir?: string): RollupOptions {
+    function isNodeModule(id: string) {
+        // 获取模块绝对路径
+        try {
+            const resolved = require.resolve(id, {paths: [process.cwd()]});
+            return resolved.includes('node_modules');
+        } catch {
+            // 无法 resolve 的，认为是本地模块
+            return false;
+        }
     }
 
-    const tasks = include.map((item) => {
-        const isDirectory = item.isDirectory;
-        return () => compile(isDirectory ? [
-                `${item.path}/**/*`,
-                `!${item.path}/**/__test__/!**`,
-                `${config.typings}/**/*`,
-            ] : [item.path],
-            isDirectory && include.length > 1 ?
-                path.join(config.es, relativeToApp(item.path))
-                : config.es
-        )
+    return ({
+        input: shallowInputs.filter(item => !item.endsWith('.d.ts')),
+        external: id => {
+            // Node 内置模块或者 npm 包都 external
+            if (builtinModules.includes(id)) return true;
+            // 排除本地相对路径和绝对路径，别名映射到本地也不会 external
+            if (id.startsWith('.') || path.isAbsolute(id)) return false;
+            // node_modules 下的模块才 external
+            return isNodeModule(id);
+        },
+        plugins: [
+            json(),
+            isIIFE && resolve(),   // 解析 node_modules
+            commonjs(),   // 转换 CommonJS 模块
+            typescript({
+                tsconfig: resolveApp('tsconfig.json'), // 可选，指定 tsconfig
+                compilerOptions: {
+                    noImplicitAny: true,
+                    isolatedModules: false,
+                    declaration: !!declarationDir,
+                    allowImportingTsExtensions: false,
+                    declarationDir,
+                    noEmit: false,
+                    emitDeclarationOnly: !!declarationDir,
+                    esModuleInterop: true,
+                    resolveJsonModule: true,
+                    skipLibCheck: true,
+                    removeComments: false,
+                    rootDir: resolveApp('src'), // ✅ 指定源代码根目录
+                }
+            }),
+            getPostcss(config.css.extract)
+        ].filter(Boolean)
     })
-    return series(tasks)
 }
-const copyTds = () => {
-    return gulp.src([
-        `${config.es}/**/*.d.ts`,
-    ]).pipe(gulp.dest(config.cjs));
+
+async function buildExtraCss() {
+    const extras = config.css.extra;
+    if (!extras?.length) return;
+
+    const srcRoot = resolveApp('src');
+    const esRoot = resolveApp(config.es);
+
+    const tasks = extras.map(async (v) => {
+        try {
+            const absPath = resolveApp(v);               // 源文件绝对路径
+            const relativePath = path.relative(srcRoot, absPath); // 相对于 src 的路径
+            const dirname = path.dirname(relativePath);  // 相对目录
+            const filename = path.basename(v, path.extname(v)); // 文件名去掉扩展名
+
+            // rollup 打包
+            const bundle = await rollup({
+                input: [v],
+                plugins: getPostcss(path.join(dirname, `${filename}.min.css`))
+            });
+
+            await bundle.write({
+                dir: config.es,
+                format: 'es',
+                sourcemap: false,
+                preserveModules: true,
+                preserveModulesRoot: srcRoot
+            });
+
+            // 删除生成的 JS 文件
+            const jsFile = path.join(esRoot, dirname, `${filename}${path.extname(v)}.js`);
+            if (fs.existsSync(jsFile)) fs.unlinkSync(jsFile);
+
+            // 复制到其他目标目录
+            [config.cjs, config.iife].forEach(targetRoot => {
+                const dest = path.join(resolveApp(targetRoot), dirname, `${filename}.min.css`);
+                fs.mkdirSync(path.dirname(dest), {recursive: true});
+                fs.copyFileSync(
+                    path.join(esRoot, dirname, `${filename}.min.css`),
+                    dest
+                );
+            });
+
+            log.success(`✅ 编译完成: ${v}`);
+        } catch (err) {
+            log.error(`❌ 编译失败: ${v}`, err);
+        }
+    });
+
+    await Promise.all(tasks);
+    log.success('✅ 所有额外 CSS 编译完成');
 }
-const compileLib = () => {
-    return gulp.src([`${config.es}/**/*.js`])
-        .pipe(logger({
-            before: 'Starting transform ...',
-            after: 'transform complete!',
-            extname: '.js',
-            showChange: true
-        }))
-        .pipe(babel({
-            "presets": [
-                [
-                    "@babel/preset-env",
-                    {
-                        "targets": {
-                            "chrome": "58",
-                            "ie": "9"
-                        }
-                    }
-                ],
-                [
-                    "@babel/preset-react"
-                ]
-            ],
-            "plugins": ["@babel/plugin-transform-runtime"]
-        }))
-        .pipe(plumber())
-        .pipe(logger({
-            before: 'write js ---> ...',
-            after: 'write js ---> complete!',
-            extname: '.js',
-            showChange: true
-        }))
-        .pipe(gulp.dest(config.cjs))
+
+async function build() {
+
+    // 2. 配置输出选项
+    let outputOptions: OutputOptions[] = [
+        {
+            dir: config.es,
+            format: 'es',  // 输出 ES Module
+            sourcemap: false,
+            preserveModules: true,
+            preserveModulesRoot: resolveApp('src'), // ✅ 指定源代码根目录
+        },
+        {
+            dir: config.cjs,
+            format: 'cjs',  // 输出 COMMONJS
+            sourcemap: false,
+            preserveModules: true,
+            preserveModulesRoot: resolveApp('src'), // ✅ 指定源代码根目录
+            exports: "named",
+        },
+        {
+            dir: config.iife,
+            format: 'iife',  // 输出 iife
+            sourcemap: false,
+            exports: "named",
+            name: toPascalCase(name)
+        }
+    ];
+    if (!config.iife) {
+        outputOptions = outputOptions.filter(op => op.format !== 'iife')
+    }
+
+    for (const output of outputOptions) {
+        // 3. 调用 rollup 打包
+        const bundle = await rollup(getInputOptions(output.format === 'iife'));
+        // 4. 写入文件
+        await bundle.write(output);
+    }
+    {
+        const bundle = await rollup(getInputOptions(false, config.es));
+        await bundle.write(outputOptions[0]);
+    }
+    await buildExtraCss();
+    log.success('✅ Build complete!');
 }
 
-const compileEsAndLib = series(compileEs(), copyTds, compileLib)
 
-export default series(clean, parallel(dealScss(), copyScssToLib, compileEsAndLib))
+const copySrcTds = () => {
+    return gulp.src(config.include.map(t=>`${t}/**/*.d.ts`)).pipe(gulp.dest(config.es));
+}
+
+const copyTds = () => {
+    return gulp.src([`${config.es}/**/*.d.ts`]).pipe(gulp.dest(config.cjs));
+}
+export default series(clean, build, copySrcTds, copyTds)