Git Product home page Git Product logo

seajs-wrap's Introduction

A Module Loader for the Web

Sea.js is a module loader for the web. It is designed to change the way that you organize JavaScript. With Sea.js, it is pleasure to build scalable web applications.

The official site: https://seajs.github.io/seajs/

Build Status

Questions?

If you have any questions, please feel free to ask through New Issue.

Reporting an Issue

Make sure the problem you're addressing is reproducible. Use http://jsbin.com/ or http://jsfiddle.net/ to provide a test page. Indicate what browsers the issue can be reproduced in. What version of Sea.js is the issue reproducible in. Is it reproducible after updating to the latest version?

License

Sea.js is available under the terms of the MIT License.

seajs-wrap's People

Contributors

afc163 avatar army8735 avatar bacra avatar crossjs avatar hotoo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

seajs-wrap's Issues

seajs-wrap 中文文档

CommonJS 包装插件

在新的 spm3 中,编码书写规范从 CMD 规范全面转向了 CommonJS 。这样可能会碰到一个问题,在线下调试环境中可以直接运行的 CMD 模块,现在由于去掉了 define 块包装,无法在 Sea.js 环境中直接跑起来。

我们推荐使用 spm doc watch 并打开 http://127.0.0.1:8000 进行调试,这个工具会在本地启动一个静态服务,监听加载的静态文件并动态包装 define 块。

但是这个工具并不能满足所有情况,所以就有了这个插件,可以帮助你对 CommonJS 模块进行调试。首先需要引入 Sea.js(2.1及以上版本) 和插件:

<script src="path/to/sea.js"></script>
<script src="path/to/seajs-wrap.js"></script>

加载 CommonJS 模块

seajs.userequire 来调用 CommonJS 模块。

seajs.use('common', function(Common) {
  // Common 可用了
});
// common.js 是一个 CommonJS 模块,无须手写 define 块
var a = 1;
var b = 2;

module.exports = function () {
  return a + b;
};

seajs-wrap 的实现原理是通过 XHR 对象去加载模块文件,拿到文件内容后动态包装上 define(function(require, exports, module) {}); 块后,再进行执行。拿到文件内容后会进行简单的判断,如果模块已经是 CMD 模块,则不进行包装。

对于不希望进行包装的文件,可以使用 ?nowrap 来指定此模块无须进行包装。

// no-need-to-wrap.js
// 执行前不会进行包装
seajs.use('no-need-to-wrap.js?nowrap', function() {
});

注意事项

  1. seajs-wrap 会通过 XHR 来加载模块(这样才能任意修改源码后执行),所以受到同源策略限制,请务必在线下调试环境来使用这个插件。
  2. seajs-wrap 只针对 JS 模块进行包装。

动态包裹alale-dialog模块时出问题了

alale-dialog/1.5.1/src/dialog

// Dialog
// ---
// Dialog 是通用对话框组件,提供显隐关闭、遮罩层、内嵌iframe、内容区域自定义功能。
// 是所有对话框类型组件的基类。
var Dialog = Overlay.extend({

  Implements: Templatable,

  attrs: {
    // 模板
    template: require('./dialog.handlebars#'),//为了让浏览器请求不带`.js`,手动在这里加了#号
...

这里dialog.handlebars是一个模板文件,用firebug调试发现是在下面这个函数时出的错:
seajs-wrap/1.0.2/dist/seajs-wrap-debug.js

function globalEval(content, uri) {
  if (content && /\S/.test(content)) {
    (global.execScript || function(content) {
      try {
        (global.eval || eval).call(global, content) //这里content就是上面那个html模板,所以会报错
      } catch(ex) {
        ex.fileName = uri;
        console.error(ex);
      }
    })(content)
  }
}

然后我不知道怎么搞

在ie8里面性能低下

用来加载大插件ie8直接卡死。
是否是execScript eval 运行的原因?
我用的seajs版本是3.0
我用来加载 百度的ue 或者 handlebars
貌似有是seajs 3.0 原因 我在研究会! - -

文件路径解析问题

require的文件路径里如果有点号但并不是.js后缀的时候(比如require('./sockjs-0.3'))将不会进行wrap操作。

看了下源码,是正则解析id时的问题,这个时候解析出来的m[1] = '.3',通不过那个if条件。

对于带点号的路径,带上.js后缀可以解决这个问题。

希望能解决这个bug@@

能否过滤某些path

开发环境下,我自己的包我希望走seajs-wrap,其他已经发布的包,能否直接从线上去数据。

比如本地一个文件,使用了线上的模块,

var Overlay = require('arale-overlay');

这个时候,本地的我会有一个通用的paths配置

  seajs.config({
    paths: {
      local: 'http://127.0.0.1:1337/locals/'
    }
  });

我希望只有local下面的包,走wrap。因为线上的服务器,我不可能运行跨域方式get到,本地的server我可以加Access-Control-Allow-Origin。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.