Question

我使用 jade 生成一个静态网站 grunt ，我想从我的玉模板中调用moment.js。

我不知道我应该如何装载片刻库。

require.config({
    paths: {
        "moment": "path/to/moment",
    }
});
define(["moment"], function (moment) {
    moment().format();
});

但我不确定异步加载如何与jade一起使用。

所以我编写了这段无法编译的代码：

doctype html
html(lang="en")
  head
    script(src='scripts/require.js')
    script. 
      require.config({
            paths: {
                "moment": "scripts/moment.js",
            }
      });
  body
    p #{moment(Date.now()).format('MM/DD/YYYY')}

出现以下错误：

>> TypeError: src/test.jade:7
>>     5|     script. 
>>     6|         require.config({
>>   > 7|             paths: {
>>     8|                 "moment": "scripts/moment.js",
>>     9|             }
>>     10|         });
>> 
>> undefined is not a function

我应该如何加载我的时刻对象，以便它可以在Jade（模板和混合）中使用？

请注意，如果用p＃{Date.now（）}替换p＃{moment（Date.now（））。format（＆＃39; MM / DD / YYYY＆＃39;）}，它就会编译。

Answer 1

诀窍是当grunt调用jade编译器生成最终的html文件时使你的javascript可用

注意 javascript的输出将被静态复制到html文件中。 javascript库只是一个编译时（devDependency）依赖项。

简单测试文件

doctype html
html(lang="en")
  head
  body
    p #{moment(Date.now()).format('MM/DD/YYYY')}
    p Hello guys !!

Grunt文件

module.exports = function(grunt){
    ... 
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        ...
        moment = require ('moment') ;
        grunt.registerTask( ...
        ...

包裹文件

{
  "name": "site",
   ...
  "devDependencies": {
    ...
    "moment": "*"
  },
  "dependencies": {
    ...
  }
}

感谢@ForbesLindesay的帮助

如何在Jade模板中包含客户端脚本？

1 个答案: