Jef*_*rey 14 javascript modularity requirejs
我开始评估JavaScript模块工具,如RequireJS用于javascript模块化.这似乎很有用,特别是在开发过程中,所以mylib-<version>.js每当我更改其中一个相关文件时,我都不需要重新编译所有的js 文件.
我的应用程序与html和javascript文件一起分发,在生产中,我想使用javascript文件的编译版本.
所以在开发中,我的html文件可能看起来像
<html>
<head>
<script data-main="scripts/main" src="scripts/require.js"></script>
</head>
</html>
但在生产中,我希望它看起来更像
<html>
<head>
<script src="mylib-1.0.js"></script>
</head>
</html>
如果我正在分发编译文件,我不认为生产应该有任何需要引用requirejs.
有没有办法在我分发应用程序之前不必手动更改我的html文件？
asg*_*oth 11
RequireJs有一个优化工具,可以帮助您缩小和连接模块.它有很多选项,并且可能很难使用,但是使用像GruntJs或(特别是)Yeoman这样使用GruntJs构建的构建工具会变得更容易.
在两者中你都可以使用rjs任务(优化模块),但是Yeoman再次更容易,因为它有生成器,它已经为你配置它:
// usemin handler should point to the file containing
// the usemin blocks to be parsed
'usemin-handler': {
html: 'index.html'
},
// rjs configuration. You don't necessarily need to specify the typical
// `path` configuration, the rjs task will parse these values from your
// main module, using http://requirejs.org/docs/optimization.html#mainConfigFile
//
// name / out / mainConfig file should be used. You can let it blank if
// you're using usemin-handler to parse rjs config from markup (default
// setup)
rjs: {
// no minification, is done by the min task
optimize: 'none',
baseUrl: './scripts',
wrap: true,
name: 'main'
},
在index.html您只需使用注释行指定哪些js文件应缩小/连接到哪个输出文件:
<!-- build:js scripts/amd-app.js -->
<script data-main="scripts/main" src="scripts/vendor/require.js"></script>
<!-- endbuild -->
在上面的示例中,模块将连接到一个名为的文件amd-app.js.
编辑:
这将通过grunt从命令行执行来完成.这将启动许多有用的任务,这将在一个dist文件夹中构建项目,但这又是高度适应性的.
生成的index.html文件(in dist)只有(如果需要)一个javascript文件:
<script src="scripts/15964141.amd-app.js"></script>
我的建议:使用Yeoman让生活更轻松(至少在处理缩小/连接时).
| 归档时间： |
|
| 查看次数： |
6207 次 |
| 最近记录： |