EDUSOHO踩坑笔记之十八：前端开发之编译打包
EDUSOHO踩坑笔记之十八：前端开发之编译打包
- 编译打包
- 实时编译
- Source map
- 编译实体文件
- 常见错误
- 模块不存在
- app crashed
- 内存泄漏
- 端口被占用
- 系统默认最大文件打开数过少
- 实时编译
编译打包
EduSoho 使用webpack编译打包前端模块，配置文件为 webpack.config.js：
module.exports = {
output: {
path: 'web/static-dist/', // 用于生产环境下的输出目录
publicPath: '/static-dist/', // 用于开发环境下的输出目录
},
libs: { // 独立打包的类库，共用的依赖，在 twig 页面上调用({% do script(['libs/base.js']) %})
'vendor': ['libs/base.js'], // 可以是一个 JavaScript 文件,
'jquery-validation': ['libs/js/jquery-validation.js'],
'echo-js': ['echo-js'], // 也可以是一个 NPM 依赖包
// ...
},
noParseDeps: [ // 设置不需要解析的依赖，以加快编译速度
'jquery/dist/jquery.js',
'bootstrap/dist/js/bootstrap.js',
// ...
},
onlyCopys: [ //对于自成一体的前端模块，纯拷贝该组件下的文件到 `web/static-dist/libs` 目录下
{
name: 'es-ckeditor', // 模块的编译打包输出名
ignore: [ // 需忽略复制的文件及目录
'**/samples/**',
'**/lang/!(zh-cn.js)',
'**/kityformula/libs/**',
]
},
// ...
]
};实时编译
实体编译，用于开发模式下，在对前端模块代码修改后，能实时编译生效。
启动实时编译服务：
npm run dev启动服务后，默认会在本地启动3030端口的前端模块实时编译服务。
可用参数：
port:PORT_NUMBER：指定服务端口。例如：
npm run dev port:3000…
sourcemap:true：生成 Source map；verbose:true： 显示编译详情，开启此选项后，控制台会输出每个文件被编译的详情；analyzer:true：开启依赖分析工具，打包后文件过大，需要查看都包含了哪些依赖时使用。watch:RESOURCE：指定监听实时编译的资源，以加快实时编译的速度。支持指定Bundle、插件、主题的前端资源，例如：
npm run dev watch:CustomBundle # 只监听定制开发的前端资源npm run dev watch:ExamplePlugin # 只监听 Example 插件的前端资源npm run dev watch:example # 只监听 Example 主题的前端资源npm run dev watch:CustomBundle,ExamplePlugin # 也可同时监听多个的前端资源
Source map
在编译打包过程中会对前端模块源码进行压缩、合并、语言转换（CoffeeScript 转换成 JavaScript）等一系列的转换，这使得实际运行的代码不同于开发代码，除错（debug）变得困难重重。开始 Source map 后，会生成一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。
编译实体文体：
npm run compile可用参数：
sourcemap:true：生成 Source map；module:RESOURCE: 指定只编译打包的前端资源，以加快编译打包速度。支持指定Bundle、插件、主题的前端资源，例如：
npm run compile module:CustomBundle # 只编译打包定制开发的前端资源
npm run compile module:ExamplePlugin # 只编译打包 Example 插件的前端资源
npm run compile module:example # 只编译打包 Example 主题的前端资源
npm run compile module:CustomBundle,ExamplePlugin # 也可同时编译打包多个前端资源常见错误
模块不存在
错误提示：
ERROR in multi ....
Module not found: Error: Cannot resolve 'file' or 'directory'解决办法：
rm -rf node_modules
yarnapp crashed
错误提示：
[nodemon] app crashed - waiting for file changes before starting...解决办法：
在控制台（终端）里输入rs,然后回车。
内存泄漏
错误提示：
<--- Last few GCs --->
14 ms: Mark-sweep 2.2 (37.1) -> 2.1 (38.1) MB, 2.8 / 0 ms [allocation failure] [GC in old space requested].
15 ms: Mark-sweep 2.1 (38.1) -> 2.1 (39.1) MB, 1.2 / 0 ms [allocation failure] [GC in old space requested].
16 ms: Mark-sweep 2.1 (39.1) -> 2.1 (39.1) MB, 0.9 / 0 ms [last resort gc].
17 ms: Mark-sweep 2.1 (39.1) -> 2.1 (39.1) MB, 1.0 / 0 ms [last resort gc].
...
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory解决办法：
重新执行命令：npm run dev或npm run compile。
端口被占用
events.js:154
throw er; // Unhandled 'error' eventError: listen EADDRINUSE 0.0.0.0:3030
at Object.exports._errnoException (util.js:893:11)
at exports._exceptionWithHostPort (util.js:916:20)
at Server.__dirname.Server.Server._listen2 (net.js:1246:14)
....解决方法：该错误表明你已经开启了一个端口号为3030的服务，需要先把那个服务关掉。
lsof -i:3030
kill -9 xxxxx(PID编号)系统默认最大文件打开数过少
报错信息：
watch ... ENOSPC解决方法： 在控制台输入
复制echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p