文档章节

用grunt构建seajs项目遇到的各种坑

jackzlz
 jackzlz
发布于 2015/11/19 17:54
字数 571
阅读 138
收藏 3

使用grunt构建seajs项目遇到的各种坑


[TOC]

使用grunt-cmd-transport转换为具名模块遇到的问题

1. 最新版本依赖不能完全提取

grunt-cmd-transport 最新版本0.5.1不能完全提取依赖,需要降级到0.4.1。

参考: https://github.com/spmjs/grunt-cmd-transport/issues/103

2. 转换后出新双反斜杠

同样需要降级到0.4.1才行。

参考: https://github.com/spmjs/grunt-cmd-transport/issues/96 http://blog.csdn.net/weizengxun/article/details/45153519

3. 会将深层次的依赖也提取到deps中

网上解决方法,不要配置paths,然后用--force强制执行。

但是如果所有require都用相对路径,也就是都以.开头,就不需要强制执行了。 transport后所有依赖包括间接依赖都会提取到deps中。这样在concat的时候就不会出现模块重复或者漏掉模块的情况。

所以为了避免concat出现问题,require一定要用相对路径,concat设置includerelative

参考: http://blog.csdn.net/kyfxbl/article/details/13998371 https://github.com/spmjs/grunt-cmd-transport/issues/56

4. 模板文件的问题

不管是html还是tpl,不要做成js文件。模板文件就放html代码即可。如果是.js文件,那么生成的debug文件与require会不一致(debug一个在前一个在后)。因为.js文件是以script.jsParser处理的而不是text.html2jsParser或者template.tplParser处理。

var transport = require('grunt-cmd-transport');
var style = transport.style.init(grunt);
var text = transport.text.init(grunt);
var script = transport.script.init(grunt);

transport: {
	options: {
		debug : true,
	    parsers : {
	         '.js' : [script.jsParser],
	         '.css' : [style.css2jsParser],
	         '.html' : [text.html2jsParser]
	     }
    },
}

5. css文件的问题

css文件在transport的时候可以用style.css2jsParser或者style.cssParser。前者转换为.js文件或者还是css文件只是会带上/*! define 模块id */一行这样的注释。

但是如果在require用的是相对路径,那么concat的时候就会去找js文件,而require用的是绝对路径,那么concat的时候就会去找css文件

生成的js文件是seajs.importStyle格式的,所以入口页面还需要引入seajs-style.js

参考: https://github.com/spmjs/grunt-cmd-concat/issues/37


使用grunt-cmd-concat合并模块

  • concat设置includerelative,设置all时合并会出现重复
  • 如果css文件还没有transport则需要设置css2js: require('grunt-cmd-transport').style.css2js,这时候require的时候就不能用相对路径

参考: https://github.com/spmjs/grunt-cmd-concat/issues/37

© 著作权归作者所有

共有 人打赏支持
jackzlz
粉丝 20
博文 22
码字总数 9645
作品 0
深圳
程序员
私信 提问
一步步学会使用SeaJS 2.0

一步步学会使用SeaJS 2.0 1、SeaJS是什么? -------------------------------------------------- 1、SeaJS是什么? https://github.com/seajs/seajs/issues/547),详细说明了前端模块化。 ...

leon_rock
2014/04/05
0
1
管理系统的前端解决方案:Pagurian V1.3发布

Pagurian 一个管理系统的前端解决方案, 致力于让前端设计,开发,测试,发布更简单。 功能简介 Pagurian 适用于Web管理级的项目 基于Sea.js遵循CMD规范,友好的模块定义,使业务开发更简单;...

漆工
2015/05/19
0
0
Gulp和Webpack工具的区别

引用知乎的回答:https://www.zhihu.com/question/37020798 怎么解释呢?因为 Gulp 和 browserify / webpack 不是一回事 Gulp应该和Grunt比较,他们的区别我就不说了,说说用处吧。Gulp / Gr...

easonjim
2016/12/24
0
0
使用SeaJS实现模块化JavaScript开发

前言 SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScrip...

green001
2014/04/01
0
2
使用SeaJS实现模块化JavaScript开发

前言 SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScrip...

i33
2013/03/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

什么时候使用字节流、什么时候使用字符流,二者的区别

在程序中所有的数据都是以流的方式进行传输或保存的,程序需要数据的时候要使用输入流读取数据,而当程序需要将一些数据保存起来的时候,就要使用输出流完成。 InputStream 和OutputStream,...

watermelon11
15分钟前
0
0
Alpakka Kafka,反应式Kafka客户端

Alpakka Kafka 是一个要用于 Java 和 Scala 语言的开源的流感知和反应式集成数据线项目。它建立在 Akka Stream之上,提供了 DSL 来支持反应式和流式编程,内置回压功能。Akka Streams 是 Re...

羊八井
49分钟前
4
0
PHP7源码编译安装详解

$ yum groupinstall "development tools"$ yum install -y gcc gcc-c++ autoconf libjpeg libjpeg-devel libpng libpng-devel freetype \freetype-devel libpng libpng-devel libxml2 ......

问题终结者
53分钟前
5
0
Django学习笔记-从创建虚拟环境到启用服务

1 前置条件 windows系统下,目前已经完成anaconda3或miniconda3的安装,这也意味着已经完成了python3的安装。 2 创建虚拟环境 1、通过Anaconda Prompt,使用conda命令创建虚拟环境(base) e...

davidwbnu
昨天
3
0
python学习04:函数的定义及基本使用

python可以像c++一样,可以直接定义函数。具体格式如下: def(关键字) 函数名(形参01,形参02...): do_something... #如果有返回值,则调用以下语句 return 返回值...

太空堡垒
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部