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