4

我需要在我的 Angular 2 项目中实现 snipcart。下面的脚本标签需要插入到我的 index.html 文件的头部。

但是，开发和生产环境的 data-api-key 不同。我该怎么做？

<script src="https://cdn.snipcart.com/scripts/2.0/snipcart.js" 
        id="snipcart" 
        data-api-key="insert-your-key-here">
</script>

脚本标签在 index.html 文件中是可用的，这一点很重要，snipcart.com 将出于安全目的进行检查。

我曾尝试在运行时执行此操作：在 index.html 文件中添加不带 src-url 的脚本标签，然后在 main.ts 中使用正确的 api-key 值和 src-url 更新标签属性。

这样 snipcart 使用正确的密钥运行，但来自 snipcart.com 的验证失败。

所以我需要在编译时设置 api-key。我的 index.html 需要在开发和生产模式上有所不同。

我的项目是用 angular cli 创建的：

"angular-cli": "1.0.0-beta.19-3",

"@angular/common": "~2.1.0",
"@angular/compiler": "~2.1.0",
"@angular/core": "~2.1.0",
"@angular/forms": "~2.1.0",
"@angular/http": "~2.1.0",
"@angular/platform-browser": "~2.1.0",
"@angular/platform-browser-dynamic": "~2.1.0",
"@angular/router": "~3.1.0",

谢谢，

干杯

格尔德

4

1 回答 1

9

您可以在部署应用程序之前使用 Gulp 插入您的 API 密钥。您需要创建一个index2.html用于index.html在部署时使用良好的 api 密钥创建真实的东西。在index2.html中，放置SNIPCART_API_KEYAPI 密钥应该在的位置。

安装 Gulp 并创建gulpfile.js

var gulp = require('gulp');
var package = require('./package.json');
var replace = require('gulp-replace');
var argv = require('yargs').argv;
var gulpif = require('gulp-if');
var rename = require('gulp-rename');

gulp.task('snipcart', function() {
   gulp.src(['index2.html'])
    .pipe(gulpif(argv.production, replace("SNIPCART_API_KEY", package.config.prod.snipcart_api_key)))
    .pipe(gulpif(!argv.production, replace("SNIPCART_API_KEY", package.config.dev.snipcart_api_key)))
    .pipe(rename('index.html'))
    .pipe(gulp.dest('.''))
});

gulp.task('default', ['snipcart']);

这个 Gulp 文件应该用SNIPCART_API_KEY你找到的好密钥替换package.json并创建一个index.html.

要在需要时调用 Gulp 任务，可以在package.json. 您需要调用npm run prod部署过程，以便它使用生产密钥创建 index.html。

包.json

{
 //...
 "scripts": {
    "start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "prod": "gulp default --production",
    "dev": "gulp default"
    //...
  }
 //...
  "config" : { 
    "dev": { "snipcart_api_key" : "YOUR_KEY" },
    "prod": { "snipcart_api_key" : "YOUR_KEY" }
  }
}

您还可以创建其他脚本，例如"start-dev":"gulp default && npm npm start"

我没有测试这个解决方案，但你应该明白主要思想。;)

如果我想到更简单和更清洁的东西，我会进行编辑。

于 2016-11-09T00:15:58.000 回答