<tfoot id="geome"></tfoot>

<fieldset id="geome"></fieldset>

<abbr id="geome"></abbr>

rollup配置以及常見問題

luck 發布于2019-08-26 10:14 / 3668人閱讀

摘要：近期維護組內的幾個庫，之前是打包的，本身功能也不復雜，但因為性能是今年組內的重點，為了更小的體積，逐步將打包工具遷移到經過一段時間的探索，逐步抽離了一份通用的配置，隱藏細節，使用者可以很方便的使用進行打包介紹提供，，，，，，等基本插件，使用

近期維護組內的幾個lib庫，之前是webpack打包的，本身功能也不復雜，但因為性能是今年組內的重點，為了更小的體積，逐步將打包工具遷移到rollup

經過一段時間的探索，逐步抽離了一份通用的配置，隱藏細節，使用者可以很方便的使用rollup進行打包

介紹

提供alias，eslint，resolve，common，babel，replace，postcss等基本插件，使用者可傳入同名屬性進行相應的plugin配置（見使用）

git地址

dev模式

提供了基本的啟動服務以及熱更新功能，服務啟動在http://127.0.0.1:8080，熱更新默認監聽./src目錄

生產環境

提供uglify和filesize功能

使用

安裝

yarn add cerate-rollup-config --dev

使用

// rollup.config.js
const path = require("path")
const baseConfig = require("create-rollup-config");

const config = baseConfig({
    alias: {
        $common: "./src/common"
    },
    replace: {
        env: JSON.stringify(process.env.NODE_ENV)
    },
    serve: {
        port: 7001
    },
    livereload: {
        watch: "/src" // default
    }
})

export default [
    {
        input: "./src/test.js",
        output: [
            {
                file: "dist/test.js",
                format: "cjs"
            }
        ],
        ...config
    }
]

package.json配置

{
    ...,
    "scripts": {
        "build": "cross-env NODE_ENV=production rollup -c ./rollup.config.js",
        "server": "cross-env NODE_ENV=development rollup -c ./rollup.config.js --watch",
        ...
    },
    ...
}

部分plugin介紹 postcss

默認開啟了minimize功能

參考：rollup-config-postcss

html

將html文件轉為字符串，并支持壓縮

參考：rollup-plugin-string-html

遇到的問題 引入外部包時，提示方法不存在

原因是：

當引入commonjs包時，如果該包對exports進行了重新賦值，那么通過rollup打包時，獲取不到該值，只能通過namedExports來告知rollup

所以我們打包時，可以輸出多個格式，cjs+umd

參考：https://github.com/rollup/rol...

同時使用 export default 和export

寫業務代碼的時候，有時候會一起使用export default和export，但在rollup中一起使用的時候，需要注意，打包出來的包是這樣的

// test.js
export default { test: "test" }
export const test2 = "test2"

// 打包后
exports.default = { test: "test" }
exports.test2 = "test2"

這樣要注意，通過require("test")，導入的對象是

{
    default: {
        test: "test"
    },
    test2: "test2"
}

可能與你的預期不一致，除非加default，require("test").default

babel有個插件可以解決這個問題：https://github.com/59naga/bab...

云服務器 GPU云服務器服務器配置以及價格騰訊云創建服務器以及配置配置云服務器以及網站上線 ROLLUP

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/105834.html

rollup文檔翻譯中文文檔

摘要：既可以通過一個配置文件使用命令行接口來調用，也可以他自己的使用。使用最簡單的方法就是通過命令行接口。命令縮寫會以監視模式運行。這時運行下將不會有錯誤拋出，包含導入的組件。介紹概覽 rollup是一個js打包器，用來將很細碎的js編譯打包成大的復雜的東西，像是一個庫或者一個應用。其使用了ES6自帶的新標準來格式化和打包js代碼，而不是原先的Commonjs或者AMD這類解決方案。ES...

enrecul101 2019-08-20 17:31 評論0 收藏0
[譯]教程：如何使用Rollup打包JavaScript

摘要：教程如何使用打包通過這個系列教程一步一步學習如何使用更小更快的取代和打包文件。安裝并且創建配置文件。提示是告訴我們實際需要哪些插件的集合。通過下面的命令安裝兩個插件更新然后，引入插件并添加進配置注意屬性是為了幫助模塊遷移到的一部分。教程：如何使用Rollup打包JavaScript 通過這個系列教程一步一步學習如何使用更小更快的Rollup取代webpack和Browserify打包...

luoyibu 2019-08-20 12:25 評論0 收藏0
JS打包工具rollup——完全入門指南

摘要：使用進行模塊化打包在之前打包的過程中，命令行中輸出了一行，這表示并沒有收到任何模塊化的格式指令，因此會用默認的模塊標準來對文件進行打包。前言最近在做一個提供給瀏覽器和node同時使用的js的url模板工具類，在用什么打包工具上糾結了一段時間，正好有一天在知乎上看到了關于rollup的介紹，在自己試了試之后，就決定用rollup.js來打包自己的工具類了。這篇文章主要是為了讓對ro...

dreamtecher 2019-08-21 11:53 評論0 收藏0
Webpack vs Rollup

摘要：年月份的時候，將的構建工具換成了。的特點代碼分割有兩種組織模塊依賴的方式，同步和異步。而目前在中大型項目中使用得非常廣泛。更多網易技術產品運營經驗分享請訪問網易云社區。文章來源網易云社區本文由作者余伯賢授權網易云社區發布。 2017年4月份的時候，Facebook將React的構建工具換成了Rollup。很多人就有疑問了，Webpack不也是Facebook團隊開發的嗎，為什么不使用...

Null 2019-06-28 11:05 評論0 收藏0
Rollup 試煉之路

摘要：根據官網的解釋，是下一代模塊化工具。之后，模塊化的寫法將更加的趨勢化，我們會將以前的文件切割成多個的細小模塊。從的人數上，還是持有很大的保留意見的，所有我個人可能會在一些小型或者快速項目中做嘗試而已。最近看到挺多次 Rollup 這個詞，再也架不住好奇，簡單的學習實踐了一下。完整項目庫地址請戳。 PS: ES6 對應 ES2015，請忽略這些細節。什么是 Rollup Rollup...

qc1iu 2019-08-22 11:00 評論0 收藏0