前端工程化入门

日期:2014-4-25 13:51 | 标签: | 阅读:1967

此篇文章将不定期更新,积跬步以致千里。
@2016-5-21
昨晚看了颜海镜的博文,觉得fis3对es6支持甚好,刚好最近又有学es6的冲动,何不直接使用fis3开发一个小项目呢?刚好最近有兴趣做一个倒计时项目,就拿这个作为脚手架了啦。
@2016-5-24
看了ant-design,其自带工具是ant-tool,非常有兴趣试下,特别想创建基于ant-design的项目。

bower&gulp

你可以从0开始搭建你自己的架构,而不要受限于市面上的集成解决方案,这时候,bower&gulp之流可以帮你解决问题,关于到底选用那个构建工具,我想说基本上大同小异,明白其中的道理即可,大可不必惊慌。
安装使用:http://blog.csdn.net/Sensation_cyq/article/details/50999733
gulp教程:http://www.w3ctech.com/topic/134
gulp中文站:http://www.gulpjs.com.cn/docs/getting-started/

fis3起步

市面上有如此多的构建工具,如GruntJS,为啥百度还需要构建呢,静态资源版本更新与缓存一文中指出,FIS具有递归处理能力。此外百度fis3的插件市场还算繁荣。

  1. 安装
    按照颜海镜的教程进行安装,看了下最新提交日期,近期项目更新频繁,应该不会出现什么问题吧,当然,问题还是出现了。
  2. 排错

    1. npm install -g fis-parser-sass,这个死活安装不上,有人说安装fis3-parser-sass该没问题了,可以在我这里一样报错,还好找到了翻到了这个issue,原来是编译问题,大家一致建议使用fis-parser-node-sass,果然,安装没有出现问题,按照文档,在fis-config中修改了配置,将sass改为node-sass.

      Test failed! child_process: customFds option is deprecated, use stdio instead....

    2. 兴致勃勃的运行fis release,再次报错,网络的力量无比强大,有人反馈,你得先安装node-sass啊,好吧,做之。报错依然,最后也不知道哪里来的脑洞,把fis-parser-node-sass也装在了项目文件夹.

      [ERROR] load plugin [fis-parser-node-sass] config error : Error: ENOENT: no such file or directory, scandir '/usr/local/lib/node_modules/fis-parser-node-sass/node_modules/node-sass/vendor'

    3. 虽然报错,至少错误变了,原来还得node-sass,更新得比较快,对之前版本发生了不兼容,需要卸载最新版本,重新安装旧版本(3.4.2),感谢该帖,让我试试先,哈哈,居然成功了,这虽然是工程化的一小步,但是是我前端生涯的一大步啊!

      ERROR] parser.node-sass: Functions may not be defined within control directives or other mixins. [/components/compass-mixins/compass/functions/_lists.scss 81:3]

scrat

基于FIS3的Web APP工程化方案
GitHub链接:https://github.com/scrat-team/scrat
官网:http://scrat.io/
构建日记:https://github.com/fouber/blog/issues/2

安装 :

# 使用淘宝镜像才快
npm install -g scrat --registry=https://registry.npm.taobao.org
# 发布目录(调试)
C:/Users/lenovo/AppData/Local/.scrat-tmp/www

macaca

支付宝开源自动测试解决方案
链接:https://github.com/alibaba/macaca

ant起步

  1. 确保npm为3.0+,主要是为了支持es6。本人npm是2.x必须升级,因为nodejs附带了npm,无法全局升级npm,需要在nodejs的安装目录下局部升级npm:
    cd Program Files\nodejs
    npm update npm
    
    升级方式2
    // 首选查看最新版本
    npm version
    // 直接覆盖安装
    npm -g install npm@3.9.3
    
  2. 阿里自带镜像,可以解决下载包缓慢的问题,使用这个快得飞起!
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    
  3. 接下来只需按照教程走就行了,ant-tool教程,ant-design教程

  4. 注意事项:ant-tool依赖node>=4.3.2

  5. 报错
    • Cannot find module 'async-each'、'anymatch',预估是版本问题,将环境改成这样即成功:
      • node 4.4.2
      • npm 3.9.3
      • antd 1.1.2

参考:

京东前端工程化:
https://github.com/o2team/athena
京东前端工程化详细介绍:http://web.jobbole.com/87290/
百度前端工程化:
源码:https://github.com/fex-team/fis3
教程:http://fis.baidu.com/fis3/docs/beginning/release.html#例子
文档平台搭建(京东):
http://aotu.io/notes/2016/03/16/jcloud-sum/
余果13年文章
http://yuguo.us/weblog/frontend-industrialize/

版权声明: 署名-非商业性使用-禁止演绎 4.0 国际(CC BY-NC-ND 4.0
Copyright ©2013-2017 | 粤ICP备14081691号 | yipeng手工打造 | 联系方式