业务线长期的积累产生了许许多多重复性的工具方法,业务功能模块等, 我们正好可以用 rollup 构建一个 npm 私服工具包,便于后期业务使用,减少重复性的代码编写。
首先运行以下命令安装babel相关:
yarn add @babel/core @babel/cli @babel/preset-env -D
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"]
};
"scripts:" {
"babel": "babel ./src/index.js -o ./dist/index.js"
}
面向未来,所以这里引入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']
};
项目是纯粹的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
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()
]
};
"scripts:" {
"build": "rollup -c"
}
正好引入单元测试,便于项目后续迭代维护
yarn add jest@27.0.2 jest-globals ts-jest@27.0.2 @types/jest babel-jest@27.0.2 -D
module.exports = {
preset: 'ts-jest',
testEnvironment: 'node',
transform: {
'^.+\\.jsx?$': 'babel-jest', // 这个是jest的默认配置
'^.+\\.ts?$': 'ts-jest' // typescript转换
}
};
"scripts:" {
"test": "jest"
}
这里使用的部门内部规范化校验工具,直接进行整体的规范化校验,所以不再过多赘述,推荐参考 eslint-config-alloy https://github.com/AlloyTeam/eslint-config-alloy
这里引入了 rimraf,再每次打包前,将原有的 dist 目录下文件删除
"build": "rimraf dist/* && rollup -c"
这里引入了release-it,便于我们快速的进行 npm 发布
yarn add release-it -D
{
"git": {
"commitMessage": "chore: release v${version}"
},
"npm": {
"publish": false
},
"publishConfig": {
"registry": "私服地址"
}
}
"scripts:" {
"release": "release-it",
}
{
"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是一款小巧的javascript模块打包工具,更适合于库应用的构建工具;可以将小块代码编译成大块复杂的代码,基于ES6 modules,它可以让你的 bundle 最小化
其实用 webpack 也可以打包库,不过根据create-react-app项目贡献者的说法:rollup适合发布 js 库,而webpack更适合做应用程序。简而言之就是:rollup 打包 js 比 webpack 方便,而 webpack 打包 css 比 rollup 方便,相信大家已经有所了解
目前主流的前端框架vue和react都采用rollup来打包,为了探索rollup的奥妙,接下来就让我们一步步来探索,并基于rollup搭建一个库打包脚手架,来发布自己的库和组件。
Rollup 是一个 JavaScript 模块打包器,说到模块打包器,自然就会想到 webpack。webpack 是一个现代 JavaScript 应用程序的静态模块打包器,那么在 webpack 已经成为前端构建主流的今天,为什么还要用 Rollup 呢?
rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码,其源码中模块的导入导出采用的是ES6模块语法,即源码需要采用ES6语法进行编写。
Rollup 是一个 JavaScript 模块打包器,它将小块的代码编译并合并成更大、更复杂的代码,比如打包一个库或应用程序。它使用的是 ES Modules 模块化标准,而不是之前的模块化方案
打包工具的作用是,将多个 JavaScript 脚本合并成一个脚本,供浏览器使用。浏览器需要脚本打包,主要原因有三个。rollup.js 的开发本意,是打造一款简单易用的 ES 模块打包工具,不必配置,直接使用。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!