老项目维护--删除手动下载的js使用npm安装方案之一

·  阅读 272

背景:最近项目(vue项目)按照上级要求需要整改,所有第三方依赖只能是版本火车头中有的,而且为了便于维护和升级,所以要删除所有手动下载的js依赖,修改为使用npm安装的方式在项目中使用

在我们这个已经运行了三年的项目来说,由于前期需求爆发,管理比较混乱,还是存在手动引入的依赖,比如说ueditor、jquery等,存放目录为项目根目录的static下,而且存在很多地方在引用,如果需要修改的话,需要修改的文件比较多,而且需要去验证。为了节约时间和人力,在使用npm安装好相应依赖之后,使用gulp将nodemules下相应依赖中的文件复制到static中,其他地方不用修改,这样可以以最小风险进行整改。具体实现方案如下:

1、在项目中安装gulp

npm install --save-dev gulp复制代码

2、在项目根目录下创建gulpfile.js文件,名字千万不要写错!


3、在gulpfile.js中引入gulp,编写任务,举例:将node_modules中的vue依赖的vue.min.js复制到public文件夹下

const gulp=require("gulp")
gulp.task('copyVue',function(){
    return gulp.src('./node_modules/vue/dist/vue.min.js')
    .pipe(gulp.dest('./public/'))
})复制代码

4、寻找执行gulp任务的时机

我们想要的效果是,项目成员在下载代码之后,执行npm install安装依赖之后就要自动执行gulp任务,所以就用到了package.json文件中script去执行我们的脚本,具体使用的是install/ postinstall: Run AFTER the package is installed.

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "postinstall": "gulp copyVue"
},复制代码


TIME!


分类:
阅读
标签:
收藏成功!
已添加到「」, 点击更改