如何让浏览器认识ES6语法，利用babel

JS模板规范之ES6

1. 直接暴露

export let school = 'jimei'
export function m1(params) {
  console.log('m1-----')
}

2. 按需暴露

function m3(params) {
  console.log('m3------'+params)
}
function mm3(params) {
  console.log('mm3--')
}
export {m3}

3.默认暴露

export default{
  jj:function name(params) {
    console.log('m2---')
  }
}

Babel的配置

为什么需要Babel

浏览器只认识ES5语法，所以babel的目的就是将ES6语法转化为ES5，可以进行模块化语法读取

安装相关的包

 npm install --save-dev babel-preset-es2015 babel-cli -D
 //或者
 npm i babel-cli babel-preset-env browserify -D

babel-cli里面存着babel的命令行
babel-present-es2015 babel-preset-env是babel进行预编程成es5语法
es2015与env
browserify是浏览器进行打包的工具

npm install live-server -g

再输入 live-server 来启动服务，这时候浏览器就会打开首页

不用配置文件

1. 安装工具 npm i babel-cli babel-preset-env browserify -D
2. 编译 npx babel src/js -d dist/js --presets=babel-preset-env
3. 打包 npx browserify dist/js/app.js -o dist/bundle.js

配置文件

在根目录建立.babelrc(rc指run control,编译的时候参照的文件)
参考
配置详解

{
  "presets": ["es2015"]//如果是babel-present-env，就配置env
}

先编译后打包

利用babel编译，用browerfity打包主要文件夹需要提前建好，文件目录要写好

npx babel js -d dist/js 

browserify dist/app.js -o  dist/bundle.js 

ES6引入

1.在页面直接引入，使用import语法

  <script type="module">
    import * as m1 from "./js/m1";
    import * as m2 from "./js/m2";
    import * as m3 from "./js/m3";
    m1.m1()
    m2.default.m2()
    m3.mm3()
  </script>

HTML使用type="module"会默认产生跨域请求，我们是在本地打开的文件，而file协议并不支持
来自原点的“空”已被CORS策略阻止:跨源请求只支持协议方案:http，数据，chrome, chrome-extension, https。

使用VScode的live-server插件解决

2.进行打包引入

 npx babel js -d dist/js 

browserify dist/js/app.js -o  dist/bundle.js

在html文件引入

<script type='text/javascript' src='./dist/bundle.js'></script>

在Microsoft Edge

在chrome

参考