vue-cli+webpack+babel 搭建项目初始环境

一、检查是否安装了node，node -v，

二、检查npm版本，npm -v，

三、进入项目的地址（个人是直接创建在桌面上的，比较懒），cd desktop，

四、安装cnpm（缘由：由于npm安装速度超级慢，cnpm是淘宝镜像很快，也是一个小技巧哈），（若是安装失败，建议检查一下npm版本）

npm install -g cnpm --registry=https://registry.npm.taobao.org，

五、用cnpm全局安装vue-cli，cnpm install -g vue-cli，

六、开始初始化项目vue-cli+webpack，vue init webpack Gdie（Gdie是项目名），

七、填写一些基本信息配置，

八、项目初始化完成，进入项目cd Gdie，

九、启动项目，npm run dev，

十、项目构建成功，在浏览器输入localhost:8080，

（说明：由于我已经构建了一个项目，端口是8080，因此这个新的vue-projec项目t端口是8080，只有一个项目的状况下端口都是8080，其实只要你们只要正确输入TA提供的端口号就能看到效果，不论几个项目在运行都不会影响），

效果如图：

11.安装babel

webpack - babel配置

babel是一个javascript编译器，是前端开发中的一个利器。它突破了浏览器实现es标准的限制，使咱们在开发中可使用最新的javascript语法。

经过构建和babel，可使用最新js语法进行开发，最后自动编译成用于浏览器或node环境的代码。

webpack中使用babel

配合webpack使用babel前，须要首先使用npm init初始化一个项目，npm install -g webpack安装webpack（全局安装是为了在命令行使用webpack命令）。

• 安装babel-loader, babel-core, babel-preset-env。

npm install --save-dev babel-loader babel-core babel-preset-env
其中，babel-preset-env插件是为了告诉babel只编译批准的内容，至关于babel-preset-es2015, es2016, es2017及最新版本。经过它可使用最新的js语法。

• 配置webpack.config.js

在webpack配置文件中配置bable-loader

module: {
    rules: [
        {
            test: /\.js$/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: [
                        ['env',{
                            targets: {
                                browsers: ['> 1%', 'last 2 versions']
                            }
                        }]
                    ]
                }
            },
            exclude: '/node_modules/'
        }
    ]
}复制代码

其中，exclude是定义不但愿babel处理的文件。targets是presets的一些预设选项，这里表示将js用于浏览器，只确保占比大于1%的浏览器的特性，主流浏览器的最新两个主版本。
更多与配置有关的信息，能够参考：
babel env preset设置,
browserlist预设置.

• 在命令行中运行相应webpack命令便可。
• 因为babel-preset配置选项较多，咱们通常能够在根目录下创建.babelrc文件，专门用来放置babel preset配置，这是一个json文件。能够将上述配置修改以下：

//.bablerc文件
{
    "presets": [
        ['env',{
            "targets": {
                "browsers": ['> 1%', 'last 2 versions']
            }
        }]
    ]
}

//原webpack.config.js文件
module: {
    rules: [
        {
            test: /\.js$/,
            use: {
                loader: 'babel-loader'
            },
            exclude: '/node_modules/'
        }
    ]
}复制代码

babel-polifill插件

在上面的babel配置中，babel只是将一些es6，es7-8的语法转换成符合目标的js代码，可是若是咱们使用一些特性或方法，好比Generator, Set, 或者一些方法。babel并不能转换为低版本浏览器识别的代码。这时就须要babel-polifill。

简单的说，polifill就是一个垫片，提供了一些低版本es标准对高级特性的实现。使用polifill的方法以下：

npm install --save babel-polifill

而后在应用入口引入polifill，要确保它在任何其余代码/依赖声明前被调用。

//CommonJS module
require('babel-polyfill');

//es module
import 'babel-polifill';复制代码

在webpack.config.js中，将babel-polifill加入entry数组中：

entry: ["babel-polifill", "./app.js"]复制代码

相比于runtime-transform，polifill用于应用开发中。会添加相应变量到全局，因此会污染全局变量。

更多细节参考babel-polifill。

runtime-transform插件

runtime transform也是一个插件，它与polifill有些相似，但它不污染全局变量，因此常常用于框架开发。

安装：
npm install --save-dev babel-plugin-transform-runtime

npm install --save babel-runtime

用法：
将下面内容添加到.bablerc文件中

{
    "plugins": ["transform-runtime"]
}复制代码