前端工程化--关于npm/yarn、webpack、vue的工具链

管理工具npm/yarn

安装

npm和yarn都基于node.js，前往node官网安装Node，Node自带npm开箱即用；还可以前往yarn官网安装yarn。

起步

npm init -y 和 yarn / yarn init -y 一键初始化，生成package.json配置文件，例如：

//json
{
  "name": "vue-blog",
  "version": "1.0.0",
  "description": "",
  //"private": true,私有化不发布代码
  "main":"index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {},
  "dependencies": {}
}

包的安装

• 全局安装
  npm install <pkg> --global 或 yarn global add <pkg>，

简写： npm i <pkg> -g 或 yarn add <pkg> -g；

• 本地安装
  生产环境包npm install <pkg> --save或yarn add <pkg>，
  工厂环境包npm install <pkg> --save-dev 或 yarn add <pkg> --dev；

简写：npm i <pkg>或yarn add <pkg>；npm i <pkg> -D 或 yarn add <pkg> -D

删除包和依赖

• 局部环境和依赖
  npm uninstall <pkg> --save和npm uninstall <pkg> --save-dev；
  yarn remove <pkg>自动更新依赖，或 yarn remove <pkg> --<flag>。
• 全局环境
  npm uninstall <pkg> --global 和 yarn global remove <pkg>

安装所有依赖

npm install 或 yarn / yarn install安装所有依赖的包。

注意：yarn add和yarn install 的不同；

更新包

npm update <pkg> --<flag> 或 yarn upgrade。

清楚缓存

npm cache clean --force 或 yarn cache [ ls /dir / clean] 简写yarn clean

设置

npm config set --<flag> 或 yarn config set --<flaf>

webpack配置

安装webpack4.0 和 webpcak-cli

建议局部安装，避免破环性插件改变webpack，多项目的依赖。
npm i webpack webpack-cli -D 或 yarn add webpack webpack-cli -D；
之后，新建 文件配置webpack.config.js：

var Webpack = require("webpack");
module.exports={
  mode:"development",
  entry:["./src/index.js"],
  output:{
  	path:"bundle.js",
  	filename:__dirname + "/dist"
  },
  module:{
  },
  plugins:[]
}

安装lodash，npm i loadsh --save；
搭建项目；
运行 npx webpack。

webpack基础入门

传送门：webpack基础入门

参考：webpack中文官网；github的webpack-cli官方文档；npm的webpack-cli的官方文档

Vue基础配置

安装 @vue/cli

• CLI
  npm i @vue/cli -g，重启bash。

快速原型开发

• CLI service global需全局依赖，只适用于快速原型开发 ,
  npm i @vue/cli-service-global -g
  运行vue serve 和 vue build 快速创建。

手动创建项目

• vue create <project-name>
• 选择preset预设 babel+ ESlint，配置文件保存在~/.vuerc。

//.vuerc
{
  "useConfigFiles": true,
  "router": true,
  "vuex": true,
  "cssPreprocessor": "sass",
  "plugins": {
    "@vue/cli-plugin-babel": {},
    "@vue/cli-plugin-eslint": {
      "config": "airbnb",
      "lintOn": ["save", "commit"]
    }
  }
}

或者，开启UI界面创建项目 vue ui。
或者，全局依赖npm i -g @vue/cli-init桥接使用CLI 2.x的初始化 指令vue init webpack <project-name>创建项目。

安装插件

• CLI plugins
  • 内建插件npm i @vue/cli-plugin-<name> -D，社区插件npm i vue-cli-plugin-<name> -D；
  • vue add @vue/<name>过程：解析包全名@vue/cli-plugin-<name>，从npm安装后，调用生成器。如vue add router、vue add vuex。

• 调用已经安装的包vue invoke @vue/<name>，跳过安装，调用生成器。
• 引入外部配置，将会合并到package.json 详见：

//config.json
{
"vuePlugins":{
		"service":["my-comand.js"],
		"ui":["my-ui.js"]
}

CLI服务

• CLI service
  npm i @vue/cli-service -D
  运行vue-cli-serve serve 和vue-cli-serve build启用热启动；
  运行vue-cli-serve inspect审查webpack config配置；
  运行vue-cli-serve help查看注入的命令。

开发

以下内容未来完成，参考官方中文网

lodash语法

构建多页应用

vue,config.js中的pages选项。

URL转换规则

• 绝对路径/img/xxx.png会被保留
• 以.开头./img/xxx.png会被转换为相对模块目录结构中的路径
• 以~开头~img/xxx.png会作为模块请求解析
• 以@开头也会作为模块请求解析，仅用于模块中

public文件夹

不通过webpack处理，作为静态资源复制，通过绝对路径引用，注意

• 引用设置URL前缀<%= BASE_URL %>，
• 在模版中定义基础链接前缀。

html css 相关处理插件

配置vue.config.js

会影响webpack.config.js中配置，通过webpack-merge合并；
通过vue inspect相关命令审查合并后的webpack配置。

模式及“.env”文件

• development = vue-cli-service serve
• production = vue-cli-service build 和 vue-cli-service test:e2e
• test = vue-cli-service test:unit
  如：vue-cli-service build --mode development传递--mode选项覆盖默认模式。