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

最新推荐文章于 2024-09-13 21:57:50 发布

一个抱抱一首歌

最新推荐文章于 2024-09-13 21:57:50 发布

阅读量2.4k

点赞数 1

分类专栏： rollup javascript 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_38992765/article/details/126531319

版权

javascript 同时被 2 个专栏收录

26 篇文章 4 订阅

订阅专栏

rollup

4 篇文章 0 订阅

订阅专栏

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

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

async-validator网址

安装

npm install async-validator@1.8.1

更改 src => index.js

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

运行 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>

打开后发现

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

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

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'];

安装插件

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

其中 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'),
    }),
  ],
};

更改 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>