[英]Import an Existing JavaScript Project into a Grunt/Brunch Project
I watched Paul Irish's talk announcing Yeoman (www.yeoman.io), and I'm hooked on the concept of running a continuous build environment. 我看了Paul Irish的演讲,宣布了Yeoman(www.yeoman.io),我迷上了运行连续构建环境的概念。 Not content to wait for a Yeoman invite, I tried Grunt and Brunch.
不满足于等待Yeoman邀请,我尝试了Grunt和Brunch。 Both install easily, and I can get new projects up and running with minimal effort.
两者都很容易安装,我可以轻松地启动和运行新项目。
I don't understand how one would migrate an existing project into either platform. 我不明白如何将现有项目迁移到任何一个平台。 My project uses a single namespace and uses two conventions for modules (one for instancing another for utility), each of which are wrapped in self-executing anonymous functions which export to the instance or the namespace.
我的项目使用单个命名空间,并对模块使用两个约定(一个用于实例化另一个实例),每个约束都包含在导出实例或命名空间的自执行匿名函数中。
I have at least 200 modules and many more simple, helper function exports to the namespace; 我有至少200个模块和更多简单的辅助函数导出到命名空间; so it is not at all efficient to use the console to create these in a grunt/brunch project and then manually import each module individually.
因此,使用控制台在grunt / brunch项目中创建它们然后单独手动导入每个模块并不是一件有效的事情。 Further, I'm using at least 15 different 3rd-party JavaScript tools.
此外,我使用至少15种不同的第三方JavaScript工具。 It is not clear to me how to bring these in.
我不清楚如何将它们带入。
What is the most efficient way to take a large, existing project and migrate it into Grunt/Brunch with the least amount of refactoring and support for arbitrary 3rd party tools? 以最少的重构和对任意第三方工具的支持,采用大型现有项目并将其迁移到Grunt / Brunch的最有效方法是什么?
Update : of the two, I've found Brunch a bit easier to cope with. 更新 :在这两个中,我发现Brunch更容易应对。 If you use the stock "skeleton" (that is "template"--from the command line {in the folder you want the change to occur} execute "brunch new [project_name] --skeleton git://github.com/brunch/simple-js-skeleton.git") for pure JS, you get a new folder structure which is actually quite responsive.
如果您使用股票“骨架”(即“模板” - 从命令行{在您希望更改的文件夹中}执行“brunch new [project_name] --skeleton git://github.com/brunch /simple-js-skeleton.git“)对于纯JS,你得到一个新的文件夹结构,实际上是非常敏感的。 Anything you drop into to 'app' (your own code) or 'vendor' (3rd-party) folders will get automatically recompiled for you on file edit (when you run "brunch watch").
您在“app”(您自己的代码)或“供应商”(第三方)文件夹中输入的任何内容都将在文件编辑时自动重新编译(当您运行“早午餐手表”时)。
This is great, except. 这很好,除了。 According the documentation, you control the order vendor scripts are compiled and concatenated together from the Brunch config.coffee file (JSON text file).
根据文档,您可以控制订单供应商脚本从Brunch config.coffee文件(JSON文本文件)编译和连接在一起。 Changes to this file seem to have no effect, thus you end up with 3rd party race conditions from plugins expecting other plugins.
对此文件的更改似乎没有任何效果,因此您最终会遇到期望其他插件的插件的第三方竞争条件。
Further, when you drop your own code into the auto-created 'app' folder you do get an auto-compiled, real-time, as-you-edit version of your code; 此外,当您将自己的代码放入自动创建的“app”文件夹时,您会获得一个自动编译的,实时的编辑版代码; but it's not accessible.
但它无法访问。 Brunch obfuscates the window object, so my initial namespace declaration to window.myNameSpace fails and all subsequent library calls to the namespace fail as well.
早午餐会混淆窗口对象,因此我对window.myNameSpace的初始名称空间声明失败,并且对名称空间的所有后续库调用也会失败。 This has something to do with Brunch's module system, for which I can find no documentation.
这与Brunch的模块系统有关,我找不到任何文档。
I solved this by placing my namespace class in the 'vendor' folder, which ensured that it attached to the window object; 我通过将我的命名空间类放在'vendor'文件夹中来解决这个问题,这确保了它附加到window对象; however, now there is a race condition: my namespace isn't always available for all of my modules.
但是,现在存在竞争条件:我的命名空间并不总是可用于我的所有模块。
The problem is now this: 现在的问题是这样的:
Once you have copied all of your internal and external libraries into a Brunch project, how do you configure the app to load them in a sane order? 将所有内部和外部库复制到Brunch项目后,如何配置应用程序以合理的顺序加载它们?
This is a bit of an opus, but I finally figured it out. 这是一个作品,但我终于明白了。 When I started with Brunch, it was not obvious how to make the first step: import my directory structure.
当我开始使用早午餐时,如何完成第一步并不明显:导入我的目录结构。 It took me a few passes over the documentation, before it became obvious:
在它变得明显之前,我花了几遍文档。
brunch new MyAppName -s https://github.com/damassi/Javascript-App-Skeleton
, which will generate a skeleton folder structure and config.coffee file 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' ]
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' ]
While Brunch is better out of the box than Grunt at the ease of using step 6, where it failed for me is the nature of compilation in Brunch. 虽然Brunch在使用第6步方面比Grunt更好,但对我来说失败的原因是Brunch的编译性质。 Every JavaScript file gets wrapped in a CommonJS module and the module name is based on the relative path and file name ('lib/core/ajax', etc.).
每个JavaScript文件都包含在CommonJS模块中,模块名称基于相对路径和文件名('lib / core / ajax'等)。 The CommonJS philosophy is not for me, and the work involved in refactoring my library to use CommonJS is huge.
CommonJS哲学不适合我,并且重构我的库以使用CommonJS所涉及的工作是巨大的。
So, back to Grunt. 所以,回到Grunt。 Once I understood how to import a project into Brunch, importing into Grunt was a snap.
一旦我了解了如何将项目导入Brunch,导入Grunt就很容易了。 I'm on windows, so all grunt calls use grunt.cmd.
我在Windows上,所以所有的grunt调用都使用grunt.cmd。
grunt init:jquery
(this can be anywhere, I moved the created directory structure into my existing project folder) 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' }
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.registerTask('dev', 'server watch qunit');
and call grunt dev to get a server running with real-time, continuous build. <object/>
don't work, as they insert the content (in my case various <script/>
and <link/>
elements) into an Iframe, which of course breaks my module pattern (My namespace is in a different window object than the window object of the iframes). <object/>
不起作用,因为它们插入内容(在我的情况下是各种<script/>
和<link/>
元素)进入一个iframe,当然这会破坏我的模块模式(我的命名空间与iframe的窗口对象位于不同的窗口对象中)。 Fortunately, grunt's concat object is a multitask and it can concatenate anything. 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
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
xhrFields: { withCredentials: true }
xhrFields: { withCredentials: true }
Once I figured all of this out, Grunt seems to be working pretty well. 一旦我弄明白这一切,Grunt似乎工作得很好。 I have not yet had a chance to begin testing the actual process of development in this new continuous build environment;
我还没有机会在这个新的持续构建环境中开始测试实际的开发过程; but this is what it took to get to being able to start.
但这是能够开始的。
config.coffee
isn't really json rather than real js / coffeescript, but the order editing should work. config.coffee
不是真正的json而不是真正的js / coffeescript,但订单编辑应该有效。 Can you open an issue in brunch bugtracker with exact config order? 你能用精确的配置顺序在brunch bugtracker中打开一个问题吗?
I don't think there's a fast way of rewriting your app to use modules rather than global window
variables. 我不认为有一种快速的方法来重写您的应用程序以使用模块而不是全局
window
变量。 Globals are considered as a bad taste, by the way. 顺便说一句,Globals被认为是一种不好的味道。 But your solution could work, yep.
但你的解决方案可行,是的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.