func-package

函数库, 面向复杂业务场景的 js 类库

1.3 开发模式

前言

实际项目中编译开发主要分成了 开发模式和生产模式两种甚至更多种情况，本篇主要讲述rollup.js怎么配置开发模式。主要要素有一下三点：

  • 1.本地开发的HTTP服务
  • 2.生成开发调试的sourceMap文件
  • 3.不能混淆，保证编译后代码的可读性

实现例子

  • 编译ES6+代码
  • 编译成umd格式(通用模块定义)
  • 编译生成 sourceMap 文件
  • 启动HTTP服务

demo例子

https://github.com/chenshenhai/rollupjs-note/blob/master/demo/chapter-01-03/

npm i


npm run dev

实现步骤

步骤1: 目录和准备

安装对应编译的npm模块

## 安装 rollup.js 基础模块
npm i --save-dev rollup 




## 安装 rollup.js 编译ES6+的 babel 模块
npm i --save-dev@rollup/plugin-babel @babel/core @babel/preset-env 


## 安装 rollup.js 编译本地开发服务插件
npm i --save-dev rollup-plugin-serve

步骤2: rollup配置

  • 编译配置文件路径 ./build/rolluo.config.js
  • 编译配置文件
const path = require('path');
const { babel } = require('@rollup/plugin-babel');
const serve = require('rollup-plugin-serve');


const resolveFile = function(filePath) {
  return path.join(__dirname, '..', filePath)
}


module.exports = {
  input: resolveFile('src/index.js'),
  output: {
    file: resolveFile('dist/index.js'),
    format: 'umd',
    sourcemap: true,
  }, 
  plugins: [
    babel({
      presets: ['@babel/preset-env']
    }),
    serve({
      port: 3001,
      contentBase: [resolveFile('example'), resolveFile('dist')]
    })
  ],
}
  • 在./package.json配置编译执行脚本
{
  "scripts": {
    "dev": "node_modules/.bin/rollup -w -c ./build/rollup.config.js"
  },
}

步骤3: 待编译ES6源码

  • 源码路径 ./src/index.js和./src/lib/demo.js
  • ./src/index.js源码内容
import demo from './lib/demo';


const arr1 = [1,2,3];
const arr2 = [4,5,6];
console.log([...arr1, ...arr2]);


async function initDemo () {
  let data = await demo();
  console.log(data);
}


initDemo();
  • ./src/lib/demo.js源码内容
function demo() {
  return new Promise((resolve, reject) => {
    try {
      setTimeout(()=>{
        const obj1 = {a:1};
        const obj2 = {b:2};
        const result = {...obj1, ...obj2};
        resolve(result);
      }, 1000)
    } catch (err) {
      reject(err);
    }
  })
}


export default demo;

步骤4: 编译结果

  • 在项目目录下执行 npm run dev
  • 编译结果在目录 ./dist/ 下
  • 编译结果分成
    • ES5代码文件 ./dist/index.js
    • 源码的sourceMap 文件 ./dist/index.js.map
  • 插件服务启动了3001 端口

步骤5: 浏览器查看结果

  • example目录./example/index.html
  • example源码
<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://cdn.bootcss.com/babel-polyfill/6.26.0/polyfill.js"></script>
  </head>
  <body>
    <p>打开控制台看 console.log 数据 </p>
    <script src="./index.js"></script>
  </body>
</html>
[1, 2, 3, 4, 5, 6]
{a: 1, b: 2}
>

后记

本篇主要讲述是，rollup.js 开发模式的使用流程，下一篇是 rollup.js的生产模式，也就是发布上线时候的开发配置。

2024/10/7 23:51:34