Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including babel-plugin-i18n-export with all npm packages installed. Try it out:

var babelPluginI18nExport = require("babel-plugin-i18n-export")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

babel-plugin-i18n-export v1.0.0

create your js lib from zero.

babel-plugin-i18n-export

Build Status Coverage Status npm

This babel-plugin used to export translation mapping file into json file from source code.
babel-plugin-i18n-export will check function identifier (name) in the code and extract parameters.
you can use the exported translation mapping for the next phase of translation work, instead of manually write the translation mapping.

Example

source code file


i18n("1 繋がるってことが")

i18n("idPath"," ${0} passed, ${1} total ",{0:2, 1:24*5})

vue.i18n(`3  Listen to “Lemonade” from Mili’s new album “Millennium” `)
 

exported Export.language.json

{
    "translationMap": {
        "1 繋がるってことが": "1 繋がるってことが",
        "$$idPath= ${0} passed, ${1} total ": " ${0} passed, ${1} total ",
        "3  Listen to “Lemonade” from Mili’s new album “Millennium” ": "3  Listen to “Lemonade” from Mili’s new album “Millennium” ",
    }
}
 

Usage

Install

npm i -D babel-plugin-i18n-export

Configurate Babel

your .babelrc or elsewhere babel config

{
  "presets": [
      "@babel/preset-env",
  ],
+   plugins:["babel-plugin-i18n-export"]
}
{
  "presets": [
      "@babel/preset-env",
  ],
+   plugins:[["babel-plugin-i18n-export",{functionName:'$i18n'}]]
}

Just run without .babelrc

If you don't want to add it to your workflow, you just can run it with bable cli

$ npx babel src  --plugins=babel-plugin-i18n-export

if you can't find npx command try npm install -g npx

Working on Vue-loader

When vue-loader processes a .vue single file, the <template> is not processed by Babel by default confign. This will result in the inability to extract the function in the vue <template>, so you need to configure vue-loader:

webpack.config.js

module.exports = {
    ...
    module: {
        rules: [

            {
                test: /\.vue$/,
                loader: "vue-loader",
                options: {
                    loaders: {
                        "scss": "vue-style-loader!css-loader!postcss-loader!sass-loader",
                        "sass": "vue-style-loader!css-loader!postcss-loader!sass-loader?indentedSyntax", 
                    },
+                    postLoaders: {
+                        html: 'babel-loader'
+                    }
                },
            },

Exprot file

The exported file is placed in the local folder under the project directory.

ProjectDirectory
    - local
        - Export.language.json

Rule

General Literal

your source code

i18n("Your General Literal")

// in translationMap: 
// "Your General Literal"

Path Literal

If the target function has 2 parameters, and the second parameter is not an Object, the first parameter will be taken as the Path,it can distinguish between two literally the same text.

your source code

i18n("home/page1","Your General Literal")
i18n("home/setting","Your General Literal")

// in translationMap: 
// "$$home/page1=Your General Literal"
// "$$home/setting=Your General Literal" 

Variable Literal

If the target function has 2 parameters and last parameter is not Object, and has 3 parameters, This literal will be treated as variable literal, which is supported by some i18n tools.

i18n("home/page1","Your ${0} Literal", {0:1+1})
i18n("Your ${0} Literal", {0:1+1})

// in translationMap: 
// "$$home/page1=Your ${0} Literal"
// "Your ${0} Literal"

Options

functionName

assign a function identifier (name) for extract parameters.

defualt:18n

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free