seajs模块压缩问题与解决方法实例分析

2024-12-03 04:32:28

本文实例讲述了seajs模块压缩问题与解决方法。分享给大家供大家参考，具体如下：

在优化整理项目代码时，想使用seajs来把代码模块化。看了下官方5分钟上手教程，觉得很不错，也没多想就一直开发下去了，也没出什么问题。等一同事说把代码打包个放到设备上去测试一下，发现怎么也跑不起来，郁闷了。

于是单步调试一把，发现模块一直加不进来。看了一下seajs的原码，明白了是怎么回事。

define模块解析依赖有两种途径，一种是从define(id, deps, factory)中的deps来；还有一种是解析define代码，从require中来。来看一下代码：

Module.define = function (id, deps, factory) {
 var argsLen = arguments.length
 // define(factory)
 if (argsLen === 1) {
  factory = id
  id = undefined
 }
 else if (argsLen === 2) {
  factory = deps
  // define(deps, factory)
  if (isArray(id)) {
   deps = id
   id = undefined
  }
  // define(id, factory)
  else {
   deps = undefined
  }
 }
 // Parse dependencies according to the module factory code
 if (!isArray(deps) && isFunction(factory)) {
  deps = parseDependencies(factory.toString())
 }
 ...

如果传了deps那就不进行解析了，如果传那就进行源码解析：

var REQUIRE_RE = /"(?:\\"|[^"])*"|'(?:\\'|[^'])*'|\/\*[\S\s]*?\*\/|\/(?:\\\/|[^\/\r\n])+\/(?=[^\/])|\/\/.*|\.\s*require|(?:^|[^$])\brequire\s*\(\s*(["'])(.+?)\1\s*\)/g
var SLASH_RE = /\\\\/g
function parseDependencies(code) {
 var ret = []
 code.replace(SLASH_RE, "")
   .replace(REQUIRE_RE, function(m, m1, m2) {
    if (m2) {
     ret.push(m2)
    }
   })
 return ret
}

seajs是对源码正则对比，查找require，也就是说require在seajs模块中，是一个关键字。

那么问题就来了，一般我们使用的压缩工具都变量进行压缩，require不是标准的js关键字，所以经过一压缩require就变成了abcdefg....所以自然就无法使用了。

解析办法有两个：

1. seajs官方给出是seajs标准模块构建工具：https://github.com/seajs/seajs/issues/538 使用spm进行构建。

2. 更换压缩工具，使用一个可以自定义关键字，也就是让压缩工具不压缩require变量。

目前主流的三个压缩工具：YUI Compressor，Google Closure Compiler，UglifyJS。就目前所知，貌似前两个都不支持自定义关键字(?)，UglifyJS是支持的。所以可以使用UglifyJS进行压缩

UglifyJS hello.js -o hello.min.js -m -c -r require

通过-r选项来指定变量不压缩。

总的来说使用seajs应该尽量的去使用官方的构建工具。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript扩展技巧总结》、《JavaScript字符与字符串操作技巧总结》、《JavaScript数学运算用法总结》、《JavaScript中json操作技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数据结构与算法技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

深入探寻seajs的模块化与加载方式

由于一直在使用,所以了解了下seajs的源代码.这里是我对下面几个问题的理解: 1.seajs的require(XXX)的方法是怎样实现模块加载的? 2.为什么需要预加载? 3.为什么需要构建工具? 4.构建前后的代码究竟有些什么区别,为什么要这么做? 问题1: seajs的require(XXX)的方法是怎样实现模块加载的? 代码逻辑比较绕,对源代码的理解放在文章的末尾,这里先简单梳理下模块加载的逻辑: 1.从seajs.use方法入口,开始加载use到的模块. 2.use到的模块这时mod缓
基于gulp合并压缩Seajs模块的方式说明

之前的项目一直采用grunt来构建,然后用requirejs做模块化,requirejs官方有提供grunt的插件来做压缩合并.现在的项目切到了gulp,模块化用起了seajs,自然而然地也想到了模块合并压缩的问题. 然后一开始在解决这个问题的时候,并不是很顺利,在npm上并没有那种特别流行的专门用来做seajs合并压缩的gulp插件,虽然在seajs的github上也看了不少的issue,但是大多数都是只能将所有的模块文件合并成一个总的文件,这对于单页面的应用来说肯定没有问题,但是对于多页面的
seajs模块之间依赖的加载以及模块的执行

本文介绍的是seajs模块之间依赖的加载以及模块的执行,下面话不多说直接来看详细的介绍. 入口方法每个程序都有个入口方法,类似于c的main函数,seajs也不例外.系列一的demo在首页使用了seajs.use() ,这便是入口方法.入口方法可以接受2个参数,第一个参数为模块名称,第二个为回调函数.入口方法定义了一个新的模块,这个新定义的模块依赖入参提供的模块.然后设置新模块的回调函数,用以在loaded状态之后调用.该回调函数主要是执行所有依赖模块的工厂函数,最后在执行入口方法提供的回调.
seajs中模块的解析规则详解和模块使用总结

seajs github 模块标识已经说的相对清楚了.但并没有面面俱到,特别是当你需要手写 [模块ID]和[模块依赖]的时候,或者自己写自动化工具来做 transport 的时候(ps:spm貌似适应性不是很强也不易用,毕竟每个项目的目录结构可能相差很大,且不易改变.当然如果他的定位是包管理工具就别指望它来做你的项目的自动化构建工具了),ID的解析规则就需要了解透彻了.注意事项:1. 顶级标识始终相对 base 基础路径解析.2. 绝对路径和根路径始终相对当前页面解析.3. require 和
把jQuery的类、插件封装成seajs的模块的方法

注:本文使用的seajs版本是2.1.1一.把Jquery封装成seajs的模块复制代码代码如下: define(function () { //这里放置jquery代码把你喜欢的jquery版本放进来就好了 return $.noConflict();}); 调用方法:这样引进就可以像以前一样使用jquery 复制代码代码如下: define(function (require, exports, module) { var $ = require('./js/jquery');
seajs中最常用的7个功能、配置示例

本文实例讲述了seajs中最常用的7个功能.配置.分享给大家供大家参考,具体如下: 1. seajs.config seajs.config({ // 设置路径,方便跨项目调用 paths: { 'path1': '....', 'path2': '....' }, // 设置别名,方便调用 alias: { 'class1': '...', 'class2': '...' } }); 2. seajs.use 用来在页面中加载一个或多个模块 // 加载一个模块 seajs.use('./a')
seajs学习之模块的依赖加载及模块API的导出

前言 SeaJS非常强大,SeaJS可以加载任意 JavaScript 模块和css模块样式,SeaJS会保证你在使用一个模块时,已经将所依赖的其他模块载入到脚本运行环境中. 通过参照上文的demo,我们结合源码分析在简单的API调用的背后,到底使用了什么技巧来实现各个模块的依赖加载以及模块API的导出. 模块类和状态类首先定义了一个Module类,对应与一个模块 function Module(uri, deps) { this.uri = uri this.dependencies = d
seajs模块压缩问题与解决方法实例分析

本文实例讲述了seajs模块压缩问题与解决方法.分享给大家供大家参考,具体如下: 在优化整理项目代码时,想使用seajs来把代码模块化.看了下官方5分钟上手教程,觉得很不错,也没多想就一直开发下去了,也没出什么问题.等一同事说把代码打包个放到设备上去测试一下,发现怎么也跑不起来,郁闷了. 于是单步调试一把,发现模块一直加不进来.看了一下seajs的原码,明白了是怎么回事. define模块解析依赖有两种途径,一种是从define(id, deps, factory)中的deps来:还有一种是解析
jQueryMobile之窗体长内容的缺陷与解决方法实例分析

本文实例讲述了jQueryMobile窗体长内容的缺陷与解决方法.分享给大家供大家参考,具体如下: 前面的一篇文章<jQueryMobile之Helloworld与页面切换的方法>没有考虑到窗体中放置长内容的状况一旦窗体中出现长内容,使用笔者那种固定header与footer的全屏布局是存在缺陷的, 如图所示,长内容最后的内容,直到滚动条拉到最底部也无法穷尽, 而且很有可能的是,虽然现在这个地方的内容是显示为半透明,但往往这个位置是一些提交按钮什么的, 用户根本就没法点, 因此,需要进行改进
php中Y2K38的漏洞解决方法实例分析

本文实例分析了php中Y2K38漏洞的解决方法.分享给大家供大家参考.具体分析如下: Y2K38,又称 Unix Millennium Bug, 此漏洞将会影响到所有 32 位系统下用 UNIX 时间戳整数来记录时间的 PHP,及其它编程语言. 一个整型的变量所能保存的最大时间为 2038 年 1 月 19 日 03:14:07.超过这个时间后,整型数值将会溢出. 从 1970 年 01 月 01 日开始,到世界标准时 2038 年 01 月 19 日星期二凌晨 03:14:07 超过 2^31
mysql滑动订单问题原理与解决方法实例分析

本文实例讲述了mysql滑动订单问题原理与解决方法.分享给大家供大家参考,具体如下: 先根据以下代码来创建表MonthlyOrders并导入一定的数据 CREATE TABLE MonthlyOrders( ordermonth DATE, ordernum INT UNSIGNED, PRIMARY KEY (ordermonth) ); INSERT INTO MonthlyOrders SELECT '2010-02-01',23; INSERT INTO MonthlyOrders SE
Python安装模块的常见问题及解决方法

1.error: command 'x86_64-linux-gnu-gcc' failed with exit status 解决办法: # Python 3 $ sudo apt-get install python3 python-dev python3-dev \ build-essential libssl-dev libffi-dev \ libxml2-dev libxslt1-dev zlib1g-dev \ python-pip # Python 2 $ sudo apt-ge
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法

0 说明系统: windows 10 python 3.6.7 1 情况在windows系统下使用pip install PySid2安装PySide2模块的时候出现下面的错误: 分析情况: (1)可能安装的模块并不是完整的模块,存在丢失的情况,因此卸载pyside2之后再重新安装,但是并没有什么作用,仍然还是报这个错误 (2)通过上网查询一些资料,发现使用pip安装的模块都是安装最新的模块,可能存在python版本和PySide2版本不相符的情况发生,因此在使用pip安装模块的时候,给模块
MySQL 的模块不能安装的解决方法

我们最常用的 DBD::mysql 模块,我发现是难住很多人的地方.因为安装老是失败,下面我介绍一下解决方法,比如我使用 cpanm 安装,有时就出 /home/nue2501j/work/DBD-mysql-4.010/blib/arch/auto/DBD/mysql/mysql.so: undefined symbol: DBIc_TRACE_LEVEL at /usr/lib/perl5/5.8.5/i386-linux-thread-multi/DynaLoader.pm line 23
Centos安装python3与scapy模块的问题及解决方法

目录一.CentOS安装Python3 二.安装scapy模块一.CentOS安装Python3 centos7自带版本是python2.7 如果要用的3.0以上的版本需要手动安装,下载地址:https://www.python.org/ftp/python/ 1.先查看系统python的位置在哪儿 whereis python python2.7默认安装是在 /usr/bin目录中,切换到/usr/bin/ cd /usr/bin/ ll python* 从下面的图中我们可以看到,pyth
MySQL死锁问题分析及解决方法实例详解

MySQL死锁问题是很多程序员在项目开发中常遇到的问题,现就MySQL死锁及解决方法详解如下: 1.MySQL常用存储引擎的锁机制 MyISAM和MEMORY采用表级锁(table-level locking) BDB采用页面锁(page-level locking)或表级锁,默认为页面锁 InnoDB支持行级锁(row-level locking)和表级锁,默认为行级锁 2.各种锁特点表级锁:开销小,加锁快;不会出现死锁;锁定粒度大,发生锁冲突的概率最高,并发度最低行级锁:开销大,加锁慢;
SpringBoot跨域问题的解决方法实例

谈到跨域问题,首先我们要认识一下浏览器的同源策略百度百科对同源策略的解释当一个浏览器的两个tab页中分别打开来百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的, 即检查是否同源,只有和百度同源的脚本才会被执行. [1] 如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问. 同源策略是浏览器的行为,是为了保护本地数据不被JavaScript代码获取回来的数据污染,因此拦截的是客户端发出的请求回来的数据接收,即请求发送了,服务器响应

seajs模块压缩问题与解决方法实例分析

相关推荐

随机推荐