@ atlassian/ soy-loader (英语)

编译 豆类模板 模板为 @atlassian/ soy-template-plugin-js (英语) 软件包并允许装入 网络软件包

安装

您可以使用 国家预防机制数字 :

npm install @atlassian/soy-loader

或通过 雅伦数字 :

yarn add @atlassian/soy-loader

用法实例

// webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.soy/,
        use: [
          {
            loader: '@atlassian/soy-loader',
            options: {
              // ... see Options below ...
            },
          },
        ],
      },
    ],
  },
};

选项

data <string> (可选)

示例 'foo:bar,moo:goo'

将数据传递给表单中的大豆渲染器(仅指所渲染):,

functions <string> (可选)

示例 '/foo/bar/path'

自定义豆类函数的位置,通常是一条通往 *.jar 文档.

expose <boolean> (可选)

默认 : true

说明生成的命名空间是否应当暴露在窗口中。 如果没有,则必须要求模块调用模板.

modularize <boolean> (可选)

默认 : false

说明是否将模板调用和定义转换为ES6模块进出口. 允许Webpack跟踪模板调用链,但假设一个命名惯例,将命名空间字符串映射到文件路径. 详见 [#Using-modularization] (Using 模块化).

customModuleMap Map<string, string | boolean> (可选)

示例 { 'foo.bar.Template': 'foo/baz', 'moo.foo': false }

与 modularize 选项。 模块化时用于模块名称的对象映射命名空间 。 明确 false 忽略一个模块,将其作为全球参考。 其他病态值回落到默认分辨率处理.

modulePathResolver 数字 : <Function> (可选)

示例

function customModulePathResolver(namespace, context) {
  return namespace.replace(/\./g, '/');
}

function customModuleRelativePathResolver(namespace, context) {
  return path.relative(context, namespace.replace(/\./g, '/'));
}

与 modularize 选项。 一个需要 namespace [string[, context [string,并在使用模块化时输出模块路径. 您可以读取更多关于 context 这里: https://webpack.js.org/api/loaders/# 这段康文本

返回一个明确的 false 忽略一个模块,将其作为全球参考。 返回其他恶性或 undefined 返回到默认分辨率处理的值.

食谱

使用方式 *.properties 网络包装加载器

此软件包可用于 @atlassian/i18n-properties-loader 当你用 webpack dev 服务器运行代码时:

// webpack.config.js
const myI18nFiles = [
  'foo/i18n/my-translation-file.properties',
  'foo/bar/i18n/my-other-translation-file.properties',
  'bar/i18n/some-translation-file.properties',
];

module.exports = {
  module: {
    rules: [
      {
        test: /\.soy/,
        use: [
          {
            loader: '@atlassian/i18n-properties-loader',
            options: {
              i18nFiles: myI18nFiles,
            },
          },

          {
            loader: '@atlassian/soy-loader',
          },
        ],
      },
    ],
  },
};

使用 modularize

模块化(Modularize)是一个特殊的案例,可以在您 {namespace} 和 Soy 文件为 1– 1 时使用. 它将任何外部模板引用的ES6模块导入(反之,任何被定义的模板都会从本模块中被命名为导出)转换出. 这使得Webpack可以追踪索伊文件之间的依赖关系,而不是需要手动指定.

默认情况下 camelCase 名称空间变为 kebab-case,点分隔器成为目录,以及 .soy 后缀为后缀.

示例编号: {namespace a.bCD} 名称空间转换为 import 'a/b-c-d.soy'; 模块路径.

这可以被覆盖 使用 customModuleMap 一次性例外的选项,和/或 modulePathResolver 函数可以完全更改命名方案。 注:每个命名空间的模块都是独特的.

目前,AUI提供的命名空间被忽略并留作全局可变参考,因此对AUI的依赖无法被跟踪. 如果你想用不同方式处理,请检查 DEFAULT_MAPPINGS 输入 modular-soy.js 文件,并替换每个文件 false 带有模块名称.

其他链接

• https://www.npmjs.com/package/@atlassian/i18n-properties-loader (英语)
• https://www.npmjs.com/package/@atlassian/wrm-react-i18n (英语)
• https://www.npmjs.com/package/atlassian-webresources-webpack-plugin (中文(简体) )

最低要求

此插件兼容 :

• 4.0+和 5.0+网络包装
• 节点12+