紹

exceljs是一個讀取，操作和編寫電子表格數據和樣式到XLSX和JSON，從Excel電子表格文件逆向工程設計的項目。之所以稱它最強，是因為它的功能強大，簡直就是專門為Excel打造的前端處理插件，到目前為止，筆者還尚未見過比這個更強大的前端插件，由于其強悍的前端處理能力，這就意味著有很多操作將減輕服務器端壓力，而且性能更加出色！

Github地址

https://github.com/exceljs/exceljs

安裝

安裝我們當然是首選npm

npm install exceljs

創建工作簿

var workbook = new Excel.Workbook();

設置工作簿屬性

workbook.creator = 'Me';
workbook.lastModifiedBy = 'Her';
workbook.created = new Date(1985, 8, 30);
workbook.modified = new Date();
workbook.lastPrinted = new Date(2016, 9, 27);

// 將工作簿日期設置為1904日期系統
workbook.properties.date1904 = true;

工作簿視圖

“工作簿”視圖控制Excel在查看工作簿時打開多少個單獨的窗口。

workbook.views = [
  {
    x: 0, y: 0, width: 10000, height: 20000,
    firstSheet: 0, activeTab: 1, visibility: 'visible'
  }
]

添加工作表

var sheet = workbook.addWorksheet('My Sheet');

用addWorksheet函數的第二個參數設置工作表的選項。

• 例如：

// 創建一個紅色標簽顏色的工作表
var sheet = workbook.addWorksheet('My Sheet', {properties:{tabColor:{argb:'FFC0000'}}});

// 創建一個隱藏網格線的工作表
var sheet = workbook.addWorksheet('My Sheet', {properties: {showGridLines: false}});

// 創建一個第一行和列凍結的工作表
var sheet = workbook.addWorksheet('My Sheet', {views:[{xSplit: 1, ySplit:1}]});

刪除工作表

使用工作表id從工作簿中刪除工作表。

• 例如：

// 創建工作表
var sheet = workbook.addWorksheet('My Sheet');

// 使用工作表ID刪除工作表
workbook.removeWorksheet(sheet.id)

訪問工作表

// 迭代所有sheet
// 注意：workbook.worksheets.forEach仍然可以工作，但這個方式更好
workbook.eachSheet(function(worksheet, sheetId) {
  // ...
});

// 按名稱獲取表格
var worksheet = workbook.getWorksheet('My Sheet');

// 按ID獲取表格
var worksheet = workbook.getWorksheet(1);

。。。。。。以上只是部分文檔中的介紹，感興趣的小伙伴可以移步Github直接查看詳細的文檔，完整功能了解可參考下一個標題

PS：提供了中文文檔

完整功能列表

1. 凍結視圖
2. 拆分視圖

1. 數字格式
2. 字體
3. 對準
4. 邊框
5. 填充
6. 富文本

1. 空值
2. 合并單元格
3. 數值
4. 字符串值
5. 日期值
6. 超鏈接值
7. 公式值
8. 豐富的文本值
9. 布爾值
10. 錯誤值

雖然以上功能還不能包括了Excel的所有功能，但也已經相當的豐富了！

總結

在之前的文章中曾介紹過另一個不錯的前端Excel插件，感興趣的可以去看一看，exceljs擁有這么豐富的功能，如果你想開發一個功能強大的Web電子表格，不妨多嘗試嘗試！

val函數的工作原理

eval函數會評估一個給定的含有JavaScript代碼的字符串，并且試圖去執行包含在字符串里的表達式或者一系列的合法的JavaScript語句。eval函數將把最后一個表達式或者語句所包含的值或引用作為返回值。

舉例說明

• eval評估JavaScript表達式

var bar = 'bar';

var foobar = eval('"foo" + bar');

alert(foobar);

• eval評估JavaScript語句

var bar = 'bar';

// if variable bar equals 'bar', foobar is the result of // last executing statement: bar="foo-bar";

var foobar = eval('if(bar == "bar") {bar="foo-bar";} else {bar = "bar-foo";}');

alert(foobar);// change the valuebar = 'foo';

// now our the last executed statement is: bar = "bar-foo";

// therefore the value of variable foobar has been changed

// into 'bar-foo'foobar = eval('if(bar == "bar") {bar="foo-bar";} else {bar = "bar-foo";}');

alert(foobar);

JSON的格式

JSON的格式是由大括號和由冒號（：）構成的名值對所組成的。注意JSON格式與對象字面量 (object literals) 的區別：JSON的名字部分嚴格用引號+名字來表示。

舉例說明

• 對象的字面量

var objectLiteral = { name: "Objector.L", age: "24", special: "JavaScript", sayName: function() { return this.name; }

};

• JSON對象

var jsonFormat = { "summary": "Blogs", "blogrolls": [ { "title": "Explore JavaScript", "link": "http://example.com/" }, { "title": "Explore JavaScript", "link": "http://example.com/" } ]

};

