rollup搭建前端js库项目

1. 创建项目

命令行执行一下命令，初始化项目

npm init

2. 在本地安装 Rollup

项目根目录下执行命令

npm install rollup --save-dev
// yarn -D add rollup

3. 配置文件

项目根目录下创建 rollup.config.js 文件, 如下内容是一个简单的配置。
下面会更新

import { name } from './package.json'
export default [
	{
		input: 'src/main.js',
		output: {
			file: `dist/${name}.js`,
			format: 'cjs',
		},
	},
]

执行 npx rollup --config 命令，正常会按照 config 文件配置进行打包到 dist 目录

4. 添加编译命令

    // /package.json
    "scripts": {
            "build": "rollup -c",
            "dev": "rollup -c -w"
        },

5. 插件安装

导入 json 文件数据

1. 安装 @rollup/plugin-json

   npm install --save-dev @rollup/plugin-json
   

2. rollup.config.js 添加插件

   // rollup.config.js
   import json from '@rollup/plugin-json'
   
   export default {
   	input: 'src/main.js',
   	output: {
   		...
   	},
   	plugins: [json()],
   }
   

3. 使用 json 文件数据

   // src/main.js
   import { version } from '../package.json'
   
   export class Guide {
   	constructor() {
   		this.version = version
   	}
   }
   

安装 babel

1. 安装@rollup/plugin-babel 插件

   npm i -D @rollup/plugin-babel @rollup/plugin-node-resolve
   

2. rollup.config.js添加插件

   // rollup.config.js
   import resolve from '@rollup/plugin-node-resolve';
   import babel from '@rollup/plugin-babel';
   
   export default {
   input: 'src/main.js',
   output: {...},
   plugins: [resolve(), babel({ babelHelpers: 'bundled' })]
   };
   

3. 添加 babel 配置文件
   代码目录下新建.babelrc.json

   {
   "presets": ["@babel/env"]
   }
   

4. 安装 babel/core

   npm i -D @babel/core @babel/preset-env
   

运行查看

安装 commonjs

1. 安装@rollup/plugin-commonjs

   npm install @rollup/plugin-commonjs --save-dev
   

2. 添加插件

import commonjs from '@rollup/plugin-commonjs'

export default [
	{
		...
		plugins: [
			commonjs(),
		],
	},
]

安装 terser

js 压缩插件

1. 安装rollup-plugin-terser

yarn add rollup-plugin-terser --dev
## Or with npm:
npm i rollup-plugin-terser --save-dev

2. 配置

//
import { terser } from "rollup-plugin-terser";

export default [
	{
		...
		plugins: [
			terser()
		],
	},
]

构建插件 - progress

在控制台中显示构建进度。

1. 安装rollup-plugin-progress

npm i rollup-plugin-progress --save-dev

2. 配置

//
import progress from 'rollup-plugin-progress'

export default [
	{
		...
		plugins: [
			progress()
		],
	},
]

2. 构建插件 - filesize

在控制台中显示包的文件大小。

1. 安装rollup-plugin-filesize

npm install rollup-plugin-filesize

2. 配置

//
import filesize from 'rollup-plugin-filesize';

export default [
	{
		...
		plugins: [
			filesize()
		],
	},
]

安装 postcss

处理 css - 需要继续补充

1. 安装 rollup-plugin-postcss, 官方推荐使用yarn

   yarn add postcss rollup-plugin-postcss --dev
   

2. 配置

   //
   {
   	input: `${inputPath}/style/style.scss`,
   	output: {
   		file: `${outputPath}/${name}.css`,
   		format: 'es',
   		banner,
   	},
   	plugins: [
   		bundleScss({ exclusive: false }),
   		postcss({
   			extract: true,
   			plugins: postCSSPlugins,
   		}),
   	],
   }
   

6. 更新配置文件

1. 插件单独维护

const jsPlugins = [
	json(),
	resolve(),
	progress(),
	filesize({
		showGzippedSize: true,
	}),
	babel({
		exclude: 'node_modules/**',
	}),
	commonjs(),
]

export default [
	{
		input: `${inputPath}/main.js`,
		output: {
			file: `${outputPath}/${name}.js`,
			format: 'umd',
			name: name.replace(/^[a-z]/, (a) => {
				return a.toUpperCase()
			}),
			banner,
		},
		plugins: jsPlugins,
	},
	{
		input: `${inputPath}/main.js`,
		output: {
			file: `${outputPath}/${name}.min.js`,
			format: 'umd',
			name: name,
			banner,
		},
		plugins: [...jsPlugins, terser()],
	},
]

参考

// /rollup.config.js
import { name, version } from './package.json'
import json from '@rollup/plugin-json'
import resolve from '@rollup/plugin-node-resolve'
import { babel } from '@rollup/plugin-babel'
import postcss from 'rollup-plugin-postcss'
import normalize from 'postcss-normalize'
import autoprefixer from 'autoprefixer'
import commonjs from '@rollup/plugin-commonjs'
import progress from 'rollup-plugin-progress'
import filesize from 'rollup-plugin-filesize'
import { terser } from 'rollup-plugin-terser'
import cssnano from 'cssnano'
import bundleScss from 'rollup-plugin-bundle-scss'

// import sass from 'rollup-plugin-sass'

const inputPath = './src'
const outputPath = './dist'

const banner = `/*!
 * ${name} v${version}
 * author: xxxx
 * Date: ${new Date().toUTCString()}
 */
`

const jsPlugins = [
	json(),
	resolve(),
	progress(),
	filesize({
		showGzippedSize: true,
	}),
	babel({
		exclude: 'node_modules/**',
	}),
	commonjs(),
]

const postCSSPlugins = [normalize, autoprefixer]
export default [
	{
		input: `${inputPath}/style/style.scss`,
		output: {
			file: `${outputPath}/${name}.css`,
			format: 'es',
			banner,
		},
		plugins: [
			bundleScss({ exclusive: false }),
			postcss({
				extract: true,
				plugins: postCSSPlugins,
			}),
		],
	},
	{
		input: `${inputPath}/style/style.scss`,
		output: {
			file: `${outputPath}/${name}.min.css`,
			format: 'es',
			banner,
		},
		plugins: [
			postcss({
				extract: true,
				sourceMap: true,
				plugins: [...postCSSPlugins, cssnano()],
			}),
		],
	},
	{
		input: `${inputPath}/main.js`,
		output: {
			file: `${outputPath}/${name}.js`,
			format: 'umd',
			name: name.replace(/^[a-z]/, (a) => {
				return a.toUpperCase()
			}),
			banner,
		},
		plugins: jsPlugins,
	},
	{
		input: `${inputPath}/main.js`,
		output: {
			file: `${outputPath}/${name}.min.js`,
			format: 'umd',
			name: name,
			banner,
		},
		plugins: [...jsPlugins, terser()],
	},
]