Jsplumb二次开发配置

源码下载

github上下载源码，我这里用的是2.x的版本，选择的是dev/2.x的分支

修改package配置

用于开发完成重新发布npm，以及本地调试使用

"name": "shk-jsplumb",
"version": "1.0.0",

组件调试配置yalc

全局安装

npm i yalc -g

发布包

组件根目录下执行发布包命令，用于推送包的内容，修改组件后需要重新推送；此命令会将您的包发布到本地商店，并将所有更改传播到通过yalc add 的项目中

yalc push

添加依赖

项目内部添加依赖，用户测试组件修改效果，添加后

yalc add shk-jsplumb

移除依赖

调试完成后移除调试依赖

yalc remove shk-jsplumb

组件自动化编译发布

打包配置

jsplumb使用的代码构建工具是grunt，配置文件在项目根目录下的Gruntfile.js，文件内注册了多个任务，这个用到的是：

grunt.registerTask('build-src', ['clean', 'jshint', 'concat', 'uglify', 'insertVersion' ]);

在package.json文件下配置打包命令

"scripts": {
    "build": "grunt build-src"
},

自动化编译

修改组件手动编译&推送，对于开发调试来说还是十分麻烦的。这里通过grunt中的watch达到自动编译推送的效果

• 监听src下的js文件，执行build-src任务

watch: {
	scripts: {
	    files: ['src/*.js'],
	    tasks: ['build-src']
    }
},

• 注册任务，供package.json使用

grunt.registerTask('watch-src', ['watch' ]);

• 在package.json文件下配置打包命令

"scripts": {
    "watch": "grunt watch-src"
 },

自动化推送

grunt.registerTask('build-src', ['clean', 'jshint', 'concat', 'uglify', 'insertVersion' ]);

组件每次build-src任务执行完成后都会执行插入版本号的任务，在这里进行推送命令的执行，使用child_process完成该脚本命令，实现自动化推送

grunt.registerTask('insertVersion', function() {
    var src = grunt.file.read("dist/js/jsplumb.js");
    grunt.file.write("dist/js/jsplumb.js", src.replace("<% pkg.version %>", package.version));
    src = grunt.file.read("dist/js/jsplumb.min.js");
    grunt.file.write("dist/js/jsplumb.min.js", src.replace("<% pkg.version %>", package.version));
    child_process.execSync('yalc push');  // 增加推送代码
    grunt.log.write('推送成功');
});

组件开发调试

在项目根目录文件夹下执行npm run watch，即可对组件进行开发，修改会自动推送到测试项目

The end~