我看了Paul Irish的演讲,宣布了Yeoman(www.yeoman.io),我迷上了运行持续构建环境的概念。不满足于等待Yeoman邀请,我尝试了Grunt和Brunch。两者都很容易安装,我可以轻松地启动和运行新项目。
我不明白如何将现有项目迁移到任一平台。我的项目使用单个命名空间,并对模块使用两个约定(一个用于实例化另一个实例),每个约束都包含在导出实例或命名空间的自执行匿名函数中。
我至少有200个模块和更多简单的辅助函数导出到命名空间;因此,使用控制台在grunt / brunch项目中创建它们然后单独手动导入每个模块并不是一件有效的事情。此外,我使用至少15种不同的第三方JavaScript工具。我不清楚如何将它们带入。
以最少的重构和对任意第三方工具的支持,采用大型现有项目并将其迁移到Grunt / Brunch的最有效方法是什么?
更新:在这两者中,我发现Brunch更容易应对。如果您使用股票“骨架”(即“模板” - 从命令行{在您希望更改的文件夹中}执行“brunch new [project_name] --skeleton git://github.com/brunch /simple-js-skeleton.git“)对于纯JS,你得到一个新的文件夹结构,实际上是非常敏感的。您在“app”(您自己的代码)或“供应商”(第三方)文件夹中输入的任何内容都将在文件编辑时自动重新编译(当您运行“早午餐手表”时)。
这很好,除了。根据文档,您可以控制订单供应商脚本从Brunch config.coffee文件(JSON文本文件)编译和连接在一起。 对此文件的更改似乎没有任何效果,因此您最终会遇到期望其他插件的插件的第三方竞争条件。
此外,当您将自己的代码放入自动创建的“app”文件夹时,您会获得一个自动编译的,实时的编辑版代码;但它无法访问。早午餐会混淆窗口对象,因此我对window.myNameSpace的初始名称空间声明失败,并且对名称空间的所有后续库调用也会失败。这与Brunch的模块系统有关,我找不到任何文档。
我通过将我的命名空间类放在'vendor'文件夹中来解决这个问题,这确保了它附加到window对象;但是,现在存在竞争条件:我的命名空间并不总是可用于我的所有模块。
现在的问题是:
将所有内部和外部库复制到Brunch项目后,如何配置应用程序以合理的顺序加载它们?
答案 0 :(得分:8)
这是一个作品,但我终于明白了。当我开始使用早午餐时,如何完成第一步并不明显:导入我的目录结构。在文档显而易见之前,我花了几遍文档:
brunch new MyAppName -s https://github.com/damassi/Javascript-App-Skeleton
,它将生成一个框架文件夹结构和config.coffee文件files:
javascripts:
defaultExtension: 'js'
joinTo:
'javascripts/app.js': /^app/
'javascripts/vendor.js': /^vendor/
order:
before: [
'vendor/scripts/console-helper.js',
'vendor/scripts/jquery-1.7.1.min.js'
]
虽然Brunch在使用第6步方面比Grunt更好,但对我来说失败的原因是Brunch的编译性质。每个JavaScript文件都包含在CommonJS模块中,模块名称基于相对路径和文件名('lib / core / ajax'等)。 CommonJS哲学不适合我,而且重构我的库以使用CommonJS所涉及的工作是巨大的。
所以,回到Grunt。一旦我了解了如何将项目导入Brunch,导入Grunt就很容易了。我在Windows上,所以所有grunt调用都使用grunt.cmd。
grunt init:jquery
(这可以是任何地方,我将创建的目录结构移动到我现有的项目文件夹中)concat: {
dist: {
src: ['<config:lint.files>'],
dest: 'dist/<%= pkg.name %>.js'
}
},
min: {
dist: {
src: ['<banner:meta.banner>', '<config:concat.dist.dest>'],
dest: 'dist/<%= pkg.name %>.min.js'
}
},
qunit: {
files: ['test/**/*.html']
},
lint: {
files: ['grunt.js', 'src/**/*.js', 'test/**/*.js']
},
watch: {
files: '<config:lint.files>',
tasks: 'lint qunit'
}
grunt.registerTask('dev', 'server watch qunit');
并调用grunt dev以使服务器以实时连续构建运行。<object/>
不起作用,因为它们插入内容(在我的情况下是各种<script/>
和{{1}在iframe中,这当然会破坏我的模块模式(我的命名空间与iframe的窗口对象位于不同的窗口对象中)。幸运的是,grunt的concat对象是一个多任务,它可以连接任何东西。所以我将我的HTML文件添加到concat中,我的单页应用程序已准备就绪。<link/>
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: X-Requested-With, X-Prototype-Version, Content-Type, Origin, Allow
Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS
Access-Control-Allow-Origin: http://localhost:88
一旦我弄明白这一切,Grunt似乎工作得很好。我还没有机会在这个新的持续构建环境中开始测试实际的开发过程;但这就是能够开始的过程。
答案 1 :(得分:3)
config.coffee
不是真正的json而不是真正的js / coffeescript,但订单编辑应该有效。你能用精确的配置顺序在brunch bugtracker中打开一个问题吗?
我认为没有一种快速的方法来重写您的应用程序以使用模块而不是全局window
变量。顺便说一句,Globals被认为是一种不好的味道。但是你的解决方案可行,是的。