eval和JSON

由于Ajax的興起，JSON這種輕量級的數據格式作為客戶端與服務器之間的傳輸格式逐漸地流行起來，進而出現的問題是如何將服務器端構建好的JSON數據轉化為可用的JavaScript對象。利用eval函數無疑是一種簡單而直接的方法。在轉化的時候需要將JSON字符串的外面包裝一層圓括號：

var jsonObject = eval("(" + jsonFormat + ")");

為什么要加括號？

加上圓括號的目的是迫使eval函數在評估JavaScript代碼的時候強制將括號內的表達式（expression）轉化為對象，而不是作為語句（statement）來執行。舉一個例子，例如對象字面量{}，如若不加外層的括號，那么eval會將大括號識別為JavaScript代碼塊的開始和結束標記，那么{}將會被認為是執行了一句空語句。所以下面兩個執行結果是不同的：

alert(eval("{}"); // return undefined

alert(eval("({})");// return object[Object]

JSON格式的名字部分為什么要加引號？

因為eval函數會將{foo:”bar”}解釋成合法的JavaScript語句，而非表達式。但是人們往往想要的是讓eval將這段代碼解釋成一個對象。所以JSON格式會強制你去在名字的外側加上引號再結合圓括號，這樣eval就不會錯誤的將JSON解釋成代碼塊。

舉例說明

• eval錯誤解析語義

alert(eval('{foo:"bar"}')); // return "bar", incorrect

• eval正確解析JSON

alert(eval('({"foo": "bar"})')); // return JSON object, correct

結論

理解eval的工作原理和json的嚴格的限定格式，合理結合eval和json應用于JavaScript的數據傳遞和對象轉換。

following this format:

eval('{' + jsonString + ')');

言

package.json 是一個用于描述和配置項目的重要文件，其中包含了許多字段和選項，可以影響項目的構建、依賴管理、腳本執行等方面。了解這些字段可以幫助開發者更好地理解和控制項目的行為。

package.json對于大部分前端開發者來說，知道dependencies與devDependencies就夠了。但對于庫開發者或有更高級需求的開發者來說，了解 package.json 的其他字段是非常有必要的。

本文介紹的字段分為官方字段與非官方字段。非官方字段是被主流打包工具（webpack，Rollup）所支持， 旨在提供更高級的配置和功能，以滿足特定的構建需求，可能不具備通用性。

目前版本：v7.24.2

一、必須屬性

1. name

定義項目的名稱，不能以"."和"_"開頭，不能包含大寫字母

2. version

定義項目的版本號，格式為：大版本號.次版本號.修訂號

二、描述信息

1. description

項目描述

2. keywords

項目關鍵詞

3. author

項目作者

4. contributors

項目貢獻者

5. homepage

項目主頁地址

6. repository

項目代碼倉庫地址

7. bugs

項目提交問題的地址

8. funding

指定項目的資金支持方式和鏈接

三、依賴配置

1. dependencies

生產環境的依賴包

如果不使用脫字符（^），安裝的版本號固定；如果使用，則能安裝當前大版本的最新版本，在package-lock.json中可查看當前實際安裝的版本。

2. devDependencies

開發環境的依賴包，例如webpack、vite、babel、ESLint等。

3. peerDependencies

對等依賴的作用：

1. 減小打包體積：例如使用react開發的組件庫，安裝react是必不可少的，而使用組件庫的開發者，本地項目肯定安裝了react，因此開發的組件庫中不必把react打包進去（期望項目的使用者來提供這些模塊的實現）。
2. 版本一致性：使用你的組件庫的開發者需要確保他們項目中安裝了與你聲明的對等依賴版本兼容的包，以確保組件庫正常運行。

示例：聲明要使用組件庫，需在項目中安裝大于17.0.1版本的react

4. peerDependenciesMeta

將對等依賴標記為可選，如果用戶沒有安裝對等依賴，npm不會發出警告

5. bundledDependencies

聲明捆綁依賴項（使用情景較少）

6. optionalDependencies

聲明可選依賴項（使用情景較少）

7. engines

聲明對npm或node的版本要求

目前對NPM來說，engines只是起一個說明的作用，即使用戶安裝的版本不符合要求，也不影響依賴包的安裝。但使用pnpm 和 yarn安裝，如果版本不符合要求會導致安裝失敗。

8. workspaces

單個代碼庫中統一管理多個包（monorepo），在workspaces聲明目錄下的package會軟鏈到根目錄的node_modules中。

1. 初始化項目

2. 聲明本項目是workspaces模式

表示所有子包都在packages文件夾下

3. 創建子包p1

在node_modules/.package-lock.json中可以看到 "link": true 鏈接符號信息

4. 新建packages/p1/index.js

5. 創建子包p2

6. 將子包p1添加到p2中

安裝，卸載等命令都是一樣的，只是多了"--workspace="參數（簡寫-w），用來指定在哪個包中執行命令

7. 子包p2使用p1

workspaces功能與lerna類似，如果只需簡單地管理多個包，workspaces足夠了。lerna具有版本管理，發包提示，簡化多包項目發布流程等更多功能。

四、腳本配置

1. scripts

腳本入口

2. config

用于定義項目的配置項，例如設置環境變量

1. config 配置

2. scripts 配置

3. 新建index.js

運行 npm run start，終端打印出 example.com

五、文件&目錄

1. module（非官方字段）

指定 ES 模塊入口文件

示例：當其他開發者在他們的項目中導入你的包時，會加載并執行包中的dist/index.esm.js

2. main

指定 CommonJS 模塊或 ES 模塊入口文件。如果不指定該字段，默認是根目錄下的index.js

提示：從 Node.js 12.20.0 版本開始，"main" 字段也可以指定 ES 模塊的入口文件

3. browser

指定瀏覽器使用的入口文件，例如umd模塊。

4. types（非官方字段）

指定 TypeScript 類型聲明文件（.d.ts 文件）的路徑

5. exports（非官方字段）

當打包工具支持exports字段時（webpack、Rollup 等），以上main，browser，module，types四個字段都被忽略

"." 表示默認導出

"import": 指定了 ES module (ESM) 規范下的導出文件路徑

"require": 指定了 CommonJS 規范下的導出文件路徑

"browser": 指定了用于瀏覽器環境的導出文件路徑

"types": 指定了類型聲明文件的路徑

導出其他文件，例如除了導出默認路徑，導出源文件

其他項目中使用

6. type（非官方字段）

指定模塊系統的使用方式，"commonjs"，"module"，"umd"，"json"

示例：指定模塊系統為ES module模式，使用CommonJS文件時，需顯式的定義為 .cjs 文件擴展名，來明確指定這些文件為 CommonJS 模塊

7. files

指定哪些包被推送到npm服務器中

示例：只推送index.js和dist包到npm服務器

可以在項目根目錄新建一個.npmignore文件，說明不需要提交到npm服務器的文件，類似.gitignore。寫在這個文件中的文件即便被寫在files屬性里也會被排除在外

8. bin

定義在全局安裝時可執行的命令，例如構建腳手架

9. man

Linux 中的幫助指令（使用情景較少）

10. directories

定義項目目錄結構的字段（使用情景較少）

六、發布配置

1. private

防止私有包發布到npm服務器，要發布到npm上設為false

2. preferGlobal（非官方字段）

當設置 "preferGlobal" 字段為 true 時，它表示你的包更適合以全局方式安裝，而不是作為項目的依賴項進行本地安裝。

這個字段的設置是為了向用戶傳達關于你的包的最佳使用方式的建議。它并不會直接影響包的安裝方式或包管理器的行為。

3. publishConfig

在發布包時指定特定的配置

示例：指定包發布的注冊表 URL，指定所有用戶都可以訪問（私有的會收費）

4. os

指定你的包適用的操作系統

示例：包只適用于darwin（macOS）和 linux

示例：禁用win32

5. cpu

該配置和OS配置類似，用CPU可以更準確的限制用戶的安裝環境

6. license

指定軟件的開源協議：

ISC：在所有副本中保留版權聲明和許可證聲明，使用者就可以拿你的代碼做任何想做的事情，你也無需承擔任何責任

MIT：在所有副本或主要部分中保留版權聲明和許可證聲明，使用者就可以拿你的代碼做任何想做的事情，你也無需承擔任何責任

開源協議查詢地址：opensource.org/licenses/

七、第三方配置（非官方字段）

1. eslintConfig

eslint的配置，更推薦新建 .eslintrc 進行配置

使用參考：新建 .eslintrc

2. babel

babel的配置，更推薦新建 .babelrc 進行配置

3. unpkg

unpkg 是一個基于 CDN 的前端包托管服務，用于在瀏覽器中直接引用和加載 npm 上發布的包。

無需下載，直接通過 <script> 標簽引用

4. lint-staged

lint-staged是一個在Git暫存文件上運行linters的工具，通常配合gitHooks一起使用。

使用參考：配置 husky、lint-staged、@commitlint/cli

5. browserslist

告知支持哪些瀏覽器及版本，Autoprefixer常用到它

6. sideEffects

指示包是否具有副作用，協助Webpack，Rollup等進行tree shaking

多數情況下可以直接設置為false，這樣打包工具就會自動刪除未被import的代碼

但是有些情況例外

1. 有一些特定的模塊文件，它們執行一些副作用操作，如注冊全局事件監聽器、修改全局狀態等。
2. 告訴構建工具不要將樣式文件排除在無用代碼消除的優化范圍之外

八、結尾

原文鏈接：https://juejin.cn/post/7240805459288522808