SPM 3.6 FAQ 整理

[soda-x]

SPM 3.6 FAQ 整理

[soda-x]

error: port 8000 is in use

说明：
出现该提示则表明spm server 默认使用的端号口 8000被占用.

解决：

• 方案一：使用 spm server --port 未被占用端号口，ex. 8999
• 方案二：查看占用8000端口的相关进程. 具体是在bash中 使用 如下命令 lsof -i:8000<1> ，此时我们应该就可以看到被占用的相关情况，并kill PID. PID具体的值可以步骤<1>中查看到.

[soda-x]

error: Module not found: Error: a dependency to an entry point is not allowed

说明：
从 spm 3.4.x -> spm 3.6 对于require有了新的要求，即：
不能 require output 中指定的文件。
严格意义上讲是 webpack不允许这么做.

解决：

• 需要被依赖的文件就不要放在 output 里
• 既需要被依赖又需要被输出的文件，就单独再起一个文件，只 require 他

相关issue：

#1278

[soda-x]

error: Module build failed: Error: Didn't get a result from child compiler

说明：
css 文件里 import 另一个 css module 时，webpack 中需要加前缀~做区分，和 spm 不一致。
由于[email protected]基于webpack

/* webpack */
@import '~normalize.css';

/* spm 3.6以往 */
@import 'normalize.css';

解决：

• 和webpack保持一致

ex.
某index.less：

@import (css) '~normalize.css';
@import  (css) '../css/common.css';
@import (css) '~alice-button';

注意：less引入的模块需要声明类型

[soda-x]

error: Module not found: Error: Cannot resolve 'file' or 'directory' ./tpl.handlebars in $CWD/src

说明：
由于[email protected]基于webpack，而webpack内置了handlebars的loader. 所以针对.handlebars结尾的模板文件并不需要单独安装 即不需要 install handlebars. 如果后缀名不是以.handlebars结尾的，那么就需要install handlebars.

解决：

• 模板文件以.handlebars结尾

Precompile

<!-- defalut.handlebars -->
<div>
  <span>{{name}}</span>
  <span>{{content}}</span>
</div>

Then require it in js file.

var source = require('./defalut.handlebars');
var result = source({
  name: 'alex',
  content: 'content'
});
console.log(result);

• 模板文件不以.handlebars结尾

Realtime Compile

<!-- defalut.tpl -->
<div>
  <span>{{name}}</span>
  <span>{{content}}</span>
</div>

Then require it in js file.

var Handlebars =  require('handlebars');
var source = require('./tpl/tpl.tpl');

var template = Handlebars.default.compile(source);
var result = template({
  name: 'alex',
  content: 'content'
});

console.log(result);

[soda-x]

该问题已经修复

 spm build 之后的样式文件却没有被压缩 ?

说明：

该问题已经解决，请升级到[email protected]

[soda-x]

 含UI的组件要如何开发？资源文件应该怎么组织？文档怎么写？项目如何引用？

说明：

稍后补充

[lynzz]

handlebars 用 partials 的问题

form.js 有如下调用：

var source = require('./form.handlebars');
var result = source({
  name: 'alex',
  content: 'content'
}, {
  helpers:{},
  partials: {
    groups: require('./form-groups.handlebars)
  }
});

form.handlebars 含有如下代码

{{> groups}}

spm build 后会报如下错误

Module build failed: Error: Partial 'groups' not found

[sorrycc]

@lynzz 参考这个，https://github.com/spmjs/spm/issues/1269#issuecomment-99016169，用 spmhandlebars-loader 。

[lynzz]

@sorrycc 可以了，谢谢

[sorrycc]

error: Module not found: Error: a dependency to an entry point is not allowed

[email protected] 后，这个问题不会再出现了。

[jaredleechn]

原有代码通过require.async([],function(){})来动态加载文件，在升级spm3.6中需要如何更改？模块该如何组织？

1. 被加载的模块在本地：可以通过load-on-demand来完成异步加载，webpack检测到代码中含有该用法时，会将参数内涉及模块都打包到一起成根目录下的一个文件（通常为0.js）

   • 使用require('./moduleA.js')这种常量方式，那么被require的每个js会被打包在一起。
   • 使用require([src.name])这种变量的方式，那么本地所有可能用到的js全部会被打包在一起

2. 被加载的模块在线上：使用scriptjs来加载文件

   var $script = require('scriptjs');
   $script(url, function(){})
   

   scriptjs做的事情只是加载执行，并不能在回调函数的参数列表中获取模块内容，因此需要处理这些线上的模块，暴露相应的接口（如暴露到全局）

3. 本质上其实是一个jsonp的需求：请使用$.ajax()的jsonp请求数据

[jaredleechn]

原有的jQuery插件模块，在升级spm3.6后，业务代码中使用var $ = require('jquery')找不到jquery插件的问题？

原因是业务代码中使用的jquery是spm_modules中的模块，而插件绑定到的jQuery是全局环境中的jQuery，因此插件并没有绑定到业务代码中的jquery上。

方案如需要保留jquery插绑定在全局的写法，可以在package.json中配置global属性

{
    "spm": {
        "build": {
            "global": {
                "jquery": "jQuery"
            }
        }
    }
}

此时webpack会讲require的所有jquery替换成全局的jQuery，并且不会打包该模块到最终代码中，因此需要用户额外引入该模块代码