node相关工具使用

1、npm包管理工具

（1）初始换项目
npm init
或者
npm init -y

（2）安装依赖
npm install 依赖名称

（3）下载指定版本依赖
npm install jquery@2.1.x

（4）根据 package.json 配置文件下载依赖
npm install

（5）项目开发时用的包，项目在生产环境下不包含
npm install --save-dev eslint
或者
npm install -D eslint

（6）全局安装
npm install -g webpack

2、babel 转码工具

（1）安装babel工具
npm install --global babel-cli

（2）创建js文件，编写es6代码

//转码前
//定义数据
let input = [1,2,3];
// 将数组的每个元素+1
input = input.map(item => item + 1);
console.log(input);

（3）创建 .babelrc 配置文件

{
    "presets": ["es2015"],
    "plugins": []
}

（4）安装 es2015 转码器

npm install --save-dev babel-preset-es2015

（5）使用命令进行转码
①根据文件进行转码

babel src/example.js --out-file dist/compiled.js
或者
babel src/example.js -o dist/compiled.js

②根据命令进行转码

babel src --out-dir dist
或者
babel src -d dist

3、nrm 下载地址切换工具

（1）使用 npm install nrm -g 下载它
（2）查询可用下载地址列表： nrm ls
（3）切换 npm 下载地址： nrm use 下载地址名称

4、nodemon 命令行工具

node是一个命令行工具，用于辅助项目开发。
在Node.js中，每次修改文件都要在命令行工具中重新执行该文件，非常繁琐

使用方法：直接用nodemon代替node命令

5、webpack打包工具

功能：可以把多个静态资源文件打包成一个文件
好处：减少页面请求次数，提高访问效率

（1）全局安装
npm install -g webpack webpack-cli

安装后查看版本号
webpack -v

（2）编写js文件，并创建入口文件 main.js

（3）配置 webpack.config.js 配置文件，配置打包信息

const path = require("path");  // Node.js内置模块

module.exports = {
    entry: "./src/main.js",  // 配置文件入口
    output: {
        path: path.resolve(__dirname, "./dist"),  // 输出路径， __dirname代表当前文件所在路径
        filename: "bundle.js"  // 输出文件
    }
}

（4）使用命令打包
webpack
或者
webpack --mode=development # 没有警告信息

（5）如果要打包css文件
① 安装
npm install --save-dev style-loader css-loader

②mian.js引入css文件

const m1 = require('./1')
const m2 = require('./2')

// css文件引入
require("./style.css")

m1.info('hello ' + m2.add(1, 2))

③修改 webpack.config.js 文件

const path = require("path");  // Node.js内置模块

module.exports = {
    entry: "./src/main.js",  // 配置文件入口
    output: {
        path: path.resolve(__dirname, "./dist"),  // 输出路径， __dirname代表当前文件所在路径
        filename: "bundle.js"  // 输出文件
    },
    module: {
        rules: [
            {
                test: /\.css$/,  // 打包规则应用到以 css 结尾的文件上
                use: ["style-loader", "css-loader"]  // 使用的加载器
            }
        ]
    }
}