1

I'm trying to use i18n-for-browser with i18n, but I don't know how to include the module i18n-for-browser installed server-side via NPM, on the client-side in a <script> tag. My Node server is also running express.

Here is what I know:

  • i18n translates and works fine on the server-side
  • i18n and i18n-for-browser are installed server-side, and my dilemma lies on the client-side or front end
  • browser-i18n (different than i18n-for-browser) works fine by placing the javascript file in my public/Javascript folder and linking it as usual with a tag, the only issue with browser-i18n being that it doesn't have the features I require like i18n does - see my other question and answer.

Here is what I don't know:

  • is i18n and i18n-for-browser interchangeable?
  • Why are a lot of NPM modules using import if Node doesn't support import yet? (Answered by Keith in comments)
  • How can I use i18n-for-browser (or i18n, if interchangeable) on the client side?

Any ideas?

Community
  • 1
  • 1
Michał
  • 868
  • 1
  • 10
  • 36
  • To include NPM modules in client side javascript you need a packager like Browserfy or Webpack etc. – Keith Feb 08 '17 at 11:51
  • Even for modules developed specifically or only for the browser? Strange that they wouldn't implement a method within the module... – Michał Feb 08 '17 at 11:56

2 Answers2

2

You cannot include anything in <script> that is not served from your (or some other) web server. Does your server serve those files for example using express.static or some other ways described here? Are those put in the same place where you have your HTML files? Then you can use it with <script> tag if you use a correct URL. If not then you can't.

But if it's a popular module than you may be able to use a CDN like cdnjs than can hace a lot of libraries conveniently served for you - see https://cdnjs.com/

When you npm install a module then all it does is put it (with its dependencies) in the node_modules directory. But this directory is unlikely to be served by your web server, so ou need to have that module somewhere where you have other static files like HTTP.

rsp
  • 107,747
  • 29
  • 201
  • 177
  • Thanks for this! This is getting quite confusing. I understand how to use express.static, but my problem is specifically regarding i18n for browser. Firstly, on the page it says to use "import", which isn't supported by Node (or is just giving me an error). I just want i18n on the client-side, but I'm at a total loss of how to do that. My jade templates are rendered and translated fine, the problem is with translation of strings inside – Michał Feb 08 '17 at 13:11
  • If it is saying use import, chances are it expecting that for browser your using a package manager like webpack, that's also got ESNext compiler support for module loading,. Another option for loading npm stuff is using something like jspm.io, in some respects this is just another package manager, as until HTTP2 is more widespread you would really still want to package it. – Keith Feb 08 '17 at 13:25
  • Ok - so import = package manager. That part I got, but I'm still confused as to the actual procedure of getting it set up client side. I've updated the question to clarify where I'm at now... – Michał Feb 08 '17 at 13:29
0

You can use the CDN provided by the official documentation of the package and have access to it's code in your <script>. You will have a global variable called i18n to make your translations.

<script src="https://unpkg.com/i18n-for-browser?main=umd"></script>

rotimi-best
  • 1,852
  • 18
  • 29