For more detailed documentation, visit Documentation Link.
A simple npm package for translation and replacement. This package is currently fully functional for vue, nuxt, react and ...
Install the package using npm:
npm install translate-replaceWe add start commands to Package.json:
"scripts": {
# ...
"translate": "node node_modules/translate-replace/toTranslate.js",
"cTranslate": "node node_modules/translate-replace/toCreateTranslate.js"
},We will take the texts from our first project, for this:
npm run cTranslateThis command will output all the text in your project to the translateFile.json file in json format
!! Check the u file just in case
After this command, it is recommended to check the translations keywords, that the word to be replaced is not equal to the keyword, not equal to the component name, and so on.
Insert keywords:
npm run translateThis command replaces the text in the translateFile.json file with the text in the project
You can adjust the settings you need from the settings file
translate.configmodule.exports = {
fileTypes: ["vue", "html", "jsx"],
fileTemplates: {
html: /<html lang="en">([\s\S]*?)<\/html>/,
vue: /<template lang="html">([\s\S]*?)<\/template>/,
jsx: /<>([\s\S]*?)<\/>/,
},
replace: {
content: [`{{$store.state.translations['`, `']}}`],
placeholder: [`:placeholder="$store.state.translations['`, `']`],
},
ignorFiles: [
".idea",
".nuxt",
"node_modules",
".git",
"static",
"store",
"plugins",
"mixins",
"api",
"assets",
"helpersTranslation",
],
};You choose or modify the templates depending on the environment you are using For example:
fileTemplates: {
html: /<html lang="en">([\s\S]*?)<\/html>/,
vue: /<template lang="html">([\s\S]*?)<\/template>/,
jsx: /<>([\s\S]*?)<\/>/,
},/<html lang="en">([\s\S]*?)<\/html>/For
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
</html>So
# /<html lang="en">([\s\S]*?)<\/html>/ == <html lang="en"></html>Only texts in are retrieved
<template lang="html">
<div>
<div>Your text</div>
</div>
</template># /<template lang="html">([\s\S]*?)<\/template>/ == <template lang="html"></template>Only texts in are retrieved
and for React
return (
<>
<div>Your text</div>
</>
);# /<>([\s\S]*?)<\/>/ == <></>Only texts in <></> are retrieved
replace: {
content: [`{{$store.state.translations['`, `']}}`],
placeholder: [`:placeholder="$store.state.translations['`, `']`],
},Replace with keyword: You can store the keywords in global data storage ie store or redux ( vue, react ) so you can replace the view you need This example is for translations stored in vue So You can get the translation object from translateFile.json ==>
translateFile.jsonexport const state = () => ({
translations: {
your_json_key: 'your_text'
},
})You have to put
{{$store.state.translations['your_json_key']}}Through these, you can get it as per your convenience
content: [`{{$store.state.translations['`, `']}}`],
placeholder: [`:placeholder="$store.state.translations['`, `']`],Your file
# myFile.vue
<template lang="html">
<div>
<div>Your text</div>
</div>
</template>
<script>
export default {};
</script>
<style lang="css"></style>Your config
module.exports = {
fileTypes: ["vue", "html", "jsx"],
fileTemplates: {
html: /<html lang="en">([\s\S]*?)<\/html>/,
vue: /<template lang="html">([\s\S]*?)<\/template>/,
jsx: /<>([\s\S]*?)<\/>/,
},
replace: {
content: [`{{$store.state.translations['`, `']}}`],
placeholder: [`:placeholder="$store.state.translations['`, `']`],
},
ignorFiles: [
".idea",
".nuxt",
"node_modules",
".git",
"static",
"store",
"plugins",
"mixins",
"api",
"assets",
"helpersTranslation",
],
};# translateFile.json
{
"myFile.0": "Your text"
}<template lang="html">
<div>
<div>{{$store.state.translations['myFile.0']}}</div>
</div>
</template>
<script>
export default {};
</script>
<style lang="css"></style>