zoukankan      html  css  js  c++  java
  • rollup打包js组件库

    什么是 rollup

    Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. It uses the standardized ES module format for code, instead of previous idiosyncratic solutions such as CommonJS and AMD. ES modules let you freely and seamlessly combine the most useful individual functions from your favorite libraries. Rollup can optimize ES modules for faster native loading in modern browsers, or output a legacy module format allowing ES module workflows today.

    安装

    
    yarn add -D rollup # 或者 npm i -D rollup
    
    

    组件库目录结构

    |——dist
    |——|——xxx.umd.js
    |——|——xxx.cjs.js
    |——|——xxx.es.js
    |——src
    |——|——libs
    |——|——|——xxx.sdk.js
    |——|——styles
    |——|——|——xxx.css
    |——|——main.js
    |——package.json
    |——rollup.config.js

    打包js

    js会打包成3种文件格式

    • xxx.umd.js browser-friendly UMD build
    • xxx.cjs.js CommonJS (for Node)
    • xxx.es.js ES module (for bundlers) build.
     input: 'src/main.js',
        output: [
          {
            name: 'IrtVerifier',//方法名
            file: pkg.browser,
            format: 'umd',
          },
          { file: pkg.main, format: 'cjs', exports: 'auto' },
          {
            file: pkg.module,
            format: 'es',
          },
        ],
    

    其中umd必须指定方法名,因为umd最终会绑定到浏览器的window对象上,如果方法名与sdk种定义的方法名不一致,回报错:Uncaught ReferenceError: xxx is not defined

    //xxx.umd.js
    (function (global, factory) {
      typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
      typeof define === 'function' && define.amd ? define(factory) :
      (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.xxx= factory());//xxx方法绑定到浏览器的window对象上
    }(this, (function () { 'use strict';
    
    

    如何打包css

    yarn add -D rollup-plugin-postcss
    

    使用默认配置,css将直接打包到js里,并且在引入js时直接插入head标签中

    • 引入样式
    // Inject to `<head>` and also available as `style`
    import style from './style.css'
    
    • rollup 配置
    // rollup config
    import postcss from 'rollup-plugin-postcss'
    export default [
    ...
    plugins: [
        postcss(),
      ],
    ...
    ]
    
    • 打包结果
    //xxx.umd.js
    
      function styleInject(css, ref) {
        if ( ref === void 0 ) ref = {};
        var insertAt = ref.insertAt;
    
        if (!css || typeof document === 'undefined') { return; }
    
        var head = document.head || document.getElementsByTagName('head')[0];
        var style = document.createElement('style');
        style.type = 'text/css';
    
        if (insertAt === 'top') {
          if (head.firstChild) {
            head.insertBefore(style, head.firstChild);
          } else {
            head.appendChild(style);
          }
        } else {
          head.appendChild(style);
        }
    
        if (style.styleSheet) {
          style.styleSheet.cssText = css;
        } else {
          style.appendChild(document.createTextNode(css));
        }
      }
     var css_random_number = "your css";
     styleInject(css_random_number);
    
    

    如果需要将css提取为单独的文件,只需要添加配置 extract:true

    ...
    plugins: [
        postcss({
        extract: true,
        // Or with custom file name
        extract: path.resolve('dist/my-custom-file-name.css')
        }),
      ],
    ...
    
    
    make a difference
  • 相关阅读:
    利用ganymed-ssh2远程执行其它Linux机器上的shell命令
    ZooKeeper 笔记(4) 实战应用之【消除单点故障】
    ZooKeeper 笔记(3) 实战应用之【统一配置管理】
    ZooKeeper 笔记(2) 监听数据变化
    ZooKeeper 笔记(1) 安装部署及hello world
    intellij idea 高级用法之:集成JIRA、UML类图插件、集成SSH、集成FTP、Database管理
    hadoop: hive 1.2.0 在mac机上的安装与配置
    mac 下卸载mysql的方法
    mac OS X Yosemite 上编译hadoop 2.6.0/2.7.0及TEZ 0.5.2/0.7.0 注意事项
    hadoop: hbase1.0.1.1 伪分布安装
  • 原文地址:https://www.cnblogs.com/paul-xiao/p/14467308.html
Copyright © 2011-2022 走看看