使用rollup创建组件库

初始化项目

mkdir rollup-datav-libs
cd rollup-data-libs
npm init -y
npm i rollup -D

在package.json文件中添加dev命令 "dev":"rollup"

{
  "name": "rollup-datav-libs",
  "version": "1.0.0",
  "description": "datav commponents library",
  "main": "index.js",
  "scripts": {
    "dev":"rollup"
  },
  "author": "liuyi<794516454@qq.com>",
  "license": "ISC",
  "devDependencies": {
    "rollup": "^2.34.2"
  }
}

在src目录下创建一个空文件 index.js用来测试打包效果

console.log('hi rollup')

export default {
  
}

在根目录下创建rollup配置文件rollup.config.dev.js

const path=require('path')
const inputPath=path.resolve(__dirname,'./src/index.js')
const outputPath=path.resolve(__dirname,'./dist/datav.libs.js')
console.log(inputPath)

module.exports= {
  input: inputPath,
  output:{
    file:outputPath,
    format:'umd',
    name:'rollupDatav'
  }
}

这里打包的格式设置为umd ，打包模式可以设置的类型有 umd（原生js），cjs （commonjs）, es (es) 。

修改package.json中的dev命令为 "dev":"rollup -c rollup.config.dev.js"

{
  "name": "rollup-datav-libs",
  "version": "1.0.0",
  "description": "datav commponents library",
  "main": "index.js",
  "scripts": {
    "dev":"rollup -wc rollup.config.dev.js"
  },
  "author": "liuyi<794516454@qq.com>",
  "license": "ISC",
  "devDependencies": {
    "rollup": "^2.34.2"
  }
}

执行命令npm run dev 查看打包效果

创建测试文件 examples/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>datav libs example</title>
  <script src="../dist/datav.libs.js"></script>
</head>
<body>
  
</body>
</html>

用浏览器打开examples/index.html 观察使用效果

如果希望同时输出umd模式和es模式，可以修改rollup.config.dev.js文件中的output设置，使其变为数组

const path=require('path')
const inputPath=path.resolve(__dirname,'./src/index.js')
const outputUmdPath=path.resolve(__dirname,'./dist/datav.libs.js')
const outputEsPath=path.resolve(__dirname,'./dist/datav.libs.es.js')
console.log(inputPath)

module.exports= {
  input: inputPath,
  output:[
    {
      file:outputUmdPath,
      format:'umd',
      name:'rollupDatav'
    },
    {
      file:outputEsPath,
      format:'es'
    }
  ]
}

安装rollup-plugin-node-resolve 插件,它主要是为了解决项目中如果引入第三方模块，会将第三方模块一起打包的问题。

npm i rollup-plugin-node-resolve -D

在配置文件rollup.config.dev.js中增加plugins配置

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


const inputPath=path.resolve(__dirname,'./src/index.js')
const outputUmdPath=path.resolve(__dirname,'./dist/datav.libs.js')
const outputEsPath=path.resolve(__dirname,'./dist/datav.libs.es.js')
console.log(inputPath)

module.exports= {
  input: inputPath,
  output:[
    {
      file:outputUmdPath,
      format:'umd',
      name:'rollupDatav'
    },
    {
      file:outputEsPath,
      format:'es'
    }
  ],
  plugins:[
    resolve()
  ]
}

全局安装babel-node，让你在项目中可以使用es的导入导出语法

npm i -g @babel/node

在当前项目下安装@babel/preset-env

在当前项目下创建.babelrc文件

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

执行命令 babel-node src/index.js 测试是否可以在项目中直接执行es语法

来源：oschina

链接：https://my.oschina.net/lilugirl2005/blog/4777141

标签

javascript

babel