17开发和生产并行设置

开发和生产并行设置

npm安装

1. 若要安装jquery库，有3种安装方法
   
   • npm install jquery //安装完成后，你会发现在package.json中并不存在这个包的依赖(不赞成)
   • npm install jquery –save //生产环境依赖的包
   • npm install –save-dev jquery //开发环境依赖的包（上线并不需要这个包的依赖）
2. 安装全部项目依赖包：node_modules
   
   • npm install
3. 安装生产环境依赖包：
   
   • npm install –production

配置和生产并行

我们在以前的配置中设置了一个变量website，用于静态资源正确找到路径。那如果生产环境和开发环境不一样，而且我们需要来回切换

第一步：修改package.json命令
- 添加一个dev设置，通过环境变量来进行区分

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

第二步：修改webpack.config.js文件
- 利用node的语法来读取type的值

console.log(encodeURIComponent(process.env.type));       //查看时生产环境还是开发环境
if(process.env.type=="build"){
  var website={
    publicPath:'http://wuyou.com:8087/'
  }
}else{
  var website={
    publicPath:'http://10.212.109.36:8087/'
  }
}

1. 在终端输入npm run build查看输出的类型
2. 在终端输入npm run dev查看输出的类型

注意：若出错，应该是安装全部项目依赖包不全，删除node_modules文件夹，npm install重新安装

Mac下的package.json设置

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

MAC电脑下需要把set换成export,并且多加&符