Rollup(2): Rollup-plugin-commonjs 和 Rollup-plugin-node-resolve 的应用

在这里插入图片描述
我们先讲讲 roll-plugin-node-resolve 这个插件

我们先安装一个插件 async-validator ,这个插件的作用其实就是 element-ui 中的 form 的校验插件

安装

npm install async-validator@1.8.1
1

更改 src => index.js

// src/index.js
import Schema from 'async-validator';
export default Schema
1
2
3

运行 npm run dev

新建 dist => index.html

<body>  
  <script src="./lib-es.js">script>
  <script type="module"> 
    import Schema from './lib-es.js'
    console.log(Schema)
  script>
body>
1
2
3
4
5
6
7

打开后发现

在这里插入图片描述
这个时候我们打开我们的打包文件 dist => lib-es.js , 发现

import Schema from 'async-validator';
export { default } from 'async-validator';
1
2

emmm… 我们的 async-validator 这个插件到哪去了。。。

rollup-plugin-node-resolve 和 rollup-plugin-commonjs 的安装

rollup-plugin-node-resolve

前面一张说过 rollup 并不支持直接打包 node-modules 里面的内容，所以我们需要安装 rollup-plugin-node-resolve

rollup-plugin-commonjs

为什么安装 commonjs 这个插件呢，因为 async-validator 其实是 commonjs 语法 , 大家可以不安装这个插件去跑下待会的 代码

// async-validator.js 部分源码
// async-validator/lib/index.js
...
Schema.register = function register(type, validator) {
  if (typeof validator !== 'function') {
    throw new Error('Cannot register a validator by type, validator is not a function');
  }
  _validator2['default'][type] = validator;
};

Schema.messages = _messages2.messages;

exports['default'] = Schema;
module.exports = exports['default'];
1
2
3
4
5
6
7
8
9
10
11
12
13
14

安装插件

npm install rollup-plugin-node-resolve rollup-plugin-commonjs rollup-plugin-replace -D
1

其中 rollup-plugin-replace 为了更改 rollup 的环境变量，大伙也可以不加试一试，如果不加会提示 process is no defied

rollup 打包 process is process is not defined

更改 rollup-config.js

// rollup.config.js
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import replace from 'rollup-plugin-replace';

export default {
  input: './src/index.js',
  output: [
    {
      file: './dist/lib-es.js',
      format: 'es',
    },
  ],
  plugins: [
    commonjs(),
    resolve(),
    replace({
      'process.env.NODE_ENV': JSON.stringify('development'),
      'process.env.VUE_ENV': JSON.stringify('browser'),
    }),
  ],
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

更改 dist => index.html

<body>
  <script src="./lib-es.js"></script>
  <script type="module">
    import Schema from './lib-es.js';
    let decription = new Schema({
      name: [{ required: true, type: 'string', message: '请输入姓名' }],
    });

    // [ { message: '请输入姓名', field: 'name' } ]
    decription.validate({ name: '' }, (error) => {
      console.log(error);
    });
  </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

运行 npm run dev , 打开浏览器发现导入已经成功

在这里插入图片描述

总结

本章主要讲解 rollup 中两个插件，这两个插件对下来我们将 rollup-plugin-vue 有很大的帮助

相关阅读:
常用排序方法图解(冒泡，快速排序，堆排序)
Factorial Divisibility(数论,1600)
OpenHarmony页面级UI状态存储：LocalStorage
【Qt快速入门（四）】- QLabel文本框的使用
react 高效高质量搭建后台系统系列 —— 前端权限
区间合并算法的实现
无代码开发报表类型入门教程
平面点云,边界提取
分布式ID生成解决方案——雪花生成算法Golang实现
C++ 十进制与十六进制转换

原文地址：https://blog.csdn.net/weixin_38992765/article/details/126531319