web-dev-qa-db-ja.com

Ionic 3の環境固有の引数

環境に応じてJavaScript/TypeScriptコードを区別するために、ionic ionic build Android --prod --deviceのようなコマンドラインインターフェイスで使用されている環境固有の引数はどのような方法ですか。例productionおよび開発？

process.env.IONIC_ENVを使用する必要がありますか？または、どのようにしてその区別を照会できますか？

javascriptangulartypescriptenvironment-variablesionic3
9
Michael Czechowski

Rob Ferguson のチュートリアルに基づいて、3つのことを行う必要があります。完全に交換可能なファイル構造によって異なります（./はアプリケーションのルートディレクトリを示します）。

./ tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@env": [ "env/env" ]
    },
    ...
  }
  ...
}

./ package.json

{
  "config": {
    "ionic_source_map_type": "source-map",
    "ionic_webpack": "./config/webpack.config.js"
  },
  ...
}

./ config/webpack.config.js（ionic_webpackのpackage.jsonに依存） 

/*
 * The webpack config exports an object that has a valid webpack configuration
 * For each environment name. By default, there are two Ionic environments:
 * "dev" and "prod". As such, the webpack.config.js exports a dictionary object
 * with "keys" for "dev" and "prod", where the value is a valid webpack configuration
 * For details on configuring webpack, see their documentation here
 * https://webpack.js.org/configuration/
 */

const path = require('path');
// If you start your building process with the flag --prod this will equal "prod" otherwise "dev"
const ENV = process.env.IONIC_ENV;

const devConfig = {
  entry: ...,
  output: {...},
  devtool: ...,
  resolve: {
    extensions: [...],
    modules: [...],
    alias: {
      // this distincts your specific environment "dev" and "prod"
      "@env": path.resolve(`./src/env/env.ts`),
    }
  },
  module: {...},
  plugins: [...],
  node: {...}
};

const prodConfig = {
  entry: ...,
  output: {...},
  devtool: ...,
  resolve: {
    extensions: [...],
    modules: [...],
    alias: {
      // this distincts your specific environment "dev" and "prod"
      "@env": path.resolve(`./src/env/env.prod.ts`),
    }
  },
  module: {...},
  plugins: [...],
  node: {...}
};

module.exports = {
  dev: devConfig,
  prod: prodConfig
}

説明

魔法はdevConfig.resolve.aliasとprodConfig.resolve.aliasに付属しています。このコード行は、独自のモジュールやノードモジュールのようなインポート可能なエイリアスを作成します。これで、import { ENV } from '@env'を介して、任意のモジュール、コンポーネント、サービス、パイプ、または好きなものに注入できるようになります。

注意

環境固有のファイルを作成することを忘れないでください。この例では、次のようなファイル構造が必要です。

./
|   package.json
│   tsconfig.json    
│
└── config
│       webpack.config.js
│   
└── src
    │
    └── env
            env.ts        (dev environment variables)
            env.prod.ts   (prod environment variables)

ファイルの例

./ src/env/env.ts（デフォルトでは開発になります）

export const ENV = {
  production: false,
  isDebugMode: true
};

./ src/env/env.prod.ts

export const ENV = {
  production: true,
  isDebugMode: false
};
16
Michael Czechowski

私は、これらの半分答えられた（想定されていない）質問に不満を感じます。誰かがビルドを実行するための実際のCLI指示を単純に提供できますか？

それは...ですか：

ionic cordova platform save
ionic cordova platform add ios
cd platforms
pod install
cd ..
ionic cordova build ios
0
Derek Megyesi