从脚本文件而不是从 CLI 运行 Angular CLI 脚本?本地化/国际化



我们正在设置自己在我们的 Angular 2 应用程序中进行国际化/本地化,我希望能够编写一些脚本来执行各种任务,例如生成翻译源文件、构建和/或使用特定语言的翻译为应用程序提供服务。

与其在package.json文件中编写脚本,我希望能够在脚本/目录中的单独文件中捕获脚本,并且package.json文件中的脚本只会指向这些脚本。

例如,我想在package.json中采取这样的东西:

"scripts": {
//other irrelevant scripts
"generateXLF": "ng-xi18n --i18nFormat=xlf  --outFile=./src/locale/baseFile/messages.xlf",
//other irrelevant scripts
},

取而代之的是这样的东西:

"scripts": {
//other irrelevant scripts
"generateXLF": "node ./build/scripts/locale/generateXLF.js"
//other irrelevant scripts
},

或者代替这样的东西:

"scripts": {
//other irrelevant scripts
"serveLocale": : "./node_modules/.bin/ngc --i18nFile=./src/locale/languages/($someLocaleIPassIn)/messages.($someLocaleIPassIn).xlf --locale=($someLocaleIPassIn) --i18nFormat=xlf",
//other irrelevant scripts
},

取而代之的是:

"scripts": {
//other irrelevant scripts
"serveLocale": : "node ./build/scripts/locale/serveLocale.js $someLocaleIPassIn"
//other irrelevant scripts
},

基本上我需要执行以下操作:

  • 编写可以封装/执行命令的脚本,我通常必须使用带有大量标志的 Angular CLI 运行这些命令。 即我如何从带有一堆标志的脚本文件运行"ng serve"?
  • 能够将参数传递给这些脚本

目前我是那里的一部分。 例如,在我的generateXLF.js文件中,我目前只是尝试运行ng serve,没有参数或标志,如下所示:

var ngServe = require('@angular/cli/commands/serve');
new ngServe.default();

但我不断收到此错误:

C:ProjectsMyProjectStyleGuidenode_modules@angularcliember-clilibmodelscommand.js:77
this.isWithinProject = this.project.isEmberCLIProject();
^
TypeError: Cannot read property 'isEmberCLIProject' of undefined
at Class.init (C:ProjectsMyProjectStyleGuidenode_modules@angularcliember-clilibmodelscommand.js:77:40)
at Class.superWrapper [as init] (C:ProjectsMyProjectStyleGuidenode_modulescore-objectlibassign-properties.js:34:20)
at Class.CoreObject (C:ProjectsMyProjectStyleGuidenode_modulescore-objectcore-object.js:9:15)
at Class (C:ProjectsMyProjectStyleGuidenode_modulescore-objectcore-object.js:21:5)
at Class (C:ProjectsMyProjectStyleGuidenode_modulescore-objectcore-object.js:21:5)
at C:ProjectsMyProjectStyleGuidebuildscriptslocalegenerateXLF.js:32:5
at Object.<anonymous> (C:ProjectsMyProjectStyleGuidebuildscriptslocalegenerateXLF.js:37:3)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
Process finished with exit code 1

当我从 CLI 运行它时,ng serve工作正常,但当我尝试从脚本运行它时则不然。 我猜我需要以某种方式设置脚本文件以了解我的.angular-cli.json文件和package.json文件的位置,并对这些文件中的信息执行操作以使ng serve从脚本文件正确运行。 但我可能完全错了为什么它失败了。

TLDR:如何从脚本文件成功运行带有标志的 Angular CLI 脚本? 如何获取我传递的参数?

最终弄清楚了。 这是我的脚本,compileInLocale.js

#! /usr/bin/env node
const angularCli = require('@angular/cli');
const fileSystem = require('fs');
const chalk = require('chalk');
var command = process.argv.slice(2, 3).toString();
var locale = process.argv.slice(3, 4).toString();
console.log(chalk.bgBlueBright.bold('Attempting to execute ' + __filename + ' with command "' +
command + '" and locale "' + locale + '".n'));
makeArguments(command, locale);
/**
* @name makeArguments
* @description Create the array of arguments to send to the Angular CLI
* @param {String} commandToRun the ng command we want to run, such as 'serve' or 'build'
* @param {String} specifiedLocale the locale that the developer specified when they called
* the script.  For example, the string 'es' from the following command line
* entry:  'npm run serveInLocale es'
* @returns {void} Nothing.
*/
function makeArguments(commandToRun, specifiedLocale) {
var localeFile = './src/locale/languages/' + specifiedLocale + '/messages.' + specifiedLocale + '.xlf';
if (fileSystem.existsSync(localeFile)) {
/*
@TODO: add in logic to build the base translation file, then compare the contents of the
@TODO <source> tags in the translation file to the <source> tags in the file we are trying
@TODO to serve to see if it is up-to-date.
*/
var argArray = [
commandToRun,
'--aot',
'--i18nFile=' + localeFile,
'--locale=' + specifiedLocale,
'--i18nFormat=xlf'
];
console.log(chalk.bgGreen.bold('Preparing to ' + commandToRun + ' file ' + localeFile + '.n'));
serveInSpecifiedLocale(argArray);
}
else {
console.log(chalk.bgRed.bold('Cannot ' + commandToRun + ' file ' + localeFile + '.  File does not exist!n'));
}
}
/**
* @name serveInSpecifiedLocale
* @description Send an object to the Angular CLI containing our arguments array, and other
* properties that Angular CLI needs to execute our command.
* @param {Array} argArray the array of arguments we want to give to the CLI
* @returns {void} Nothing.
*/
function serveInSpecifiedLocale(argArray) {
/*
@TODO: move this to its own file.  We will have more scripts in the
@TODO future which need to send arguments to the Angular CLI.
*/
angularCli({
cliArgs: argArray,
inputStream: process.stdin,
outputStream: process.stdout
});
}

使用如下命令运行它:npm run buildInLocale es
或 this:

npm run serveInLocale fr

package.json有这样的东西:

"serveInLocale": "node ./build/scripts/locale/compileInLocale.js serve",
"buildInLocale": "node ./build/scripts/locale/compileInLocale.js build"    

根据您键入的是buildInLocaleserveInLocale,脚本将以servebuild作为参数命中,然后是区域设置作为另一个参数,如果我们有该语言环境的文件,则脚本有效。

旁注:我最终无缘无故地做了一堆工作来解决这个问题。 这是没有意义的,因为 Angular 2 中用于国际化的本机工具(i18n 属性(在涉及 2 向绑定时没有支持翻译的方法,因此我们最终将使用类似ngx-translate的东西。 我仍然想发布我的解决方案,以防其他人需要编写脚本以让他们运行通常从 CLI 运行的脚本。

使用angularCli.default({})而不是angularCli({})

最新更新