Compatibility

Build Artifacts

@fluent packages are written in TypeScript, and compiled to ES2018 with ES modules. Compiled JavaScript files and .d.ts files can be found in the esm/ directory of each package.

The compiled JavaScript files are also bundled using Rollup into a single file, index.js, found in the root of the package. The file is an UMD module, compatible with CommonJS and AMD module loaders. It's also possible to include index.js directly in a <script> tag in HTML, with all exported symbols available under a global named after the package, title-cased (e.g. @fluent/bundle becomes FluentBundle).

Browsers

@fluent packages support browsers which implement the ES2018 spec. All evergreen browsers should work fine. For legacy browsers, you'll need to roll your own transpilation pipeline, e.g. using Babel.

There are a few ways of using @fluent code in browsers:

1. Use the <script> element

<script src="./node_modules/@fluent/bundle/index.js"></script>
<script>
    let bundle = new FluentBundle.FluentBundle("en-US");
</script>

2. Use ES module imports

<script>
    import {FluentBundle} from "./node_modules/@fluent/bundle/esm/index.js";
    let bundle = new FluentBundle("en-US");
</script>

3. Use a bundler

If your project uses a bundler like Webpack or Parcel, you can use the following import form. This is possible because @fluent packages specify the non-standard "module": "./esm/index.js" in package.json.

import {FluentBundle} from "@fluent/bundle";
let bundle = new FluentBundle("en-US");

Node

Node 10, Node 12

In Node 10 and 12, which natively only support CommonJS modules, use one of the following forms of require:

let {FluentBundle} = require("@fluent/bundle");
let bundle = new FluentBundle();

// Or:
let fluent_bundle = require("@fluent/bundle");
let bundle = new fluent_bundle.FluentBundle();

Node 14

In Node 14, which supports both CommonJS and ES modules natively, you can use the above require forms from other CommonJS files, or the following import form from ES modules:

import fluent_bundle from "@fluent/bundle";
let bundle = new fluent_bundle.FluentBundle();

It's currently not possible to import the named exports in Node 14, because @fluent packages are configured as type: "commonjs". See issue #482.

// This won't work in Node 14.
import {FluentBundle} from "@fluent/bundle";