資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用Rollup.js打包JavaScript檔案？
在本教程中，我們將瞭解如何使用rollup.js來打包JavaScript檔案。在開始之前，第一步是熟悉一個名為**Rollup**的JavaScript模組打包器，它可以將多個原始檔編譯成一個單獨的包。Rollup類似於webpack和Browserify。由於它能夠在將檔案打包成單個單元后保持檔案體積小巧，因此比許多其他打包器更受歡迎。
Rollup提供了多種功能，其中一些列舉如下：
當您使用更小且獨立的原始檔時，開發更容易管理。
原始碼可以輕鬆地進行美化、程式碼風格檢查，並且可以在打包過程中進行語法檢查。
Tree-shaking還有助於移除未使用的函式。
我們甚至可以轉譯到ES5以實現向後相容。
還可以移除日誌記錄，甚至可以縮小生產環境的包。
現在我們對Rollup有了初步的瞭解，讓我們先建立一個簡單的JavaScript專案。
假設我們有一個名為“rest-api-example”的專案，其目錄結構如下所示：
├── controller │ └── books.js ├── package-lock.json ├── package.json ├── routes └── books.js └── src ├── index.js 3 directories, 5 files
我們可以看到，我們有多個檔案和目錄，我們唯一需要關注的檔案是“src”目錄中的“index.js”檔案。
index.js
此index.js檔案是我們將在不同格式下使用Rollup.js打包的檔案。index.js檔案的程式碼如下所示。
// to require the framework
const app = require('fastify')({
logger: true
})
app.addHook('onRoute', (routeOptions) => {
console.log(`Routes that are registered are: ${routeOptions.url}`)
})
// to declare a single route
app.get('/', function (req, reply) {
reply.send({
Welcome: 'TutorialsPoint'
})
})
// Register routes to handle blog posts
const bookRoutes = require('../routes/books')
bookRoutes.forEach((route, index) => {
app.route(route)
})
// Run the server!
app.listen(3000, (err, address) => {
if (err) {
app.log.error(err)
process.exit(1)
}
app.log.info(`The server is listening on ${address}`)
})
在此程式碼中，我們可以看到我們使用了常見的JavaScript箭頭函式和基本語法。
安裝Rollup作為依賴項
假設我們想使用Rollup.js打包此JavaScript檔案。為此，我們首先需要將Rollup作為依賴項安裝到我們的專案中。
以下命令將在您的專案中安裝Rollup。
npm install --save-dev rollup
package.json
執行上述命令後，我們應該在“package.json”檔案中看到rollup依賴項。為了參考，下面顯示了我的專案“package.json”檔案的內容。
{
"name": "fastify-rest-api",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"fastify": "^4.2.1"
},
"devDependencies": {
"rollup": "^2.77.0"
}
}
rollup.config.js
安裝Rollup後，下一步是在與“package.json”檔案相同的根目錄位置建立一個新檔案，並將該檔案命名為**rollup.config.js**。
**注意** - Rollup配置檔案應使用此確切名稱。
下面顯示的程式碼片段是我的rollup.config.js檔案。
export default {
input: 'src/index.js',
output: {
file: 'src/main.min.js',
: 'cjs',
}
};
在上面的程式碼片段中，我們使用了不同的屬性。讓我詳細解釋一下每個屬性。
**輸入** - 在此欄位中，我們提供要使用Rollup打包的檔案的名稱。在大多數情況下，此檔案將是主JavaScript檔案，它基本上啟動了您的專案。
**輸出** - 上述config.js檔案中使用的輸出物件包含兩個屬性，分別是檔案和格式，其中檔案包含將作為rollup輸出建立的檔案的名稱，而格式欄位包含我們想要的rollup的格式型別作為值。
在我們的config.js中，我們只是說當Rollup完成時，我們希望得到一個“cjs”檔案作為輸出。
啟動Rollup.js
為了實際啟動Rollup並進行測試，我們需要在終端中執行以下命令。
./node_modules/.bin/rollup -c
執行上述命令後，我們將在終端中獲得以下**輸出**。
src/index.js → src/main.min.js... created src/main.min.js in 13ms
請注意，編譯時間因機器而異。現在，如果我們檢查我們的目錄樹，它應該看起來像這樣。
├── controller │ └── books.js ├── package-lock.json ├── package.json ├── rollup.config.js ├── routes │ └── books.js └── src ├── index.js └── main.min.js
main.min.js
在上面的樹結構中，我們可以看到建立了一個名為“main.min.js”的新檔案。開啟檔案，它應該與下面顯示的檔案完全相同。
'use strict';
// to require the framework
const app = require('fastify')({
logger: true
});
app.addHook('onRoute', (routeOptions) => {
console.log(`Routes that are registered are: ${routeOptions.url}`);
});
// to declare a single route
app.get('/', function (req, reply) {
reply.send({
Welcome: 'TutorialsPoint'
});
});
// Register routes to handle blog posts
const bookRoutes = require('../routes/books');
bookRoutes.forEach((route, index) => {
app.route(route);
});
// Run the server!
app.listen(3000, (err, address) => {
if (err) {
app.log.error(err);
process.exit(1);
}
app.log.info(`The server is listening on ${address}`);
});
您可以輕鬆注意到Rollup前後文件大小的差異。
在前面的示例中，我們打包到了通用的JavaScript格式，如我們在rollup.config.js檔案的輸出物件的格式屬性中指定的。
假設我們希望將打包後的JS設定為iife格式。為此，我們可以更改rollup.config.js檔案中的格式。
rollup.config.js
請考慮以下更新後的rollup.config.js檔案。
export default {
input: 'src/index.js',
output: {
file: 'src/main.min.js',
format: 'iife',
}
};
請注意，我們只需要更改rollup.config.js檔案中的格式欄位的值，我們就完成了。
為了實際打包檔案，我們需要執行以下命令
./node_modules/.bin/rollup -c
輸出
執行上述命令後，我們將在終端中獲得以下輸出：
src/index.js → src/main.min.js... created src/main.min.js in 16ms
現在，如果我們開啟“main.min.js”檔案，它將是IIFE格式。
(function () {
'use strict';
// to require the framework
const app = require('fastify')({
logger: true
});
app.addHook('onRoute', (routeOptions) => {
console.log(`Routes that are registered are: ${routeOptions.url}`);
});
// to declare a single route
app.get('/', function (req, reply) {
reply.send({
Welcome: 'TutorialsPoint'
});
});
// Register routes to handle blog posts
const bookRoutes = require('../routes/books');
bookRoutes.forEach((route, index) => {
app.route(route);
});
// Run the server!
app.listen(3000, (err, address) => {
if (err) {
app.log.error(err);
process.exit(1);
}
app.log.info(`The server is listening on ${address}`);
});
})();
可以清楚地看到該檔案是IIFE格式。
結論
在本教程中，我們學習瞭如何使用Rollup.js將JavaScript檔案打包成更小的尺寸，並打包成我們喜歡的格式。
498 次瀏覽
