rollup 打包配置支持 typescript + react
rollup 是js 打包器，打包体积小，代码精简，较少注入，适合组件打包。
安装 typescript
安装typescript：npm install typescript -D
typescript 配置文件 tsconfig.json
{
"compilerOptions": {
"allowUnreachableCode": true, // 不报告执行不到的代码错误。
"allowUnusedLabels": false, // 不报告未使用的标签错误
"alwaysStrict": false, // 以严格模式解析并为每个源文件生成 "use strict"语句
"baseUrl": ".", // 工作根目录
"experimentalDecorators": true, // 启用实验性的ES装饰器
"jsx": "react", // 在 .tsx文件里支持JSX
"sourceMap": true, // 是否生成map文件
"module": "ES2015", // 指定生成哪个模块系统代码
"noImplicitAny": false, // 是否默认禁用 any
"removeComments": true, // 是否移除注释
"paths": { // 指定模块的路径，和baseUrl有关联，和webpack中resolve.alias配置一样
"src": [ //指定后可以在文件之直接 import * from 'src';
"./src"
]
},
"target": "ESNext", // 编译的目标是什么版本的
"outDir": "./ts/dist", // 输出目录
"declaration": true, // 是否自动创建类型声明文件
"declarationDir": "./ts/lib", // 类型声明文件的输出目录
"allowJs": true, // 允许编译javascript文件。
"lib": [ // 编译过程中需要引入的库文件的列表
"es5",
"es2015",
"es2016",
"es2017",
"es2018",
"dom"
]
},
// 指定一个匹配列表（属于自动指定该路径下的所有ts相关文件）
"include": [
"src/**/*"
],
// 指定一个排除列表（include的反向操作）
"exclude": [
"node_modules",
"dist"
]
}
rollup 支持 typescript
npm install rollup-plugin-typescript2 typescript --save-dev
配置rollup.config.js文件
import typescript from 'rollup-plugin-typescript';
export default {
input: './main.ts',
plugins: [
typescript(), // 会自动读取 文件tsconfig.json配置
]
}
引入babel，转换js新方法使得浏览器可用
安装babel 插件
npm install @babel/preset-typescript @babel/preset-react @babel/preset-env -D
配置.babelrc 文件
{
"presets": [
"@babel/preset-typescript", "@babel/preset-react",
[
"@babel/preset-env",
{
"modules": false
}
]
]
}
@babel/preset-env 的参数modules， 将 ES6 module 转换为其他模块规范，可选 "adm" | "umd" | "systemjs" | "commonjs" | "cjs" | false，默认为 false
rollup 支持 babel
npm install --save-dev rollup-plugin-babel@latest
配置rollup.config.js文件
import babel from 'rollup-plugin-babel';
{
// ...
plugins: [
// ...
babel(),
],
// ...
}
eslint 检查js代码规范
使用tslint
tslint 安装插件
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
配置文件.eslintrc
{
"root": true,
"parser": "@typescript-eslint/parser",
"plugins": [
"@typescript-eslint"
],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended"
],
"rules": {
"no-plusplus": 0
}
}
rollup 支持 tslint
npm i rollup-plugin-tslint -D
配置rollup.config.js文件
import typescript from 'rollup-plugin-typescript2';
import tslint from "rollup-plugin-tslint";
{
// ...
plugins: [
// ...
tslint(),
typescript(),
],
// ...
}
rollup 打包过程中遇到的问题
问题： Cannot find module 'react' or its corresponding type declarations.
解决：
npm install @types/react -D
问题：Module '"/node_modules/@types/react/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag
解决：配置tsconfig.json
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
}
}
问题： Cannot find module 'csstype' or its corresponding type declarations.
解决：配置tsconfig.json
{
"compilerOptions": {
"moduleResolution": "node",
}
}
问题：Invalid source file: /Users/bulletin/src/style.css. Ensure that the files supplied to lint have a .ts, .tsx, .d.ts, .js or .jsx extension.
npm install --save-dev rollup-plugin-postcss
解决：配置rollup.config.js
import postcss from 'rollup-plugin-postcss'
{
// ...
plugins: [
// ...
postcss(),
],
// ...
}
问题：Could not find "stylelint-config-standard". Do you need a configBasedir?
解决：
npm install stylelint-config-standard -D
问题： Unresolved dependencies react
解决：安装 插件 以加载外部模块
npm install @rollup/plugin-node-resolve -D
问题：[!] Error: 'default' is not exported by ../../node_modules/react
解决：配置 rollup.config.js
{
plugins: [
stylelint(),
postcss(),
tslint({
throwOnError: true,
throwOnWarning: true,
include: ['src/**/*.ts', 'src/**/*.tsx'],
exclude: ['node_modules/**', '*.js', '*.scss', '*.css'],
}),
typescript(),
babel(),
commonjs({ include: /node_modules/ }),
resolve(),
],
external: ['react', 'react-dom'],
};
测试组件
当前bulletin组件目录下npm link，
另一项目目录下npm link bulletin，即可测试该bulletin组件
