rollup 打包配置支持 typescript + react
rollup 是js 打包器，打包体积小，代码精简，较少注入，适合组件打包。
rollup 建议node 升级到10以上
安装 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
安装rollup-plugin-typescript2插件
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
安装rollup-plugin-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.
原因cannot-find-module-csstype
解决：配置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.
安装rollup-plugin-postcss
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组件源码
测试组件
当前bulletin组件目录下npm link，
另一项目目录下npm link bulletin，即可测试该bulletin组件
作者：奋斗的小小小兔子
链接：https://www.jianshu.com/p/21f799a9d9b7
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。