rollup配置及使用

前言

业务线长期的积累产生了许许多多重复性的工具方法，业务功能模块等，我们正好可以用 rollup 构建一个 npm 私服工具包，便于后期业务使用，减少重复性的代码编写。

项目配置

babel

引入依赖

首先运行以下命令安装babel相关：

yarn add @babel/core @babel/cli @babel/preset-env -D

配置`babel.config.js`

module.exports = {presets: [["@babel/preset-env",{targets: "> 0.25%, not dead"}]]
};

搭配@babel/plugin-transform-runtime和core-js：

yarn add core-js @babel/runtime
yarn add @babel/plugin-transform-runtime -D

修改babel.config.js如下：

module.exports = {presets: [["@babel/preset-env",{targets: "> 0.25%, not dead",useBuiltIns: "usage",corejs: "3.6.5"}]],plugins: ["@babel/plugin-transform-runtime"]
};

增加 npm scripts

"scripts:" {"babel": "babel ./src/index.js -o ./dist/index.js"
}

Typescript

面向未来，所以这里引入typescript，统一用 ts 进行开发

yarn add typescript@4.3.5 -D
yarn add @babel/preset-typescript -D

修改babel配置如下：

module.exports = {presets: [['@babel/preset-env',{targets: '> 0.25%, not dead',useBuiltIns: 'usage',corejs: '3.6.5'},'@babel/preset-typescript']],plugins: ['@babel/plugin-transform-runtime']
};

rollup

项目是纯粹的Javascript项目，没有vue、react相关的业务性代码，所以使用 rollup 进行打包。

引入依赖

yarn add rollup @rollup/plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve rollup-plugin-terser rollup-plugin-typescript2 tslib -D

配置`rollup.config.js`

