npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

babel-plugin-i18n-export

v1.0.0

Published

create your js lib from zero.

Downloads

2

Readme

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