The reason

There is not much, and I have nothing to do. The main reason for rollup was because I wanted to write my own wrapper HTTP wrapper. But there’s something wrong with Webpack. Then remember that major open source frameworks like Vue are packaged in Rollup.

Note that the document works, but a lot of the configuration is patchy, especially in the TS section

One, follow the official walk again

The official reference: reference: www.rollupjs.com/guide/tutor…

NPM install rollup –global

2, create folder, create main.js

3. Create configuration file rollup.config.js

The initial

const config = { input: 'src/main.js', output: { name: 'dhtAjax', file: 'dist/index.js', format: }, plugins: [],} export default config. Plugins: [],} export default configCopy the code

4, NPM init

5. Add it to package.json

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

6, NPM run bulid

Execute this command to execute the packaging

Second, add various plug-ins

Refer to the official: www.rollupjs.com/guide/tutor…

Note The installation must be NPM I -D with capital D

‘rollup-plugin-json’ // supports JSON

‘rollup-plugin-node-resolve’ // identify the node_modules package

‘rollup-plugin-commonjs’ // make packages with non-ES6 syntax available for ES6

Import {terser} from ‘rollup-plugin-terser’ // compress js

Configuration files become

const config = { input: 'src/main.js', output: { name: 'dhtAjax', file: 'dist/index.js', format: Sourcemap: true, // generate bundle.map.js file for debugging}, plugins: [ nodeResolve(), commonjs(), json(), terser(), ], }Copy the code

Add Babel

1. Add a configuration file

.babelrc

inside

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

2, installation,

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

4, Add ESLint, ts, prettier

Note that the ESLint rule uses the TS esLint rule directly, or if it doesn’t use TS it simply changes the folder to JS

1. Install TS

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

Add.eslintrc.js, the root directory

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',
  },
}
Copy the code

Ts.config. js configuration file

{
  "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"
  ]
}
Copy the code

3, esLint and Prettier

npm i -D eslint eslint-plugin-prettier prettier
Copy the code

My git address

You can directly take my Git project and change the TS file to JS

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

The next step to encapsulate this as scaffolding is learning