讨论：spm-build 基于 webpack 实现

[sorrycc]

原因

• 拥抱社区，而且 webpack 也确实比较强大
• spm 现有的一些构建问题在 webpack 已解决，比如性能、循环引用、i18n、执行顺序等
• 还有一些其他不错的特性可以直接使用，比如 code split (common 代码提取)、按需加载等
• 人不够，这样可以从构建这部分解放出来，更多时间优化 spm 的其他点

可行性

尝试了下可行性，没有问题，webpack 可以通过插件的方式覆盖模块的路径解析。

方案

• standalone 通过 webpack 实现，封装 spm 的模块解析，以及现有 spm 的参数和功能
• spm-build 默认只包含 standalone 的方案
• cmd (seajs) 的方案通过单独的包 spm-sea 实现

[popomore]

可以尝试，先做个原型出来，跑跑现有的用例

[yiminghe]

嗯，对外好用就行，两个源支持就是插件的事le

[afc163]

保持现有构建方式稳定的情况下底层可以试试，毕竟构建的需求太繁杂。

[popomore]

开个 spm-webpack 尝试，如果稳定了就换成这个了，cmd 构建还是用原来的。

[sorrycc]

@popomore OK。

[sorrycc]

@popomore 想了想，cmd 构建用原来的不合适。因为 spm 默认用 standalone，然后安装一个额外的包做 cmd 构建。那个包名字叫 spm-build 会不好理解，叫 spm-sea 或 spm-cmd 之类的好一点。

[popomore]

最终都是 spm build，只是内部调用问题。

现在不用考虑那么多，先跑起来

[afc163]

@sorrycc 的意思应该是把 sea 构建的部分彻底从 build 中拆出来，另外通过 spm-sea 给 spm-build 增加参数或修改默认参数。

[popomore]

这个之后再讨论吧，感觉还是复杂了点。

[sorrycc]

cmd 和 standalone 的构建参数大部分不一样，放在一起会有不少冗余，看起来也比较复杂。

[popomore]

两个库分开开发，都是 spm 依赖的

[sorrycc]

记录下遇到的一些问题：

1. webpack 入口文件 (entry) 只能是 js，如果是 css 也会处理成 js chunk。所以以下情况不能通过 webpack 支持：
   1. output 里包含 css 文件
   2. output 里包含 html 或 图片文件
2. moment 会引入所有语言包，moment#1435，webpack#198，需配 ignore
3. node-libs-browser，如果依赖了一些 node 的内部模块，会自动引用这个库里的相关文件。问题：
   1. 需进一步了解引入规则
   2. 模块路径解析规则不同，需特殊处理

[sorrycc]

问题记录：

css 文件里 import 另一个 css module 时，webpack 中需要加前缀 ~ 做区分，和 spm 不一致。比如：

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

/* spm */
@import 'normalize.css';

参考：webpack-contrib/css-loader#12

[sorrycc]

已在 spm-webpack 里实现大部分功能，比如以下的：

standalone
umd
less
jsx
js require css
extract css
extract image
global (external)
no package.json
install dependencies before build
autoprefixer
es6
handlebars
debug file
idleading (append output file with pkg.name and pkg.version)
load on demand (dynamic load)

明天再找典型的 spm 的包和已有项目来跑跑看。

[yiminghe]

👍

[sorrycc]

问题记录：

所有文件不能在 root context 写 return，报错 Module build failed: Error: Parse Error: Line 491: Illegal return statement。测试了一些现有项目和模块，这个问题比较多。
webpack/webpack#67

[yiminghe]

肯定不能啊。。。 return 只能在函数中

[popomore]

为啥会写 return？

[sorrycc]

不标准的写法，写习惯了吧。

if (condition) {
  return;
}

// do something else

[afc163]

AMD 和 CMD 带来的习惯吧

[sorrycc]

已完成，调试工具 spm-server 也做了相应支持。下面是支持的特性列表：

特性

• 按需加载
• global
• 提取公用文件
• 提取公用库
• js require css
• 提取 css
• 提取图片文件
• 复制 html 和图片文件
• 自定义 prebuild, build, postbuild 脚本

语言扩展

• less
• jsx
• coffee
• es6 -- 通过 babel 转换实现
• handlebars
• tpl 和 html 模板
• anima-template
• autoprefixer

输出格式

• umd
• debug file

输出路径

• hash
• name 和 version

体验

• package.json 非必选
• 构建前安装依赖
• 构建前清空目标文件夹
• 不输出日志(静默模式)

即将支持

• sprites
• worker

[yiminghe]

能设置直接从 node_modules 读取么

[sorrycc]

不能。这不是技术问题啊，等 spm 如果换成 npm 的源自然就读 node_modules 了。

[wanderBee]

+1. 期待.
cmd 的解决方案也作为解析package.json 的一部分来处理咯，打包只用 spm build ，单一调用简单一些吧