//这是main.js是我们项目的js入口文件

//1:a导入jQuery,引入jQuery包用$变量接收,此方法与node中 const $ = require('jquery') 同
//此为ES6中导入模块的方式
//由于ES6的语法太高级,浏览器解析不了次引入方式
import $ from 'jquery' import './css/index.scss' //class关键字,是ES6中提供的新语法,用来实现 ES6 中面向对象变成方法
class Person{
//使用static可以定义静态属性
//所谓静态属性,就是可以通过类名直接访问的属性
//实例属性,只能通过类的实例来访问的属性叫做实例属性
static info = { name: 'zs', age: '20' }
} console.log(Person.info);
//在 webpack 中,默认只能处理一部分 ES6 的新语法,一些更高级的 ES6 语法和 ES7 语法,webpack 处理不了,这时候就需要借助第三方的loader,来帮助 webpack 处理这些更高级的语法,
//当第三方loader 把高级语法转为低级语法之后,会把结果交给webpack 去打包到bundle.js中
//通过Babel,可以帮助我们将高级语法转换为低级语法,
//1:在 webpack 中,可以运行如下两套命令, 安装两套包,全装 Bable 相关的loader功能;
//1.1:第一套: cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
//1.2:第二套:cnpm i babel-preset-env babel-preset-stage-0 -D
//2:打开 webpack 的配置文件,在module 节点下的 rules 数组中,添加一个新的匹配规则
//2.1:{ test:/\.js$/, use:'babel-loader'', exclude:/node_modules/ }
//2.2:注意:在配置 babel 的 loader 规则的时候,必须把 node_modules 目录,通过 exclude 选项排除掉,原因有两个:
// 2.2.1:如果不排除 node_modules,则 babel 会把 node_modules 中所有的第三方 js 文件,都打包编译,这样会非常消耗CPU,同时打包速度非常慢。
// 2.2.2 哪怕,最终 babel 把所有 node_modules 中的 js 转换完毕了,但是项目也无法正常运行
//3:在项目的根目录中,新建一个叫做 .babelrc 的 babel 配置文件,这个配置文件属于JSON 格式,所以此文件必须符合 JSON 语法规范,不写注释,字符串必须用双引号
// 3.在 .babelrc 写如下配置:(可以把 presets 看做语法的意思)
// {
// “presets”: ["env","stage-0"],
// "plugins": ["transform-runtime"]
// } //这样创建一个对象,和java,c#实现面向对象的方法一样,class后端借鉴过来的,来实现面向对象
// var p1 = new Person();

上面是mian.js

下面创建 .babelrc文件在根目录

{
"presets": ["env","stage-0"],
"plugins": ["transform-runtime"]
}

然后在 webpack.config.js 中添加 Babel 加载器:

{ test:/\.js$/, use: 'babel-loader', exclude: /node_modules/ } //配置 babel 转化ES6 语法

上面的做法是 Babel^6x 版本的使用方法,babel在2018年9月份升级了一个大的版本 Babel 7.x,语法有了很大的变动,所以我上面运行的指令已经被out了,必须使用新语法,如下:
新命令如下适合 Babel 7.x和webpack 4 搭配:
  • 安装babel插件

    •   运行 cnpm i @babel/core babel-loader @babel/plugin-transform-runtime -D
    •   运行 cnpm i @babel/preset-env @babel/preset-stage-0 -D
  • 安装能够识别转换jsx语法的包 babel-preset-react
    •   运行 cnpm i @babel/preset-react -D
  • 执行命令:cnpm i @babel/plugin-proposal-class-properties -D
  • 执行命令:cnpm i @babel/runtime -D
  • 添加 .babelrc 配置文件:

{
"presets": ["@babel/preset-env","@babel/preset-react"],
"plugins": ["@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties"]
}

最后在 webpack.config.js 中配置上:

{ test:/\.js$/, use: 'babel-loader', exclude: /node_modules/ } //配置 babel 转化ES6 语法
 

