rollup 打包配置支持 typescript + react

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