什么是 Crisper？
Crisper 是一个用于将 HTML 的 JavaScript 部分和 CSS 部分分割开来的 npm 包。它将你的 HTML 文档分成它们的组成部分，这样每个部分都是一个文件。当你的应用加载时，这些文件将成为单独的请求。
Crisper 能够把 Polymer 和 Web Components 的应用程序进行分割。在 Polymer 中，你的 JavaScript 和 CSS 都存储在 HTML 文件中，这使得开发变得更加简单，因为你可以在同一文档中管理所有代码。但是，它会使应用的启动变得慢，并导致浏览器缓存率不佳。使用 Crisper 就可以解决这个问题。
安装和使用
安装 npm 包 Crisper 的方法如下：
npm install crisper
在您的项目中使用 Crisper：
-- -------------------- ---- ------- --------- ----- ------ ------ ------------ ------------- ------- ---------------------------------------------------------------------- ----- ------------ ----------------------- ------- ------ ------------------------- ------- ---------------------------------------------------------------------- ------- ----------------------------- ------- ---------------------------- ------- -------
你可以使用以下选项调用 Crisper：
const crisper = require('crisper');
const src = '<!DOCTYPE html><html><head><title>hello world</title></head><body><script src="index.js"></script></body></html>';
const options = {scriptInHead: false}; // 禁止插入script到<head>中
const output = crisper({source: src, ...options});
console.log(output);操作记录
接下来是使用 Crisper 的过程。如果你想看一下 Crisper 在处理多个文件时所做的所有操作，请尝试使用以下命令：
npm install -g crisper cd my-project crisper index.html --out-dir out
然后，你会在 out 目录下看到所有文件。
总结
Npm包 Crisper 使Polymer和Web组件应用程序成为一种优美的方式。它使我们在管理代码方面提供了更加灵活的选择，并避免了应用程序加载时间慢的问题。如果您尝试使用这个 npm 包，您将能够管理更复杂的代码，并保持您的应用程序的高质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65271