最近要離職了，得記錄一下這幾年的技術要點，不涉及開發(fā)成果，更多是是一些插件的應用思路。
這幾天做交接，感覺自己做的東西還是蠻不錯的。
這里記錄一下rollup使用的插件，和使用形式。其中第一部分為基礎配置，第二部分為個性化配置。
這套，支持ts的打包，參數(shù)通過命令傳入調(diào)取，npm run component – --pel njsdj0文章來源：http://www.zghlxwxcb.cn/news/detail-526253.html
${argv[6]}文章來源地址http://www.zghlxwxcb.cn/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 調(diào)用命令
var inputPath = `src/pels/${argv[6]}/component.ts`;
const config = Object.assign(baseConfig, {
//此處入口文件發(fā)生修改
input: inputPath,
output: {
file: "./out/components/" + argv[6] + ".js",
format: "esm",
banner: banner,
extend: false,
},
});
module.exports = config;
到了這里，關于rollup的打包邏輯和配置和執(zhí)行命令和常用的輔助插件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
