babel

解决问题：解决版本差异

创建一个叫做 babel-test 的文件夹

npm init -y
npm install --save-dev babel-cli

babel 默认的配置文件名为 .babelrc

.babelrc 文件
{
    "presets": [
      "es2015"
    ],
    "plugins": []
}

转码规则是以附加规则包的形式出现

/*安装规则包*/
npm install --save-dev babel-preset-es2015

babel 是以命令行的形式使用的，常用命令

# 转码结果打印到控制台
 babel es6.js

# 转码结果写入一个文件
 babel es6.js -o es5.js # 将 es6.js 的转码结果写入 es5.js 中

# 转码整个目录到指定路径
 babel es6js -d es5js # 将 es6js 路径下的 js 文件转码到 es5js 路径下

由于我们的 babel 是安装在 babel-test 的 node_modules 中的，所以需要使用 npm run 来方便运行以上命令。

编辑 package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel inputs -d outputs"
  }

在 babel-test 下创建一个新的目录 inputs ，在其中写入新的文件 a.js:

// es6 语法，模板字符串
let name = 'ucag'
let greeting = `hello my name is ${name}`

npm run build

转换完成之后，我们在 outputs 下找到 a.js

'use strict';

var name = 'ucag';
var greeting = 'hello my name is ' + name;

webpack

解决问题：整合资源，把相互依赖的模块打包

创建一个叫做 babel-test 的文件夹

npm init -y
npm install --save-dev webpack

入口 entry：不管一个项目有多复杂，它总是有一个入口的。这个入口就被称为 entry 。这就像是我们的模块有个 index.js 一样。

出口 output：webpack 根据入口文件将被依赖的文件按照一定的规则打包在一起，最终需要一个输出打包文件的地方，这就是 output 。

加载配置的方法
1.写一个独立的配置文件
2.在命令行内编写配置

webpack-test 下创建一个新的文件 webpack.config.js

module.exports = {
    entry:'./main.js', // 入口文件为当前路径下的 main.js 为文件
    output:{
        path:__dirname, // __dirname 是 node 中的全局变量，代表当前路径。
        filename:'index.js' // 打包之后的文件名
    }
}

当我们在 webpack-test 下不带任何参数运行 webpack 命令时，webpack 会自动去寻找名为 webpack.config.js 的文件，这就是它默认的配置文件名了。

编辑 package.json

"scripts"{
    'pkg':'webpack' // 编辑快捷命令
}

在 webpack-test 下运行

npm run pkg # 运行 webpack

模块化的方式

1.CommonJS 的模块化方式
2.es6 的模块化方式

CommonJS 规范：

使用 module.exports 或 exports 来导出内部变量
使用 require 导入变量。当被导入对象是路径时，require 会自动搜寻并引入目录下的 index.js 文件，会把这个文件作为整个文件的入口。

es6 规范：

使用 import 与 export 来导出内部变量
当导入命名导出变量时，使用基于 import { varName } from ‘model’ 的语法；当导入匿名或默认导入时，使用 import varName from ‘model’ 语法；