https://github.com/dulnan/drupal-translations-webpack-plugin

https://github.com/dulnan/drupal-translations-webpack-plugin

Last synced: 3 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/dulnan/drupal-translations-webpack-plugin
• Owner: dulnan
• License: mit
• Created: 2018-09-27T11:53:46.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-03-20T22:05:05.000Z (almost 2 years ago)
• Last Synced: 2024-10-10T17:41:17.049Z (3 months ago)
• Language: JavaScript
• Size: 56.6 KB
• Stars: 6
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# DrupalTranslationsWebpackPlugin

Extract Drupal.t and Drupal.formatPlural calls from your webpack bundles.

The plugin will gather all those calls in one single file and emit them.

Then you can add this file to your Drupal theme library. Drupal will pick it up

and run its regex over it, so that those translations end up in the Frontend.

Compatible with Webpack 4 and 5.

# Install

The plugin is available on npm:

```

npm install --save-dev drupal-translations-webpack-plugin

```

# How to use

## Add the plugin to your webpack config

```javascript

const DrupalTranslationsWebpackPlugin = require('drupal-translations-webpack-plugin')

plugins: [

  new DrupalTranslationsWebpackPlugin({

    output: 'drupal-translations.js'

  })

]

```

You can use both translation functions everywhere. But *maybe* you need to declare

that Drupal is a global object. It worked for me without, in another project it

didn't.

*webpack.config.js*

```javascript

plugins: [

  new webpack.ProvidePlugin({

    'Drupal': 'window.Drupal'

  })

]

```

Also, if you use ESLint, you want to declare Drupal a global object:

*.eslintrc.js*

```javascript

globals: {

  'Drupal': true

}

```

It's important that you use the functions like normal, e.g. not write `window.Drupal.t`

or otherwise wrap them in your own function, etc. The plugin is rather "dumb"; it will

just go through all JS files and parse out the actual "string" where the function is

called.

For a detailled example on how to use this plugin, check out this Drupal webpack example:

https://github.com/dulnan/drupal-webpack-setup-example