rollup的打包逻辑和配置和执行命令和常用的辅助插件-Toy模板网

这篇具有很好参考价值的文章主要介绍了rollup的打包逻辑和配置和执行命令和常用的辅助插件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

最近要离职了，得记录一下这几年的技术要点，不涉及开发成果，更多是是一些插件的应用思路。
这几天做交接，感觉自己做的东西还是蛮不错的。
这里记录一下rollup使用的插件，和使用形式。其中第一部分为基础配置，第二部分为个性化配置。
这套，支持ts的打包，参数通过命令传入调取，npm run component – --pel njsdj0

${argv[6]}文章来源地址https://www.toymoban.com/news/detail-526253.html

import { babel } from "@rollup/plugin-babel";
import json from "@rollup/plugin-json";
import commonjs from "@rollup/plugin-commonjs";
import { nodeResolve } from "@rollup/plugin-node-resolve";
import replace from "@rollup/plugin-replace";
import { uglify } from "rollup-plugin-uglify";

var baseConfig = {
    plugins: [
        ...(process.env.NODE_ENV ? [
            replace({
                "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
            }),
        ] : []),
        nodeResolve(),
        json(),

        babel(),
        commonjs(),

        // 代码压缩插件，按需打开使用
        // uglify(),
    ],
 
};
export { baseConfig }

import { banner } from "./helper";
import { baseConfig } from "./rollup-base-config";
import postcss from "rollup-plugin-postcss";
import autoprefixer from "autoprefixer";
import cssnano from "cssnano";
import { argv } from "process";
import typescript from '@rollup/plugin-typescript';

baseConfig.plugins.push(
  typescript({ compilerOptions: {lib: ["es5", "es6", "dom"], target: "es6"}}),
    postcss({
        plugins: [autoprefixer, cssnano],
    })
);

//  npm run component -- --pel njsdj0 调用命令

var inputPath = `src/pels/${argv[6]}/component.ts`;
const config = Object.assign(baseConfig, {
    //此处入口文件发生修改
    input: inputPath,
    output: {
        file: "./out/components/" + argv[6] + ".js",
        format: "esm",
        banner: banner,
        extend: false,
    },
});

module.exports = config;

到了这里，关于rollup的打包逻辑和配置和执行命令和常用的辅助插件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！