前端基础知识与命令

名词解释

• Node.js:简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。
• npm:Nodejs下的包管理器。

命令流

关于NPM

先安装node.js，安装完成后在cmd中输入：node -v 查看版本

npm的本地仓库跑在系统盘c盘的用户目录了(没见到npm-cache是因为没有用过，一使用缓存目录就生成了)，我们试图把这2个目录移动回到D:\nodejs

先如图建立下面两个目录：

然后运行以下2条命令:

npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"

npm list -global    //看看全局目录内容，也可以看看全局目录的路径是在哪

在设置之前，可以看到：

在设置之后可以看到：

接下来输入命令npm config set registry=http://registry.npm.taobao.org 配置镜像站

注意，此时，默认的模块D:\nodejs\node_modules 目录将会改变为D:\Develop\tools\nodejs\node_global\node_modules 目录，如果直接运行npm install等命令会报错的。我们需要做如下操作：

增加环境变量NRM_PATH 内容是：D:\nodejs\node_global

• 运行npm init初始化项目，使用npm管理项目中的依赖包

PS:

npm i module_name -S = > npm install module_name --save 写入到 dependencies 对象

npm i module_name -D => npm install module_name --save-dev 写入到 devDependencies 对象
需要注意的是 ：devDependencies 里面的插件只用于开发环境，不用于生产环境，而 dependencies 是需要发布到生产环境的。

比如要用jquery
需要先安装jquery
npm i jquery -S

npm i bootstrap -S

nrm的安装使用

1. 运行npm i nrm -g全局安装nrm包；
2. 使用nrm ls查看当前所有可用的镜像源地址以及当前所使用的镜像源地址；
3. 使用nrm use npm或nrm use taobao切换不同的镜像源地址；
4. 如果想使用cnpm，需要先用npm安装cnpm npm i cnpm -g

webpack安装的两种方式

1. 运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令

2. 在项目根目录中运行npm i webpack --save-dev 或者 cnpm i webpack@3.8.1 -D安装到项目依赖中

3. 在项目根目录中创建webpack.config.js

   // 导入处理路径的模块
       var path = require('path');
   
       // 导出一个配置对象，将来webpack在启动的时候，会默认来查找webpack.config.js，并读取这个文件中导出的配置对象，来进行打包处理
       module.exports = {
           entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
           output: { // 配置输出选项
               path: path.resolve(__dirname, 'dist'), // 配置输出的路径
               filename: 'bundle.js' // 配置输出的文件名
           }
       }
   

4. 安装webpack-dev-server这个工具，来实现自动打包编译的功能，

   npm i webpack-dev-server@2.9.3 -D

   //在package.json中的scripts对象中加入如下内容:
   "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1",
       "dev": "webpack-dev-server --open --port 3000 --hot"
     },
   

5. 安装 cnpm i html-webpack-plugin@2.30.1 -D ,在webpack.config.js做如下配置：

   var htmlWebpackPlugin = require('html-webpack-plugin')
   
   module.exports = {
       entry: path.join(__dirname, './src/main.js'), // 入口文件
       output: { // 指定输出选项
           path: path.join(__dirname, './dist'), // 输出路径
           filename: 'bundle.js' // 指定输出文件的名称
       },
       plugins: [ // 所有webpack  插件的配置节点
           new htmlWebpackPlugin({
               template: path.join(__dirname, './src/index.html'), // 指定模板文件路径
               filename: 'index.html' // 设置生成的内存页面的名称
           })
       ]
   }
   

webpack之loader配置和使用

cnpm i style-loader css-loader -D
cnpm i less-loader less -D
cnpm i sass-loader node-sass -D
cnpm i url-loader file-loader -D
cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
cnpm i babel-preset-env babel-preset-stage-0 -D
cnpm i vue-loader vue-template-compiler -D

安装babel相关loader后，需要在根路径下配置文件.babelrc:

{
  "presets": ["env", "stage-0"],
  "plugins": ["transform-runtime", ["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
}

安装Vue

• npm i vue -S

• cnpm i vue-loader vue-template-compiler -D

• cnpm i style-loader css-loader -D

• 在webpack.config.js中，添加如下module规则：

  //这个module跟plugins平级,也在module.exports中
  module: { // 配置所有第三方loader 模块的
      rules: [ // 第三方模块的匹配规则
        { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 处理 CSS 文件的 loader
        { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // 处理 less 文件的 loader
        { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 处理 scss 文件的 loader
        { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }, // 处理 图片路径的 loader
        // limit 给定的值，是图片的大小，单位是 byte， 如果我们引用的 图片，大于或等于给定的 limit值，则不会被转为base64格式的字符串， 如果 图片小于给定的 limit 值，则会被转为 base64的字符串
        { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader 
        { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 来转换高级的ES语法
        { test: /\.vue$/, use: 'vue-loader' } // 处理 .vue 文件的 loader
      ]
    }
  

Bug

解决npm install安装node-sass包容易失败的问题

问题：在编译nodejs项目的时候，使用npm install命令安装npm依赖包特别容易出现node-sass包安装失败，报npm ERR! Failed at the node-sass@XXX postinstall script类似的错误。

原因：npm 安装 node-sass 依赖时，会从 github.com 上下载 .node 文件。由于国内网络环境的问题，这个下载时间可能会很长，甚至导致超时失败。

解决方法一、手动下载binding.node文件

1、执行npm uninstall node-sass卸载失败的安装

2、在https://github.com/sass/node-sass/releases页面下载binding.node文件。Linux系统下载对应Linux版，Windows系统下载Windows版，并将文件放到 /home/当前用户/.npm/node-sass/4.12.0/下（如果没有目录需新建）。

3、重新安装node-sass包，如果使用root用户，需要增加–unsafe-perm参数。参考命令如下：

#npm install node-sass@4.12.0–unsafe-perm-D

解决方法二、设置环境变量安装

1、执行npm uninstall node-sass卸载失败的安装

2、编辑.npmrc文件，手动添加SASS_BINARY_SITE=http://npm.taobao.org/mirrors/node-sass配置或者执行npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/命令自动添加配置。

3、执行npm install node-sass重新安装。

缺少python环境：

下载：http://www.python.org/ftp/python/2.7.3/python-2.7.3.msi
然后在系统环境变量的path中把python 2.x.x 的安装路径配置进去
npm config set python python2.7

缺少windows构建插件

以管理员身份运行 并打开命令行工具。

npm install --global --production windows-build-tools@4.0.0

webpack等等之间的依赖关系

cnpm i webpack@3.8.1 -D

npm i webpack-dev-server@2.9.3 -D

cnpm i html-webpack-plugin@2.30.1 -D

**

以管理员身份运行 并打开命令行工具。

npm install --global --production windows-build-tools@4.0.0

webpack等等之间的依赖关系

cnpm i webpack@3.8.1 -D

npm i webpack-dev-server@2.9.3 -D

cnpm i html-webpack-plugin@2.30.1 -D