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

╰半橙微兮° 2022-11-07 04:23 220阅读 0赞

# JS模板规范之ES6 #

1.  直接暴露

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

1.  按需暴露

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][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,编译的时候参照的文件)  
[参考][Link 1]  
[配置详解][Link 2]

{
      "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语法

HTML使用type="module"会默认产生跨域请求，我们是在本地打开的文件，而file协议并不支持  
来自原点的“空”已被CORS策略阻止:跨源请求只支持协议方案:http，数据，chrome, chrome-extension, https。  
![在这里插入图片描述][20210311110705374.png]  
**使用VScode的live-server插件解决**  
![在这里插入图片描述][20210311112338545.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70]

2.进行打包引入

npx babel js -d dist/js

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

在html文件引入

在Microsoft Edge  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 1]  
在chrome  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 2]

[参考][Link 3]

[es2015_env]: https://zhuanlan.zhihu.com/p/29506685
[Link 1]: https://blog.csdn.net/xiaolinlife/article/details/102653313
[Link 2]: https://cloud.tencent.com/developer/section/1489428
[20210311110705374.png]: /images/20221023/a2d922d642664d6297944f59563db201.png
[20210311112338545.png]: /images/20221023/7a389182bc4c464c9554a6d6225ad63c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70]: /images/20221023/c1ebd308d6124f9eafd6bcfb36c77c07.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 1]: /images/20221023/27d7d8494bba433b87ef7a33f43d0e5d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 2]: /images/20221023/f6fe566139384478aa3a29425cb2b148.png
[Link 3]: https://blog.csdn.net/u013418359/article/details/86045964?utm_source=app&app_version=4.5.2