绍

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