- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我在 Angular2 项目中使用 SystemJS。我为 TypeScript 使用 tsconfig 文件。我想使用 gulp 来连接和缩小我的生产版本代码。我在连接代码时遇到问题:每次我尝试连接文件时,我都会得到未定义的“Angular ”或未定义的“系统”。我试图修改我尝试从节点模块加载文件的顺序,但是我没有成功。
我想知道你们中是否有人遇到过这个问题,并找到了答案?
这是我的 gulp 文件:
var gulp = require('gulp'),
.....
var paths = {
dist: 'dist',
vendor: {
js: [
'node_modules/systemjs/dist/system.src.js',
'node_modules/angular2/bundles/angular2.dev.js',
'node_modules/angular2/bundles/angular2-polyfills.js',
'node_modules/angular2/bundles/router.dev.js'
...
],
css: []
},
app: {
templates: [
'app/**/*.html',
'!node_modules/*.html'
],
scripts: [
'app/**/*.ts',
'app/config.ts',
'app/app.ts'
]
}
};
var tsProject = ts.createProject('tsconfig.json', {
out: 'Whatever.js'
});
gulp.task('dev:build:templates', function () {
return gulp.src(paths.app.templates)
.pipe(ngHtml2Js({
moduleName: 'Whatever',
declareModule: false
}))
.pipe(concat("Whatever.tpls.min.js"))
.pipe(gulp.dest(paths.dist));
});
gulp.task('prod:build:templates', function () {
return gulp.src(paths.app.templates)
.pipe(minifyHtml({
empty: true,
spare: true,
quotes: true
}))
.pipe(ngHtml2Js({
moduleName: 'whatever',
declareModule: false
}))
.pipe(concat(paths.appName + ".tpls.min.js"))
.pipe(uglify())
.pipe(gulp.dest(paths.dist));
});
gulp.task('dev:build:scripts', function () {
var tsResult = tsProject.src()
.pipe(sourcemaps.init())
.pipe(ts(tsProject));
return tsResult.js
.pipe(sourcemaps.write({
sourceRoot: '/app'
}))
.pipe(concat('whatever.js'))
.pipe(gulp.dest(paths.dist));
});
gulp.task('dev:build:styles', function () {
return gulp.src(paths.app.styles)
.pipe(sass())
.pipe(gulp.dest(paths.dist + '/css'));
});
gulp.task('dev:build:vendor', function () {
return gulp.src(paths.vendor.js)
.pipe(concat('vendor.min.js'))
.pipe(gulp.dest(paths.dist))
});
gulp.task('dev:build', [
'dev:build:vendor',
'dev:build:templates',
'dev:build:scripts',
'dev:build:styles',
], function () {
});
这是我加载文件的方式:
<script src="vendor.min.js"></script>
<script src="Whatever.js"></script>
<script src="Whatever.tpls.min.js"></script>
这是我遇到的错误:
Uncaught TypeError: Unexpected anonymous System.register call.(anonymous function) @ vendor.min.js:2680load.metadata.format @ vendor.min.js:3220oldModule @ vendor.min.js:3749(anonymous function) @ vendor.min.js:2411SystemJSLoader.register @ vendor.min.js:2636(anonymous function) @ Whatever.js:2
Whatever.tpls.min.js:1 Uncaught ReferenceError: angular is not defined
最佳答案
您将收到“意外的匿名 System.register 调用”,因为未按正确的顺序加载引用。我使用 JSPM 正确构建用于生产的 Angular 应用程序。该过程有 4 个部分。
第 1 部分:编译您的 typescript 文件
var ts = require("gulp-typescript");
var tsProject = ts.createProject("./App/tsconfig.json");
gulp.task("compile:ts", function () {
var tsResult = tsProject.src()
.pipe(ts(tsProject));
tsResult.js.pipe(gulp.dest("./wwwroot/app"));
});
第 2 部分:配置 config.js(告诉 JSPM 如何捆绑您的应用程序):
System.config({
baseURL: "/",
defaultJSExtensions: true,
paths: {
"npm:*": "jspm_packages/npm/*",
"github:*": "jspm_packages/github/*",
"node_modules*": "node_modules/*"
},
map: {
'app': 'app',
'rxjs': 'node_modules/rxjs',
'@angular': 'node_modules/@angular'
},
packages: {
'app': { main: 'bootDesktop.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'@angular/common': { main: 'index.js', defaultExtension: 'js' },
'@angular/compiler': { main: 'index.js', defaultExtension: 'js' },
'@angular/core': { main: 'index.js', defaultExtension: 'js' },
'@angular/http': { main: 'index.js', defaultExtension: 'js' },
'@angular/platform-browser': { main: 'index.js', defaultExtension: 'js' },
'@angular/platform-browser-dynamic': { main: 'index.js', defaultExtension: 'js' },
'@angular/router': { main: 'index.js', defaultExtension: 'js' },
'@angular/router-deprecated': { main: 'index.js', defaultExtension: 'js' },
'@angular/testing': { main: 'index.js', defaultExtension: 'js' },
'@angular/upgrade': { main: 'index.js', defaultExtension: 'js' }
}
});
第 3 部分:使用 gulp-jspm-build 来捆绑您的应用程序(我之前使用的是 gulp-jspm,但它导致了错误,所以我切换到 gulp-jspm-build):
var jspm = require('gulp-jspm-build');
gulp.task("jspm_bundle", function () {
return jspm({
bundleOptions: {
minify: true,
mangle: false
},
bundleSfx: true,
bundles: [
{ src: './wwwroot/app/appBoot.js', dst: 'boot.bundle.min.js' }
]
})
.pipe(gulp.dest('./wwwroot/js-temp'));
});
//this will create a file called boot.bundle.min.js
//note I have set jspm to create a self-executing bundle
//I put mangle to false because mangling was causing errors
4:现在连接所有已经缩小的 Assets :
gulp.task("min:js", ["jspm_bundle"], function () {
//this only concats boot.bundle.min.js
//and dependencies.min.js which has already been minified such as es6-shim.js
var files = [
"./wwwroot/js-temp/dependencies.min.js",
"./wwwroot/js-temp/boot.bundle.min.js"
];
return gulp.src(files)
.pipe(concat("boot.bundle.min.js"))
.pipe(gulp.dest("./wwwroot/js"));
});
最后,将一个整洁的脚本引用放入您的 index.html 中:
<script src="~/js/boot.bundle.min.js"> </script>
更新:修改 config.js 以符合 Angular 2.0-rc.0 appp
更新 2:tsconfig.json 看起来像这样:
{
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "commonjs",
"moduleResolution": "node",
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"declaration": false,
"noLib": false,
"target": "es5",
"outDir": "wwwroot/app/"
},
"exclude": [
"node_modules",
"wwwroot"
]
}
关于typescript - 如何使用 SystemJS 和 Gulp 准备发布版本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34614743/
我一直在试图找出为什么这会给我一个错误: PREPARE test FROM 'SELECT t.blah FROM (SELECT ? AS blah) t;'; ERROR 1054 (42S22
我想了解 Go 中的 channel 。我读过默认情况下发送和接收 block ,直到发送方和接收方都准备好。但是我们如何确定发送方和接收方的准备情况。 例如在下面的代码中 package main
大部分的pytorch入门教程,都是使用torchvision里面的数据进行训练和测试。如果我们是自己的图片数据,又该怎么做呢? 1、我的数据 我在学习的时候,使用的是fashion-mnis
在我的 Storyboard中,controller1 有 natigationController 和 segues 到 controller 2。奇怪的是 Segue 工作正常但是 overrid
我正在尝试使用Openshift在线从我的仓库中放入一些代码。 我的构建编译正常,但是部署失败: error: update acceptor rejected nodejs-mongo-persis
已结束。此问题不符合 Stack Overflow guidelines .它目前不接受答案。 要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是无关紧要的,
我有一个每晚运行的存储过程。 它从链接服务器中提取一些数据并将其插入到运行 sql 代理作业的服务器上的表中。在运行 INSERT 语句之前,该过程检查链接服务器上的数据库是否联机 (STATE =
我对 PDO 准备好的语句比较陌生。 我忍不住觉得必须有一种更简单、更整洁的方法来执行以下操作:我无论如何都将所有内容加载到一个数组中,然后必须将整个内容重写为一组 ':blah '=>$found[
我正在准备一个 pandas 数据框,用于在 R 的 ggplot2 中绘制带有误差条的图,这需要计算列的统计数据。误差条需要最小值(平均值 - 标准偏差)和最大值(平均值+标准差)。我使用 grou
我的 prepareForSegue 方法没有将数据传递到目标 View Controller 。 var buttonsDictionary = [Int: UIButton]() func cre
需要帮助来完成这个简单的任务。该 sp 应该提供一个结果集,并将从 MS-Access-Database 报告目的中调用。 表名可变,但以数字 (lsid) 结尾。使用串联。max_prepared_
我正在为我工作的小型企业创建销售订单表单。我有一个表单连接到数据库以获取下拉菜单,然后连接到文本框以在需要时添加新数据。如果前面的部分中的所有数据框均已填写,还会出现另外四个部分。 链接到数据库的
以下代码: class Database { (...) public function query($query){ $this->stmt = $this->dbh
我正在开展一个学校项目,涉及一个具有数据库集成的网站。目前正致力于通过它向网站添加新内容(文本、标题、图像)。我已经可以通过网站向数据库添加新用户,但由于某种原因,相同的代码和逻辑不适用于内容。 我注
我如何mysqli::stmt->bind_param在mysql中被视为NULL的东西? 我目前正在使用 $stmt->bind_param('s', 'NULL'); 最佳答案 bind_para
我在此处运行准备 stmt 时遇到语法错误。我尝试手动执行 @c 中的查询并且它有效。不知道为什么 stmt 会给出这个错误。这是我正在使用的代码。 SET @i=24; SET @Bill_mont
已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。 这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-top
我想知道准备好的查询是否与未准备的查询一样安全。下面是两个示例,一个用于 SELECT,一个用于 UPDATE。第一行是未准备的查询,第二行是准备好的查询。 选择示例: $userDetails =
我是 ios 开发的新手,在我尝试做的事情上遇到了障碍。 我的方法中有这段代码,旨在将特定的 NSObject 从这个 View 传递到下一个 View ,但是它总是让我的应用程序崩溃。 -(void
自上次调用 segue 以来,我的 UIButton 类的 statValue 属性已更新,但 segue 仍发送旧的原始值。有没有办法刷新 prepare 函数(如下),以便它发送新值? overr
我是一名优秀的程序员,十分优秀!