现代化前端开发方法

 

使用babel将es6代码转化为es5

由于目前大多浏览器不支持ES6语法（firefox和chorme)支持，需要把ES6编译成ES5: - 使用nodejs的npm包管理器，安装babel-cli依赖：

`npm install babel-cli --save-dev`

• 其中--save-dev作用是把依赖名称保存到package.json配置中

下载解释器依赖：

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

• 需要一个配置文件.babelrc 告诉我们需要什么版本解释器(因为一个项目中可能有多个解释器es2016，es2017...)，把ES6语法编译成ES5

npm run build 即可看到把ES6语法解析成了ES5了

gulp完成前端自动化构建任务

npm install gulp-cli --global  系统全局安装

npm install gulp-cli --save-dev 本环境安装

编写gulpfile.js，指定任务名称：

const gulp = require('gulp')

gulp.task('default',function(){
    console.log("test gulp task!");
});

gulp调用babel，安装依赖：

npm install gulp-babel --save-dev

基于gulp.watch监视项目js（使用ES6编写的）目录，自动调用babel解析成ES5。

 

设置npm安装目录

npm config set prefix "F:\software\node10\node_global"
npm config set cache "F:\software\node10\node_cache"

cnpm使用

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

cnpm install

yarn

npm install -g yarn

yarn build

yarn serve