sc.recipe.staticresources 1.1b7

配置选项

默认模板

在默认模板中，我们选择了符合我们需求的webpack工具，这基本上是主题和插件开发。这是我们包含的内容列表

HTML加载器

用于处理HTML文件；在我们的用例中，它是在创建新主题时使用的。

图像Webpack加载器

处理所有图像以在最终图像中节省空间，它使用针对每种图像格式的一些专业工具将工作流程分割成多个部分。

SVG URL加载器

处理所有SVG文件并创建一个data-url字符串。例如，它将SVG文件插入到最终的CSS文件中，以节省请求。

Webpack SpriteSmith

提供了一种简单的方法来创建图像精灵，您只需将图标图像添加到一个文件夹中，它就会为您创建使用所选CSS预处理器所需的所有内容。

Babel

一个转译器，使您能够使用今天的下一代JavaScript。

Sass

世界上最成熟、最稳定、功能最强大的专业级CSS扩展语言。

PostCSS

一个后处理器，用于使用JavaScript插件转换样式。在我们的配置中，我们使用PostCSS Preset Env插件自动添加所有主流浏览器最后3个版本的供应商前缀，一旦浏览器支持更多功能，您的最终CSS将自动减少字节。

HardSourceWebpackPlugin

此插件为模块提供了一个中间缓存步骤。

JavaScript辅助工具

创建了一个小助手来简化使用此配方添加的插件的配置负担。让我们看看如何使用它。

1. 创建一个包含以下内容的 package.json 文件：

{
  "name": "my.package",
  "version": "0.0.1",
  "main": "app/mypackage.js",
  "scripts": {
    "build": "./node_modules/.bin/webpack -p",
    "debug": "NODE_ENV=debug ./node_modules/.bin/webpack --watch",
    "watch": "./node_modules/.bin/webpack -p --watch",
    "test": "NODE_ENV=testing ./node_modules/.bin/karma start --single-run"
  },
  "repository": {},
  "license": "GPL-2.0",
  "dependencies": {
    "sc-recipe-staticresources": "simplesconsultoria/sc.recipe.staticresources#1.1b4"
  }
}

这样就可以通过一行代码添加所有配置的依赖项，保持所有生态系统中经过良好测试的版本，就像 Buildout 的版本一样。

2. 创建一个包含以下内容的 webpack.config.js 文件：

const makeConfig = require('sc-recipe-staticresources');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = makeConfig(
  // name
  'my.package',

  // shortName
  'mypackage',

  // path
  `${__dirname}/dist`,

  //publicPath
  `${__dirname}/../src/my/package/browser/static`,

  //callback
  function(config, options) {
    config.entry.unshift(
      './app/img/img1.png',
      './app/img/img2.png',
      './app/img/img3.png',
    );
    config.plugins.push(
      new CopyWebpackPlugin([{
        from: 'app/folder/*',
        to: 'folder',
        flatten: true
      }]),
    );

  },
);

这样就可以继承当前版本中所有依赖项的配置。

我们的 mrbob 模板在第一次运行配方时生成此配置。您可以对其进行修改以满足您的需求，但对于大多数主题和插件，这些默认值是一个很好的起点（类似于 Buildout 的扩展配置）。

用法

在我们的简单示例中，创建了以下脚本：

$ bin/env-mypackage

此命令将 buildout 节点安装设置为系统 PATH，这样您就可以像在他们的文档中描述的那样使用 webpack。

$ bin/watch-mypackage

此命令使 webpack 等待任何 SASS、JS（ES6）文件的任何更改，并为您的应用程序生成压缩的 CSS 和 JS（ES5）UMD 模块。

$ bin/debug-mypackage

此命令与 watch 命令类似，但不要尝试压缩最终的 CSS 和 JS。用于调试目的。

$ bin/build-mypackage

此命令构建压缩的 CSS 和 JS，但不会等待任何更改。

$ bin/test-mypackage

此命令使用 karma、mocha、chai 和 sinon 运行 JavaScript 测试。

请注意，short_name 已添加到脚本名称的末尾。这样，您可以在同一包中拥有多个 webpack 文件夹（例如，如果您在同一个包中拥有多个主题）。

1.1b7（2019-10-02）

• 尊重 Plone 外部 URL（关闭 #44）。[rodfersou]

• 修复 Karma 测试。[rodfersou]

1.1b5（2018-10-05）

• 将已弃用的 cssnext 模块替换为 PostCSS Preset Env（关闭 #37）。[rodfersou]

• 在默认配置中包含 HardSourceWebpackPlugin；此插件为模块提供了一个中间缓存步骤，可以加快包生成速度高达 70%（关闭 #49）。[rodfersou]

• 修复资源视图模板中的拼写错误。[rodfersou]

1.1b4（2018-10-03）

• 修复 JavaScript 辅助函数。[rodfersou]

1.1b3（2018-10-03）

• 修复节点包版本。[rodfersou]

1.1b2（2018-10-03）

• 在 JavaScript 辅助函数中使用回调来微调配置。[rodfersou]

• 仅当必要时才审查添加 Sprite 插件。[rodfersou]

• 仅当必要时才审查添加 SCSS 文件。[rodfersou]

• 默认使用脚本异步。[rodfersou]

• 修复库定义以与 Plone 5 兼容。[thet, rodfersou]

• 在 package.json 配置中发出当前包版本（关闭 #40）。[rodfersou]

1.1b1（2018-09-28）

• 创建一个模块以重用配置。[rodfersou]

1.0b1（2018-08-24）

• 更改模板以使用已知良好集（KGS）。[rodfersou]

• 更新包版本。[rodfersou]

1.0a2（2018-01-24）

• 审查如何处理 HTML 和 CSS（关闭 #23）。[rodfersou]

• 在 buildout 运行后删除此配方生成的旧脚本（关闭 #21）。[rodfersou]

• 将脚本重命名为 debug 而不是 dev 以避免误解（关闭 #22）。[rodfersou]

• 修复 webpack 安装冲突（关闭 #25）。[rodfersou]

• 修复模板中包许可证的拼写错误。[hvelarde]

• 更新配方后运行构建命令（关闭 #18）。[rodfersou]

• 如果目录参数无效，添加错误日志。[rodfersou]

1.0a1（2017-11-21）

• 初始发布。