rollup packaging project

Select rollup to package the pure js plugin.

Rollup just converts our code into target js and there is nothing else like webpack that can package pictures, etc.

  1. New project file

  2. Enter the file through cmd, use npm to initialize the project

    npm init -y

3. Install the package

        We need to install and rollup to package our plugins. We need to use es6 syntax when writing js plugins. We also need to install babel that converts es6 into es5, so we need to install, @babel/core, @babel/preset -env We also need to install the plugin rollup-plugin-babel to associate bael with rollup

yarn add  rollup @babel/core @babel/preset-env rollup-plugin-babel

4 Create a new folder src, create a new index.js file, and write the code

let a =1
console.log(a)

5. Create a new rollup configuration file rollup.config.js

        Configure packaging entry files, export files, and configure plugins

/*
 * @Author: huangtaoying [email protected]
 * @Date: 2022-05-17 15:24:45
 * @LastEditors: huangtaoying [email protected]
 * @LastEditTime: 2022-05-17 15:28:31
 * @FilePath: \vue-yuanma\rollup.config.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import babel from 'rollup-plugin-babel'
export default{
  input:'./src/index.js',
  output:{
    file:'dist/vue.js',
    sourcemap:true,
    format:'umd'
  },
  plugins:[
    babel({exclude:'node_modules/**'})
  ]
}

6 Create a new .babelrc file to configure babel

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

7 Configure rollup packaging in the package.json file

{
  "name": "vue-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "serve": "rollup -c -w"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.17.12",
    "@babel/preset-env": "^7.17.12",
    "rollup": "^2.73.0",
    "rollup-plugin-babel": "^4.4.0"
  }
}

8 Package in the terminal yarn serve

9 You can view the bue.js file under dist, and you have converted es6 to es5

 The entire project directory structure i

Guess you like

Origin blog.csdn.net/qq_27449993/article/details/124823887