requirejs

RequireJS 为何会请求 name.html.js 而不是 name.html 文件

代码中写的是

var cardTemplate = require('card.html');

而在请求时，实际请求的是 card.html.js 文件, 格式如

define(function(require) {
  return '<div>...html...</div>';
});

Google 得知，在使用不同域名时会导致该问题，即当前页 html 是在 a.com 上，而引用的 html 使用了 CDN， 例如 b.com。 即，同源策略

Under the policy, a web browser permits scripts contained in a first web page to access data in a second web page, but only if both web pages have the same origin.

也就是说 a.html 页面中的脚本, 不允许从非同源的 b.html 页面中获取数据。

怎样才算是同源呢？

如果两个页面拥有相同的协议（protocol），端口（如果指定），和主机（域名, 跨子域也不行），那么这两个页面就属于同一个源（origin）。

具体规则参考 Same-origin policy, 使用 javascript 文件则可以绕过这个限制。

如何生成 name.html.js 文件

使用 RequireJS 自带的 r.js 工具

sudo npm -g install requirejs

参考这里在使用 r.js 优化时，添加参数

optimizeAllPluginResources: true

即可

参考

• require.js text plugin adds “.js” to the file name
• 初探 RequireJS
• Require.js text plugin is appending .js to my html template
• Same-origin policy
• JavaScript 的同源策略
• Text plugin assumes templates files converted to js files when loading templates from remote domain

关于作者 🌱

我是来自山东烟台的一名开发者，有敢兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式