2023年6月21日发(作者：)
使⽤Babel处理浏览器对ES6的兼容性问题在编程中如果使⽤了ES6的新特性，浏览器若没有更新版本，或者新版本中没有对ES6的特性进⾏兼容，那么浏览器肯定⽆法识别我们的ES6代码，就会报错，这就是浏览器对ES6的兼容性问题。在⽹上找到了⼀篇如何使⽤Babel 处理浏览器对ES6的兼容性问题，收⼊笔记。Babel 也可以⽤于浏览器环境。但是，从 Babel 6.0 开始，不再直接提供浏览器版本，⽽是要⽤构建⼯具构建出来。如果你没有或不想使⽤构建⼯具1.通过安装5.x版本的babel-core模块获取$ npm install babel-core@old运⾏上⾯的命令以后，就可以在当前⽬录的node_modules/babel-core/⼦⽬录⾥⾯，找到babel的浏览器版本（未精简）和（已精简）。然后，将下⾯的代码插⼊⽹页。上⾯代码中，是Babel提供的转换器脚本，可以在浏览器运⾏。⽤户的ES6脚本放在script标签之中，但是要注明type="text/babel"。2.可以使⽤babel-standalone模块提供的浏览器版本，将其插⼊⽹页。注意，⽹页实时将 ES6 代码转为 ES5，对性能会有影响。⽣产环境需要加载已经转码完成的脚本。下⾯是如何将代码打包成浏览器可以使⽤的脚本，以Babel配合Browserify为例。⾸先，安装babelify模块。$ npm install --save-dev babelify babel-preset-latest然后，再⽤命令⾏转换 ES6 脚本。$ browserify -o -t [ babelify --presets [ latest ] ]上⾯代码将 ES6 脚本，转为，浏览器直接加载后者就可以了。在设置下⾯的代码，就不⽤每次命令⾏都输⼊参数了。{ "browserify": { "transform": [["babelify", { "presets": ["latest"] }]] }}3.在Github上发现的开源项⽬ /baixuexiyang/babel-browser通过ajax请求加载⽂件，在将⽂件内容通过babel编译，但是babel只能编译es6的语法，新的api并不会编译，所以需要借助babel-polyfill进⼀步编译，但是babel-polyfill并不会编译require和import，我封装了⼀个⽅法来实现require加载⽂件，进⽽将整个es6⽂件在线编译为es5运⾏。babel-browser是在线编译，运⾏起来会很慢，所以只能在开发环境，那线上怎么处理呢？我们通过babel将es6⽂件编译成es5，线上直接⽤es5代码，下⾯的demo给了⼀个完整的线上和线下的⽰例：如何引⼊⽂件？1、可以将⽂件下载到本地git clone /baixuexiyang/2、可以使⽤cdn/babel-browser-king@1.0.2/3、也可以npm安装npm install babel-browser-king如何使⽤？
require或者import加载⽂件只能是相对地址script标签的type属性值只能是text/babel
2023年6月21日发(作者：)
使⽤Babel处理浏览器对ES6的兼容性问题在编程中如果使⽤了ES6的新特性，浏览器若没有更新版本，或者新版本中没有对ES6的特性进⾏兼容，那么浏览器肯定⽆法识别我们的ES6代码，就会报错，这就是浏览器对ES6的兼容性问题。在⽹上找到了⼀篇如何使⽤Babel 处理浏览器对ES6的兼容性问题，收⼊笔记。Babel 也可以⽤于浏览器环境。但是，从 Babel 6.0 开始，不再直接提供浏览器版本，⽽是要⽤构建⼯具构建出来。如果你没有或不想使⽤构建⼯具1.通过安装5.x版本的babel-core模块获取$ npm install babel-core@old运⾏上⾯的命令以后，就可以在当前⽬录的node_modules/babel-core/⼦⽬录⾥⾯，找到babel的浏览器版本（未精简）和（已精简）。然后，将下⾯的代码插⼊⽹页。上⾯代码中，是Babel提供的转换器脚本，可以在浏览器运⾏。⽤户的ES6脚本放在script标签之中，但是要注明type="text/babel"。2.可以使⽤babel-standalone模块提供的浏览器版本，将其插⼊⽹页。注意，⽹页实时将 ES6 代码转为 ES5，对性能会有影响。⽣产环境需要加载已经转码完成的脚本。下⾯是如何将代码打包成浏览器可以使⽤的脚本，以Babel配合Browserify为例。⾸先，安装babelify模块。$ npm install --save-dev babelify babel-preset-latest然后，再⽤命令⾏转换 ES6 脚本。$ browserify -o -t [ babelify --presets [ latest ] ]上⾯代码将 ES6 脚本，转为，浏览器直接加载后者就可以了。在设置下⾯的代码，就不⽤每次命令⾏都输⼊参数了。{ "browserify": { "transform": [["babelify", { "presets": ["latest"] }]] }}3.在Github上发现的开源项⽬ /baixuexiyang/babel-browser通过ajax请求加载⽂件，在将⽂件内容通过babel编译，但是babel只能编译es6的语法，新的api并不会编译，所以需要借助babel-polyfill进⼀步编译，但是babel-polyfill并不会编译require和import，我封装了⼀个⽅法来实现require加载⽂件，进⽽将整个es6⽂件在线编译为es5运⾏。babel-browser是在线编译，运⾏起来会很慢，所以只能在开发环境，那线上怎么处理呢？我们通过babel将es6⽂件编译成es5，线上直接⽤es5代码，下⾯的demo给了⼀个完整的线上和线下的⽰例：如何引⼊⽂件？1、可以将⽂件下载到本地git clone /baixuexiyang/2、可以使⽤cdn/babel-browser-king@1.0.2/3、也可以npm安装npm install babel-browser-king如何使⽤？
require或者import加载⽂件只能是相对地址script标签的type属性值只能是text/babel
发布评论