我有很多时间尝试使用Mocha和RequireJS设置node/npm.这就是我所做的.
我已经创建了一个测试/目录,具有以下结构:
testing/
|
+-- package.json
|
+-- README.md
|
+-- test/
|
+-- mocha.opts
|
+-- widgets/
|
+--mywidget/
|
+-- test.js
以下是每个相关文件包含的内容:
的package.json:
{
"name":"testing-project",
"version":"2.5.0",
"description":"Testing Project",
"keywords":["test"],
"engines": { "node": ">= 0.7.0 < 0.11.0" },
"scripts" : {
"test": "./node_modules/.bin/mocha"
},
"devDependencies": {
"mocha": ">= 1.18.2",
"requirejs": ">= 2.1.11",
"should": ">= 3.2.0",
"expect.js": ">= 0.3.1"
}
}
测试/ mocha.opts:
--require expect.js
--require should
--require requirejs
--require mocha
--reporter spec
--ui tdd
--recursive
--growl
测试/部件/进myWidget/test.js
'use strict'; …我在CoffeeScript中有这个功能
render: ->
_.each @$elements, ($el) =>
if $el[0].id is 'tabs-div'
emptySlate = "<div class='js-empty-slate' style='padding:40px;'><h3>no data available</h3><div>"
@setEmptyPlacholde($el, emptySlate)
return
@setEmptyPlacholde($el)
setEmptyPlacholde: ($el, emptySlate)->
emptySlateHTML = emptySlate or "<h3 class='js-empty-slate'>no data available</h3>"
if $el.hasClass('mobile-os-con') or
$el.hasClass('time-of-visit-con') or
$el.hasClass('gender-visit-con') or
$el.hasClass('time-redemption-sales-con') or
$el.hasClass('gender-redemption-con')
$el.children().hide()
else
$el.empty()
$el.append emptySlateHTML
$ elements是一个jQuery变量,它使用如下数组:
$elements: [
$("#tabs-div")
$("#visits-male")
$("#visits-female")
$("#days-of-visits")
$(".time-of-visit-con")
]
当我使用RequireJS优化器时r.js,它使用Uglify生成的缩小代码..看起来像这样:
render:function(){var e=this;return _.each(this.$elements,function(t){var n;if(t[0].id==="tabs-div"){n="<div class='js-empty-slate' style='padding:40px;'><h3>no data available</h3><div>",e.setEmptyPlacholde(t,n);return}return e.setEmptyPlacholde(t)})}
在之前的缩小代码中,$el变成了t..所以这拒绝$el在生产中执行as jQuery元素. …
我正在使用Grunt构建Durandal入门套件专业版.
这一切都很好,除了一个小细节.我想app-config从优化器中排除一个文件(下面),并在构建完成后将其保存为非缩小文件.
根据其他SO线程建议,我目前正在使用empty:它,将其从预期的优化文件中删除.但是,当我打开构建的项目时,我在控制台中收到错误:
Uncaught Error: main missing app-config
options: {
name: '../lib/require/almond-custom',
baseUrl: requireConfig.baseUrl,
mainPath: 'app/main',
paths: mixIn({ }, requireConfig.paths, {
'almond': 'lib/require/almond-custom',
'app-config': 'empty:'
}),
optimize: 'none',
out: 'build/app/main.js',
preserveLicenseComments: false
}
杏仁是问题吗？我尝试使用它将其切换到完整的requirejs include: ['path/to/require'],但没有成功.
如果你想在本地重现它,你可以从上面的链接下载入门套件,或者使用一个稍微可配置的版本,这更接近我的例子.只需npm install在文件夹中运行一个就可以了.
javascript requirejs durandal grunt-contrib-requirejs requirejs-optimizer
正如所宣传的那样,rjs在Play中可以
确保从jsdelivr CDN自动引用从WebJar中引用的任何JavaScript资源.此外,如果找到任何.min.js文件,那么将使用该文件代替.js.这里的另一个好处是你的html不需要改变!
但是,我似乎无法让任何一个工作.
.min生产中使用的javascript文件的版本.我不能让依赖注入在生产模式下工作.例如,当我想像jquery我这样注入我的代码时
define(['jquery'],function($){'use strict'; console.log($.grep); return {sum:function(a,b){return a + b;}};});
我可以让它在开发模式下正常工作,但在生产模式下,rjs失败的说法
[info] Error: ENOENT, no such file or directory '/Users/khanguyen/Desktop/rjsdemo/target/web/rjs/build/js/jquery.js'
[info] In module tree:
[info] main
[info] app
[info]
[info] Error: Error: ENOENT, no such file or directory '/Users/khanguyen/Desktop/rjsdemo/target/web/rjs/build/js/jquery.js'
[info] In module tree:
[info] main
[info] app
[info]
[info] at Error (native)
显然它正在查看jQuery的错误位置,尽管Webjar生成了配置设置
requirejs.config({"paths":{"jquery":["/webjars/jquery/1.11.1/jquery","jquery"]},"shim":{"jquery":{"exports":"$"}},"packages":[]}) }
拥有正确的位置jquery.
我正在使用Play 2.4.0,pipelineStages := Seq(rjs, digest)在build.sbt中使用setup.
请告诉我哪里弄错了. …
这是我目前为Play 2.2.x requireJS设置的.它会在2.3之后继续工作吗？我在2.3文档中的任何地方都找不到requireJs或requireJsShim.
requireJs ++= Seq("mainAccount.js", "mainOrg.js", "mainPublic.js"), // This tells Play to optimize this file and its dependencies
requireJsShim += "build.js", // This tells Play to read the RequireJS "shim" configuration from build.js
requireJsFolder := "js"
我一定是在某个地方犯了一个错误，但是在优化过程中它没有被写入标准输出。我正在尝试通过 requirejs 优化文件，但输出没有被缩小。根据文档，UglifyJS 应该缩小代码。
无论如何，以下代码是微不足道的，但它隔离了问题。
源代码/索引.js：
require(['config'], function () {
require(['myMod'], function (myMod) {
console.log(myMod.x());
})
})
src/myMod.js:
define(function () {
let myMod = {
x: 5
};
return myMod;
})
源代码/config.js：
define(function () {
require.config({
baseUrl: 'src'
});
})
这是执行优化的 gulp 任务：
gulp.task('optimize', function (cb) {
let config = {
appDir: 'src',
dir: 'dist/src',
generateSourceMaps: true,
preserveLicenseComments: false,
removeCombined: true,
baseUrl: './',
modules: [{
name: 'index',
include: ['myMod']
}]
}
let success = function (buildResponse) { console.log(buildResponse); …在我的Cordova项目中,我有一个执行RequireJS优化(r.js)的钩子after_prepare.该优化本质上是异步的,因此我的钩子代码在所有优化完全完成之前返回.
例如,这会在运行时导致问题cordova run browser:在第一页加载时,优化尚未完成且站点看起来已损坏.
有没有办法让Cordovoa构建过程阻塞,直到某个钩子触发回调？或者优化器可以以阻塞/同步方式运行吗？
我能想到的另一个选择是使用不同的优化过程和主要忙碌等待它完成,但这对我来说似乎是一种过度杀伤和不好的做法.
我正在使用以下架构来处理基于multipages multipus的应用程序:https: //github.com/requirejs/example-multipage-shim
存储库解释了如何通过运行r.js(用于此类任务的命令行工具)来优化应用程序.
一切都应该工作正常,但我的项目作为一些模块,具有执行HTTP GET请求从服务器获取数据的依赖项(可以是text或json)
这是因为某些页面使用的某些jsons和模板需要在服务器端进行本地化处理.
这是一个显示我在说什么的基本示例:
define( function( require ){
var appLang = require('json!/pagelang/login'), //(a)
loginTemplate = require('text!/template/login'), //(b)
module = require('app/model/user'), //(c)
....
向我的服务器localhost/pagelang/login发出HTTP get请求,返回一个json
{
"hash": "translated_value",
...
}
这同样适用于template/template_name从服务器返回将其UI翻译成用户语言的html的地方.
通过运行r.js,它会尝试为服务器上的exirect目录目录加载这些位置,这显然不存在.
Tracing dependencies for: app/main/login
Error: Error: Loader plugin did not call the load callback in the build:
json:
json!/pagelang/login: Error: ENOENT, no such file or directory '/pagelang/login'
Module loading did not complete for: app/main/login
所以,我想阻止命令行工具优化文本!和json!模块.可能吗？
我检查了requirejs构建设置,但我找不到解决问题的方法.有帮助吗？ https://github.com/jrburke/r.js/blob/master/build/example.build.js