rollup打包

1、rollup是什么

JavaScript的ES模块打包器 

从一个入口文件开始，将所有使用到的模块文件都打包到一个最终的发布文件中

 

2、与webpack的差异

定位不同：webpack偏向于应用打包；rollup更专注于JavaScript类库打包

(1)如果你需要代码拆分(Code Splitting)，或者你有很多静态资源需要处理，再或者你构建的项目需要引入很多CommonJS模块的依赖，那么 webpack 是个很不错的选择;

(2)如果您的代码库是基于 ES2015 模块的，而且希望你写的代码能够被其他人直接使用，你需要的打包工具可能是 Rollup;

 

3、rollup的重要特性

(1)它使用ES6的模块标准，这意味着你可以直接使用import和export而不需要引入babel（当然，在现在的项目中，babel可以说是必用的工具了）。

(2)Rollup.js一个重要特性叫做'tree-shaking'，这个特性可以帮助你将无用代码（即没有使用到的代码）从最终的生成文件中删去。（这个特性是基于ES6模块的静态分析的，也就是说，只有export而没有import的变量是不会被打包到最终代码中的）

 

4、rollup.config.js 配置

import typescript2 from 'rollup-plugin-typescript2';
import commonjs from '@rollup/plugin-commonjs'; // 插件将CommonJS模块转换为 ES2015 提供给 Rollup 处理 
import resolve from '@rollup/plugin-node-resolve'; // 帮助 Rollup 查找外部模块，然后安装
import babel from 'rollup-plugin-babel'; // 方便使用 javascript 的新特性,es新特性的解析
import pkg from './package.json';
import { terser } from "rollup-plugin-terser";
import postcss from 'rollup-plugin-postcss'

let plugins = [
  postcss({
    extensions: ['.css']
  }),
  resolve(),
  typescript2({useTsconfigDeclarationDir:true}),
  babel({
    exclude: '**/node_modules/**',
    runtimeHelpers: true
  }),
  commonjs(),
  //terser()
]

export default {
  input: 'src/index.ts',
  moduleName: 'helper-action',
  external: [...Object.keys(pkg.dependencies), ...Object.keys(pkg.peerDependencies)],
  // 外部引用 防止将某些 import 的包(package)打包到bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖

  globals: {
    react: 'React',
    "react-dom": "ReactDOM",
  },
  output: [
    { file: pkg.browser, format: 'umd', name: 'DingteamHelper' },
    { file: pkg.main, format: 'cjs', exports: 'named' },
    { file: pkg.module, format: 'esm' }
  ],
  plugins
}

 

5、umd、cjs、esm的区别

tip：之前，js不能引入三方模块，所有的代码必须写到一个文件中，导致单个文件代码量大、业务功能模块不清晰、难于维护。而编写模块化代码，有助于使您的代码变得松散耦合，这对于构建可维护的表示工程代码大有帮助。基于此，越来越多的模块规范出现，如commonjs、amd、umd、esm

（1）umd：

（2）cjs：

（3）esm：ESM是ES6提出的标准模块系统

（4）amd：（Asynchronous Module Definitions 异步模块定义）

参考链接：https://zhuanlan.zhihu.com/p/96718777

 

 

 

 

 

 

打包遇到的坑

1、

报错： Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)

原因：rollup不支持css文件的打包，需要安装相关的插件

解决：（1）安装插件 npm install --save-dev rollup-plugin-postcss

　　　（2）更新rollup.config.js

import postcss from 'rollup-plugin-postcss'

plugins: [
    postcss({
        extensions: ['.css']
    })
]

 

 

 

 

 

 

 

 

 

 

 

MAC电脑起本地服务：python -m SimpleHTTPServer

访问：http://localhost:8000/index.html