import babel from '@rollup/plugin-babel'; // 引入babel
import commonjs from '@rollup/plugin-commonjs'; // 引入cjs插件
import { nodeResolve } from '@rollup/plugin-node-resolve'; // 引入resolve
import typescript from 'rollup-plugin-typescript2'; // ts
import { terser } from 'rollup-plugin-terser'; // 压缩打包文件const extensions = ['.js', '.ts'];const pkg = require('./package.json'); // 从package.json引入const version = pkg.version; // 项目版本
const license = pkg.license; // 协议
const author = pkg.author; // 作者// 打包文件的头部声明
const banner ='/*!\n' +` * ${pkg.name} v${version}\n` +` * (c) 2020-${new Date().getFullYear()} ${author}\n` +` * Released under the ${license} License.\n` +' */';module.exports = {input: 'src/index.ts',output: [// 文件输出配置{file: 'dist/index.umd.js', // 打包后生产的文件位置，及文件名format: 'umd',name: 'utools', // 包的全局变量名称banner},{file: 'dist/index.esm.js', // 打包后生产的文件位置，及文件名format: 'esm',name: 'utools', // 包的全局变量名称banner}],plugins: [nodeResolve({extensions,modulesOnly: true}),commonjs(),typescript(),babel({babelHelpers: 'runtime',include: 'src/**',exclude: 'node_modules/**',extensions}),terser()]
};

增加 npm scripts

"scripts:" {"build": "rollup -c"
}

Jest

引入依赖

正好引入单元测试，便于项目后续迭代维护

yarn add jest@27.0.2  jest-globals ts-jest@27.0.2 @types/jest babel-jest@27.0.2 -D

配置`jest.config.js`

module.exports = {preset: 'ts-jest',testEnvironment: 'node',transform: {'^.+\\.jsx?$': 'babel-jest', // 这个是jest的默认配置'^.+\\.ts?$': 'ts-jest' // typescript转换}
};

增加 npm scripts

"scripts:" {"test": "jest"
}

Eslint+commitlint

这里使用的部门内部规范化校验工具，直接进行整体的规范化校验，所以不再过多赘述，推荐参考 eslint-config-alloy https://github.com/AlloyTeam/eslint-config-alloy

其他配置

rimraf

这里引入了 rimraf，再每次打包前，将原有的 dist 目录下文件删除

修改 npm scripts

"build": "rimraf dist/* && rollup -c"

release-it

这里引入了release-it，便于我们快速的进行 npm 发布

安装依赖

yarn add release-it -D

新增`.release-it.json`文件

{"git": {"commitMessage": "chore: release v${version}"},"npm": {"publish": false},"publishConfig": {"registry": "私服地址"}
}

新增 npm scripts

"scripts:" {"release": "release-it",
}

package.json 如下

{"name": "module name","version": "module version","description": "module desc","main": "dist/index.umd.js","types": "types/index.d.ts","module": "dist/index.esm.js","scripts": {"test": "jest","babel": "babel ./src/index.js -o ./dist/index.js","build": "rimraf dist/* && rollup -c","release": "release-it","release:beta": "release-it major --preRelease=beta","fix:src": "npx eslint src --fix --ext .ts","fix:test": "npx eslint test --fix --ext .js","lint": "npm run fix:src && npm run fix:test"},"repository": {"type": "git"},"author": "module author","license": "MIT","devDependencies": {},"dependencies": {}
}

rollup配置及使用相关推荐

前端工具-Rollup
拨云见日 Rollup的存在并不是为了取代webpack,仅仅是弥补webpack的一些不足,webpack和rollup各有各的应用场景,rollup专注以ESModule打包/自动treeshak ...
JavaScript模块打包器rollup
学习资料:拉勾课程<大前端高薪训练营> 阅读建议:搭配文章的侧边栏目录进行食用,体验会更佳哦. 内容说明:本文不做知识点的搬运工,技术详情请查看官方文档. 一:认识rollup rollu ...
Rollup常用插件详解
文章目录系列文章 @rollup/plugin-node-resolve Options extensions @rollup/plugin-commonjs @rollup/plugin-babe ...
深入Vue - 源码目录及构建过程分析
摘要: Vue源码阅读第一步. 原文:深入vue - 源码目录及构建过程分析公众号:前端小苑 Fundebug经授权转载,版权归原作者所有. 本文主要梳理一下vue代码的目录,以及vue代码构建流程 ...
webuploader 怎么在react中_另辟蹊径搭建阅读React源码调试环境支持所有React版本细分文件断点调试...
引言(为什么写这篇文章) 若要高效阅读和理解React源码,搭建调试环境是必不可少的一步.而常规方法:使用react.development.js和react-dom.development.js调试 ...
我从 Vuejs 中学到了什么——框架设计学问
框架设计远没有大家想的那么简单,并不是说只把功能开发完成,能用就算完事儿了,这里面还是有很多学问的.比如说,我们的框架应该给用户提供哪些构建产物?产物的模块格式如何?当用户没有以预期的方式使用框架时是 ...
编译打包vue_Vue 源码分析（一）
Vue 源码分析( 一 )目录结构.版本.入口 1.Vue 源码目录结构 dist:打包之后生成的结果目录 examples:代码示例 scripts:配置文件 src:源代码目录compiler: ...
jQuery：从零开始，DIY一个jQuery（2）
在上篇文章我们简单实现了一个 jQuery 的基础结构,不过为了顺应潮流,这次咱把它改为模块化的写法,此举得以有效提升项目的可维护性,因此在后续也将以模块化形式进行持续开发. 模块化开发和编译需要用上 ...
从零开始，DIY一个jQuery（2）
在上篇文章我们简单实现了一个 jQuery 的基础结构,不过为了顺应潮流,这次咱把它改为模块化的写法,此举得以有效提升项目的可维护性,因此在后续也将以模块化形式进行持续开发. 模块化开发和编译需要用上 ...

rollup配置及使用

前言

项目配置

babel

引入依赖

配置`babel.config.js`

增加 npm scripts

Typescript

rollup

引入依赖

配置`rollup.config.js`

增加 npm scripts

Jest

引入依赖

配置`jest.config.js`

增加 npm scripts

Eslint+commitlint

其他配置

rimraf

修改 npm scripts

release-it

安装依赖

新增`.release-it.json`文件

新增 npm scripts

package.json 如下

rollup配置及使用相关推荐

最新文章

热门文章

rollup配置及使用

前言

项目配置

babel

引入依赖

配置babel.config.js

增加 npm scripts

Typescript

rollup

引入依赖

配置rollup.config.js

增加 npm scripts

Jest

引入依赖

配置jest.config.js

增加 npm scripts

Eslint+commitlint

其他配置

rimraf

修改 npm scripts

release-it

安装依赖

新增.release-it.json文件

新增 npm scripts

package.json 如下

rollup配置及使用相关推荐

最新文章

热门文章

配置`babel.config.js`

配置`rollup.config.js`

配置`jest.config.js`

新增`.release-it.json`文件