写在前面：

为了更好的开发和维护公共组件；

为了将目前的项目打包的主要阵地慢慢从fis3转移到webpack的怀抱；

为了更规范的开发流程；

这就是NPM私有仓库的初衷。

使用指南

为了更好的兼容和管理旧的项目，强烈建议先安装 NVM  （node版本控制器），因为一些旧的项目在没有更好的解决方案之前还需要使用 FIS进行构建和发布 ，例如：fis3+smarty的项目，但是fis3已经停止更新，一些插件已经不兼容新版本的node！！！

安装nvm之前，如果已经安装nodejs，建议先卸载； 安装步骤：（windows系统）

一，安装nvm和nodejs

1，下载安装包（下载地址： https://github.com/coreybutler/nvm-windows/releases），安装；

2，打开命令行：

列出全部可以安装的版本号

nvm ls-remote

安装指定版本

nvm install v6.9.5  #命令后加版本号就可以进行安装，字母v可以不写

建议安装6.9.5版本兼容fis3的项目（本人亲测）

再安装 8.10.0 以上的版本，处理webpack打包，以及私有仓库的管理

用切换指定版本，切换效果是全局的

nvm use v8.11.1

至此nvm和node已经安装完成

二，安装nrm（npm镜像源管理工具）

使用nvm切换node到高版本

nvm use v8.11.1

安装

npm install -g nrm

添加私有仓库地址

nrm add flamingo http://dqdnpm01.gz.xxx.com:4873/

切换私有仓库

nrm use flamingo

查看所有仓库地址(星标为当前仓库源)

nrm ls
npm ---- https://registry.npmjs.org/
cnpm --- http://r.cnpmjs.org/
taobao - https://registry.npm.taobao.org/
nj ----- https://registry.nodejitsu.com/
rednpm - http://registry.mirror.cqupt.edu.cn/
npmMirror https://skimdb.npmjs.com/registry/
edunpm - http://registry.enpmjs.org/
*flamingo http://dqdnpm01.gz.xxx.com:4873/

至此，已经可以在本地使用npm install  所需要的公共组件了，注意：公共组件包名规则     @flamingo/包名   ，如果私有仓库找不到该包，会到npm官方镜像查找，包的上传请移步到    发布指南！

发布指南

发布首先需要账号，已经禁用   npm adduser   的方式添加用户，需要账号请联系xx！

发布方式和npm包的发布一样，

首先，

npm login

然后，进入到要发布的包的目录之后

npm publish

发布命令很简单，这里重点讲一下发布的规范。

注意事项

1，发布的公共组件最好不要直接使用ES6及以上的语法，因为一般不会使用babel对node_modules的模块进行编译。或者可以使用babel编译之后在发布，并注明依赖；

2，模块化方案推荐使用commonjs规范；

3，package name 一定要使用 @flamingo/包名   的方式( @flamingo 相当于是一个命名空间，暂时使用这个) ,  所以引入的时候有也要用   require(“@flamingo/包名”)

发布规范

需要发布的包必须包含， js脚本，package.json，README.md

js脚本不用多少，就是主要功能代码，可以有多个文件，需要指定入口，入口配置在 package.json 文件中；

package.json

项目开始前的思考：

• 采用动静结合的方式，缓解服务器压力（然而也没什么压力）
• 组件化、模块化，采用CMD规范（fis3-smarty不是那么兼容amd，好吧我太懒没有深入研究这块，最后用了百度提供的mod.js，也挺好用）
• 数据和结构分离（smarty、art-template）

项目依赖的工具与技术：

• fis3
• fis3-smarty
• mod.js
• art-template
• 插件：es6-babel、node-sass、autoprefixer 等。

项目的目录结构：

components目录：项目所用到的js组件（js库、功能模块等）

page目录：页面模板目录

plugin目录：本地模拟数据预览用到的模板解析插件（可忽略）

static目录：存放图片，公共样式，公共脚本

test目录：本地模拟数据

widget目录：模板组件目录

fis-conf.js主要配置
fis.hook('commonjs',{
baseUrl: 'components/',
extList: ['.js', '.es']
});
fis.match("components/**", {
isMod: true,
useSameNameRequire: true
});
fis.match("widget/**", {
isMod: false,
useSameNameRequire: true
});
/ 启用 es6-babel 插件，解析 .es 后缀为 .js
fis.match('**.es', {
  rExt: '.js',
  parser: fis.plugin('es6-babel')
});
// 启用node-sass 插件 ， 解析 .scss 后缀为 .css
fis.match('*.scss', {
  rExt: '.css',
  preprocessor : fis.plugin("autoprefixer",{
    "browsers": ["Android >= 2.1", "iOS >= 4", "ie >= 8", "firefox >= 15"],
    "cascade": true
  }),
  parser: fis.plugin('node-sass', {
    // include_paths: [
    //   './src/scss',
    //   './components/compass-mixins'
    // ]
  })
});
// widget目录下存放的html文件是arttemplate模板文件，不需要发布
fis.match('widget/{*,**/*}.html', {
    release: false
});

需要动态加载的数据的组件使用前端模板的优点是：

1.提高可维护性 2.代码结构更加清晰 3.数据更容易控制 4.降低耦合性

（此处为什么要用html作为模板后缀名，主要是利用fis对html 文件编译处理会重新定位资源路径，目前尝试了一些配置去改变模板文件的后缀，但是还没有找到可行的方法； 模板文件会在编译阶段直接引入到js文件，依赖fis在js文件的内容嵌入功能：__inline(‘xxx.html’)）

存在的问题：

最主要的问题是缓存，由于页面都是需要后端生成，静态的页面会有缓存

前言：公司陈旧的图片字符验证码太容易被刷，so~~产品发话：换掉，统统~统统都换掉。。。

经过和后端人员的沟通决定，使用恶心的图片点选验证，又不想用第三方，so~~决定自己做一个简单的。。。

总体思路：首先拉取图片，成功load之后，获取需要点击验证的三个文字，记录三次点击的坐标，再根据图片的真实宽高换算成真实坐标，传给后端 ~done！so easy！

继续阅读“一个图片点选验证的简单实践”