(十六)开发和生产并行

本节知识点

• 解释生产和开发的关系

概述

• 开发依赖:就是开发中用的到而到了发布的时候用不到了他在package.json里面对应的就是devDependencies下面

• 生产依赖: 就是比如我们的JS使用了jquery,而我们最终的程序也需要这个包。这个包就在dependencies中

举例来说明

• (1) 强烈不建议:

npm i jquery

安装完成后你会发现package.json中并不存在这个包的依赖，如果你的项目拷贝给别人继续开发，或者别人和你git合作。再次利用npm install的时候就会显示缺少这个jquery包 项目就无法运行。所以我强烈不建议这样安装

• (2) 生产环境的包

npm i jquery --save

安装完成后他存在与package.json中的dependencies中，也就是他是线上我们最终环境(上线的时候依赖的包)

• (3) 开发依赖的包

npm i jquery --save-dev

也可以写成

npm i jquery -d

安装完成后他存在于package.json中的devdependencies中，也就是说他是开发坏境依赖，上线并不依赖这个包

复制一个项目

当我们从GIT上面拷贝一个包要安装所有的包就必须

• 安装全部项目依赖包

npm install

配置生产和开发的并行

(1) 在webpack.config.js中找到以前在图片中设置过一个绝对路径,要是没有请自己添加

const website = {publicPath:"http://localhost:1717/"} 

(2) 修改package.json命令

增加一个dev设置

"scripts": {
    "server": "webpack-dev-server",
    "dev":"set type=dev&webpack",
    "build":"set type=build&webpack"
  }

(3) 修改webpack.config.js文件

可以利用node语法来读取type值 。然后根据type值判断

if(process.env.type=="build")
{
 const website = {publicPath:"http://localhost:1717/"} 
}else
{
 const website = {publicPath:"http://xxxx.com/"} 
}

(4)要是想看看传过来的值是什么我们可以用

console.log(encodeURIComponent(process.env.type))