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組件
