Javascript requirejs正在开发中，但在生产中编译 [英] Javascript requirejs in development but compiled in production
问题描述
我开始评估javascript模块化工具，例如RequireJS用于javascript模块化。这似乎很有用，特别是在开发过程中，因此每当我更改其中一个依赖项时，我都不需要将所有js文件重新编译为 mylib-< version> .js 文件。
I'm beginning to evaluate javascript module tools like RequireJS for javascript modularization. This seems useful, especially during development, so I don't need to recompile all of the js files into mylib-<version>.js whenever I change one of the dependent files.
我的应用程序随html和javascript文件一起发布，在生产中，我想使用javascript文件的编译版本。
My app is distributed with both html and javascript files, and in production, I would like to use the compiled version of the javascript file.
因此在开发过程中，我的html文件可能类似于
So in development, my html file might look something like
<html>
<head>
<script data-main="scripts/main" src="scripts/require.js"></script>
</head>
</html>
但在生产中，我希望它看起来更像是
But in production, I would expect it to look more like
<html>
<head>
<script src="mylib-1.0.js"></script>
</head>
</html>
如果我发布的话，我认为不应该有任何需要引用requirejs的生产编译文件。
I wouldn't think it production that there should be any need to reference requirejs if I am distributing a compiled file.
有没有办法在我分发应用程序之前不必手动更改我的html文件？
Is there a way to do this without having to manually change my html files before I distribute the app?
推荐答案
RequireJs有一个优化工具，它可以帮助您缩小和连接您的模块。它有很多选项，并且可能很难使用，但使用 GruntJs 或（特别是） Yeoman ，它使用GruntJs构建。
RequireJs has an optimization tool, which can help you to minify and concatenate your modules. It has a lot of options, and can be difficult to use, but it gets easier with a build tool like GruntJs or (especially) Yeoman, which uses GruntJs to build.
在两者中你可以使用 rjs 任务（优化模块），但再次 Yeoman 稍微容易一点，因为它有生成器来配置它已经为你了：
In both you can use the rjs task (which optimizes modules), but again Yeoman is a bit easier since it has generators which will configure it already for you:
// 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文件应缩小/连接到哪个输出文件：
In the index.html you just use a comment line to specify which js files should be minified/concatenated to which output file:
<!-- build:js scripts/amd-app.js -->
<script data-main="scripts/main" src="scripts/vendor/require.js"></script>
<!-- endbuild -->
在上面的示例中，模块将连接到一个文件，名为 amd-app.js 。
In the example above, the modules will be concatenated to ONE file, named amd-app.js.
修改：
这将通过从命令行执行 grunt 来完成。这将启动许多有用的任务，这将在 dist 文件夹中构建项目，但这又是高度适应性的。
This will be done by executing grunt from the command line. This will start a lot of useful tasks, which will build the project in a dist folder, but again this is highly adaptable.
生成的 index.html 文件（ dist ）只有（如果你想）一个javascript文件：
The resulting index.html file (in dist) has only (if you want) one javascript file:
<script src="scripts/15964141.amd-app.js"></script>
我的建议：使用Yeoman让生活更轻松（至少用于处理缩小/连接） 。
这篇关于Javascript requirejs正在开发中，但在生产中编译的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
