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 有很大的帮助

相关阅读:
2.5 OJ 网站的使用与作业全解
核方法总结（三）———核主成分（kernel PCA）学习笔记
C/C++自助攒机系统
Java项目:商品进销存管理系统(java+SpringBoot+VUE+Maven+Mybatis+Mysql)
2016年亚太杯APMCM数学建模大赛B题化学元素对变形钢筋性能的影响求解全过程文档及程序
【系统稳定性】1.6 黑屏（三）
使用3DMAX制作一枚手雷
【Arduino TFT】基于 ESP8266 以及 SSD1306实现的天气时钟
【通过名称指定文件】小测验
这款吊打Chrome、Edge的浏览器，时隔573天再度更新

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