Babel 处理 webpack 无法处理的 ES 语法(Babel 6.x 和 Babel 7.x 有区别)(二)的更多相关文章

  1. babel tsc webpack

    我要用啥?js的话:babel编译+webpack模块打包ts的话:tsc编译成js+babel编译+webpack模块打包浏览器情况:如果您的浏览器支持es6所有语法那么就可以只用webpack来处 ...

  2. 【长文详解】TypeScript、Babel、webpack以及IDE对TS的类型检查

    只要接触过ts的前端同学都能回答出ts是js超集,它具备静态类型分析,能够根据类型在静态代码的解析过程中对ts代码进行类型检查,从而在保证类型的一致性.那,现在让你对你的webpack项目(其实任意类 ...

  3. 使用 Babel + React + Webpack 搭建 Web 应用

    话不说直接上正题. 环境搭建 Babel--目前浏览器对于ES6的语法解析支持度还不高,所以要通过转码在编译,所以在使用ES6之前要安装Babel,之前安装的时候遇到了一些问题但是没有全部记录下来,现 ...

  4. webpack打包不识别es6语法的坑

    今天Vue项目npm run build 后webpack,报错uglifyjs,自己研究了一下,翻译过来,意思是不识别项目中写的高级语法,这里要把项目里es6语法转es5让浏览器识别, 也就是web ...

  5. ES6项目构建(babel+gulp+webpack)

    (一)基础架构 (二)任务自动化(gulp) (三)编译工具(babel,webpack) (四)代码实现 一.基础构架 1.app : 放置前端代码 css : css文件 js : js文件 cl ...

  6. babel配置项目目录支持转换es6语法,引入非项目目录js后,引入Js转换无效

    我遇到了一个问题,我在已经配置babel的项目中通过require引入了一个项目目录外层的另一个js文件,前期是可以成功转换并打包的,但是到了后期就不行了,报错: 这个报错的意思是,引入的js文件中有 ...

  7. 基于webpack实现多html页面开发框架五 开发环境配置 babel配置

    一.解决什么问题      1.开发环境js.css不压缩,可在浏览器选中代码调试      2.开发环境运行http服务指向打包后的文件夹      3.babel输出浏览器兼容的js代码 二.需要 ...

  8. ES语法注意事项

    在函数内部定义全局变量:举个栗子 function fn(){ var str = "hezhi"; } -alert(str) //=>fn不执行的 =>str is ...

  9. week05 codelab01 Babel ES6 webpack Nodejsserver等

    Babel 他出现的原因就是很多浏览器还未完全兼容ES6 需要将你写的ES6的内容转换成ES5让浏览器兼容运行 ES5和ES6相比出现很多新内容 比如拼接字符串 ES6可以` ` 里面如果引用变量就用 ...

随机推荐

  1. xmanager 5图文使用教程

    1.Xconfig xconfig是linux下X Window环境中用于配制的一个工具,和menuconfig相似,但用法更友好方便. 当你创建一个会话,会话分配一个默认的配置文件.Xmanager ...

  2. Nodejs下如何判断文件夹的存在以及删除文件夹下所有的文件

    代码如下: var folder_exists = fs.existsSync('./cache'); if(folder_exists == true) { var dirList = fs.rea ...

  3. Spring注解原理的详细剖析与实现

    本文主要分为三部分: 一. 注解的基本概念和原理及其简单实用 二. Spring中如何使用注解 三. 编码剖析spring@Resource的实现原理 一.注解的基本概念和原理及其简单实用 注解(An ...

  4. wpf图片定点缩放

    去年犯小人,万事不顺,4月刚换工作,开始新工作 遇到一个小问题,需要读取图片,然后对图片进行定点缩放,很简答的逻辑,很简单的代码,但是,这尼玛我被wpf给坑了,这一坑就是三天 好了,很简单的一个UI ...

  5. phpcms v9中的$CATEGORYS栏目数组

    首先 如果不能用$CATEGORYS这个数组或掉不出来内容应加入 $CATEGORYS = getcache('category_content_1','commons'); 1.用途 $CATEGO ...

  6. BZOJ_5415_[Noi2018]归程_kruscal重构树+倍增+最短路

    BZOJ_5415_[Noi2018]归程_kruscal重构树+倍增 Description www.lydsy.com/JudgeOnline/upload/noi2018day1.pdf 好久不 ...

  7. JavaScript ES6中export、export default、import用法和区别

    相信熟悉JS ES6的同学都知道export.export default是导出,import是导入的意思. 那么问题就来了, 1.import 导入要怎么用? 2.export.export def ...

  8. python3 分布式进程(跨机器)BaseManager(multiprocessing.managers)

    A机器负责发送任务和接受结果: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 #ta ...

  9. CSS:CSS 颜色

    ylbtech-CSS:CSS 颜色 1.返回顶部 1. 颜色是通过对红.绿和蓝光的组合来显示的. 颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义.对光 ...

  10. dockerfile_nginx+PHP+mongo数据库_完美搭建

      基于dockerfile创建nginx+PHP+mongo数据库_完美搭建     第一步:   从git上:git clone http://git.oursdata.com/wangyue/d ...