成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

rollup配置以及常見問題

luck / 3695人閱讀

摘要：近期維護(hù)組內(nèi)的幾個(gè)庫(kù)，之前是打包的，本身功能也不復(fù)雜，但因?yàn)樾阅苁墙衲杲M內(nèi)的重點(diǎn)，為了更小的體積，逐步將打包工具遷移到經(jīng)過一段時(shí)間的探索，逐步抽離了一份通用的配置，隱藏細(xì)節(jié)，使用者可以很方便的使用進(jìn)行打包介紹提供，，，，，，等基本插件，使用

近期維護(hù)組內(nèi)的幾個(gè)lib庫(kù)，之前是webpack打包的，本身功能也不復(fù)雜，但因?yàn)樾阅苁墙衲杲M內(nèi)的重點(diǎn)，為了更小的體積，逐步將打包工具遷移到rollup

經(jīng)過一段時(shí)間的探索，逐步抽離了一份通用的配置，隱藏細(xì)節(jié)，使用者可以很方便的使用rollup進(jìn)行打包

介紹

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

git地址

dev模式

提供了基本的啟動(dòng)服務(wù)以及熱更新功能，服務(wù)啟動(dòng)在http://127.0.0.1:8080，熱更新默認(rèn)監(jiān)聽./src目錄

生產(chǎn)環(huán)境

提供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

默認(rèn)開啟了minimize功能

參考：rollup-config-postcss

html

將html文件轉(zhuǎn)為字符串，并支持壓縮

參考：rollup-plugin-string-html

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

原因是：

當(dāng)引入commonjs包時(shí)，如果該包對(duì)exports進(jìn)行了重新賦值，那么通過rollup打包時(shí)，獲取不到該值，只能通過namedExports來告知rollup

所以我們打包時(shí)，可以輸出多個(gè)格式，cjs+umd

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

同時(shí)使用 export default 和export

寫業(yè)務(wù)代碼的時(shí)候，有時(shí)候會(huì)一起使用export default和export，但在rollup中一起使用的時(shí)候，需要注意，打包出來的包是這樣的

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

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

這樣要注意，通過require("test")，導(dǎo)入的對(duì)象是

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/105834.html

相關(guān)文章

  • rollup文檔翻譯 中文文檔

    摘要：既可以通過一個(gè)配置文件使用命令行接口來調(diào)用，也可以他自己的使用。使用最簡(jiǎn)單的方法就是通過命令行接口。命令縮寫會(huì)以監(jiān)視模式運(yùn)行。這時(shí)運(yùn)行下將不會(huì)有錯(cuò)誤拋出，包含導(dǎo)入的組件。 介紹 概覽 rollup是一個(gè)js打包器，用來將很細(xì)碎的js編譯打包成大的復(fù)雜的東西，像是一個(gè)庫(kù)或者一個(gè)應(yīng)用。其使用了ES6自帶的新標(biāo)準(zhǔn)來格式化和打包js代碼，而不是原先的Commonjs或者AMD這類解決方案。ES...

    enrecul101 評(píng)論0 收藏0

  • [譯]教程：如何使用Rollup打包JavaScript

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

    luoyibu 評(píng)論0 收藏0

  • JS打包工具rollup——完全入門指南

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

    dreamtecher 評(píng)論0 收藏0

  • Webpack vs Rollup

    摘要：年月份的時(shí)候，將的構(gòu)建工具換成了。的特點(diǎn)代碼分割有兩種組織模塊依賴的方式，同步和異步。而目前在中大型項(xiàng)目中使用得非常廣泛。更多網(wǎng)易技術(shù)產(chǎn)品運(yùn)營(yíng)經(jīng)驗(yàn)分享請(qǐng)?jiān)L問網(wǎng)易云社區(qū)。文章來源網(wǎng)易云社區(qū) 本文由作者余伯賢授權(quán)網(wǎng)易云社區(qū)發(fā)布。 2017年4月份的時(shí)候，F(xiàn)acebook將React的構(gòu)建工具換成了Rollup。很多人就有疑問了，Webpack不也是Facebook團(tuán)隊(duì)開發(fā)的嗎，為什么不使用...

    Null 評(píng)論0 收藏0

  • Rollup 試煉之路

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

    qc1iu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<