rollup初探，加载eslint，babel7,ts等

缘由

没啥多的，也是闲的。至于rollup主要是因为我想写一个自己的封装的http的封装。但是用webpack又感觉哪里不对劲。然后又想到vue等主流开源框架都用rollup进行打包，就学一下。

注意该文档能跑起来，但是诸多配置，个人也是东拼西凑，特别是关于ts部分自己改改ts.config

一、跟着官方走一遍

官方参考：参考：www.rollupjs.com/guide/tutor…

1、npm install rollup --global

2、创建文件夹，创建main.js

3、创建配置文件rollup.config.js

初始

const config = {
  input: 'src/main.js',
  output: {
    name: 'dhtAjax',
    file: 'dist/index.js',
    format: 'umd', // 输出umd格式，各种模块规范通用
    sourcemap: true, //生成bundle.map.js文件，方便调试
  },
  plugins: [ ],
}
export default config

4、npm init

5、在package.json里面新增

"scripts": {
  "bulid": "rollup --config rollup.config.js"
},

6、npm run bulid

后面都执行这个命令就可以执行打包了

二、添加各种插件

参考官方：www.rollupjs.com/guide/tutor…

注意安装的时候需要是npm i -D 注意大写D

'rollup-plugin-json' // 支持json

'rollup-plugin-node-resolve' // 识别node_modules包

'rollup-plugin-commonjs' // 将非ES6语法的包转为ES6可用

import { terser } from 'rollup-plugin-terser' // 压缩js

配置文件变成

const config = {
  input: 'src/main.js',
  output: {
    name: 'dhtAjax',
    file: 'dist/index.js',
    format: 'umd', // 输出umd格式，各种模块规范通用
    sourcemap: true, //生成bundle.map.js文件，方便调试
  },
  plugins: [
    nodeResolve(),
    commonjs(),
    json(),
    terser(),
  ],
}

三、添加babel

1、添加配置文件

.babelrc

里面

{
  "presets": [
    "@babel/preset-env",
  ]
}

2、安装

npm i -D rollup-plugin-babel
npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill

四、添加eslint，ts，prettier

注意这里我eslint规则直接使用ts的eslint规则，如果不用ts那么就直接把文件夹改为js就行

1、安装ts

npm i -D @typescript-eslint/parser typescript rollup-plugin-typescript2
npm i @babel/polyfill

添加.eslintrc.js，是根目录

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    sourceType: 'module',
  },
  plugins: ['prettier'],
  // exclude: ['dist'],
  rules: {
    'prettier/prettier': 'error',
    'no-console': 'off',
    'no-debugger': 'warn',
    'no-unused-vars': 'off',
  },
}

ts.config.js配置文件

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": ["jest", "puppeteer", "node"],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

3、eslint和prettier

npm i -D eslint eslint-plugin-prettier prettier

五、我的git地址

有点流水账，可以直接拿我git项目，然后把ts文件改为js就行了

git: github.com/ht-sauce/dh…

下一步把这个封装成脚手架，也是学习了