babel import语法 js_Babel手动将ES6等代码转成ES5降级方案，关联module的js引入

苦逼码农

场景

箭头函数，展开符号，对象内置函数写法等等等等，这么多熟悉又炫酷的操作，在坑爹的低端浏览器或低端手机上居然不能用！！！却还要适配他，WTF？

---

js引入方案

首先说一下js的引入，不知道有没有小伙伴不知道，其实import和export在js上本身就是支持的，比如你手写一个js，然后使用export与import，并不需要去webpck等打包，直接在html里面把

换成

就可以愉快的使用了。

所以，你完全可以使用最熟悉的html引入js方案开发任何项目，恩，没错，就算是npm的包一般也是有cdn版本的，实在没有提供，也可以使用

来引入。

当然，你可以使用import直接引入：

import x from './node_modules/xxx/...'

注意'./'。

---

适用于中小型项目

如果你的项目成千上万个文件(肯定不算npm包啦)，那么可以直接弃用这个方案了。

如果你的项目不大，几个最多几十个js，而且都不是巨大的话，那么这种引入方式是非常好用的，尤其是开了即时预览，那效率可比各种webpack快多了。

现在就假设你项目引入了一个js，然后js里面各种愉快的使用最新标准语法，那么你可以发布，而且80%的手机都是正常使用的。

但是……总有那么些“老板”用着几年前的华为。。。

所以，通过下面方式，将他降级成ES5的js吧。

降级

npm是必须的，如下：

npm i -D @babel/core @babel/cli @babel/plugin-proposal-function-bind @babel/preset-env

然后记得配上babel的配置文件.babelrc，内容如下：

{ "presets": ["@babel/env"], "plugins": [ "@babel/plugin-proposal-function-bind" ]}

最后终端执行：

npx babel [dev].js -o [release].js

最后只要记得把script标签引入的js换一下即可。

效果如下：

(编译前)

编译前

(编译后)

编译后

---

开发时候尽情的开发，最后交付前，执行下即可(别忘了script的type处理)，脚手架什么的，拜拜吧您……

PS：建议在package.json里面加上个release脚本哦。