小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

Rollup从0到1上手前端组件库开发 | 模块构建

接上文 -Rollup从0到1上手前端组件库开发 | 起步

• rollup 切换模块化标准和多模块构建
• rollup node-resolve插件和babel-node使用

模块化标准

• umd 导出的是JS的 Function

• cjs 全程 CommonJS, 通过 module.exports 进行输出

• es ES6模块标准 export defaul 进行输出

  • 加上 type="module" 就可以支持

Rollup切换模块化标准

const outputUmdPath = path.resolve(__dirname, "./dist/payfun.rollbear.dev.js") // 输出路径
module.exports = {
    input: inputPath,
    output: {
        file: outputPath, // 输出路径
        format: 'umd', // 输出的模块协议 umd , 如果需要切换就修改这里 'cjs','es'
        name: "payfunRollbear" // 模块名称
    }
}

Rollup配置多模块构建

const outputUmdPath = path.resolve(__dirname, "./dist/payfun.rollbear.dev.js") // 输出路径
const outputEsPath = path.resolve(__dirname, "./dist/payfun.rollbear.dev.es.js") // 输出路径
module.exports = {
    input: inputPath,
     output: [
        {
            file: outputUmdPath, // 输出路径
            format: 'umd', // 输出的模块协议 umd
            name: "payfunRollbear" // 模块名称
        },
        {
            file: outputEsPath, // 输出路径
            format: 'es', // 输出的模块协议 es
            name: "payfunRollbear" // 模块名称
        }
    ]
}

yarn dev
# Rollup打包编译就会输出两个模块
├── dist
│   ├── payfun.rollbear.dev.es.js
│   └── payfun.rollbear.dev.js
└── ...

配置 rollup-plugin-node-resolve

yarn add -D rollup-plugin-node-resolve

vim rollup.config.dev.js

const path = require('path')
const resolve = require("rollup-plugin-node-resolve")

....
module.exports = {
  // ...
  // 增加代码, 使用resolve
    plugins:[
        resolve()
    ]
}

场景 我们的代码如果编写ES6的内容,该如何执行呢?

• yarn add @babel/cli global

• yarn add @babel/core global

• yarn add @babel/node global

• yarn add @babel/preset-env global

• 创建 .babelrc 配置文件

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

$ npx babel-node ./src/index.js  # 就可以执行ES6的代码了~

> Hello my first rollup demo!!
> Set(2) { 1, 2 }

rollup-plugin-node-resolve是干什么用的呢?

使用 rollup-plugin-node-resolve 将第三方模块和我们的代码混合代码

不使用的话会找不到项目中使用的第三方模块~~

在配置文件中 配置     
plugins:[
        resolve()
]
就可以将我们使用的第三方模块混合打包到我们的项目中去了~