ES6深入浅出-6 ES 6 模块-2.babel webpack parcel

笑着哭i 提交于 2019-12-04 04:33:13




https://babeljs.io/


复制到命令行执行

提示一个警告。缺少package.json这个文件

npm init -t

ls 然后看到了生成了package.json这个文件。

然后再去安装babel

安装完成后,多了一个node_module的目录。babel就装在了node_module这个目录里面了。


使用方法
在package.json文件内加上代码


提示的错误。从src到lib目录,也就是你需要src和lib这两个目录

分别去创建者两个目录

把所有模块化的代码放在src下面。
下面代码移动所有的 js格式的文件到src的文件夹下

src下的都是js文件。

执行npm run build

main.js改成这样。然后在执行npm run build

还需要执行第四部



执行这行命令

创建一个.babelrc的东西。

在里面写上这段代码

重新build

lib下的main.js发生了变化

修改index.html文件。里面用lib下的main.js文件。

提示错误require没有定义。

现在的问题是,他把import变成了require。但是又没有require。在nodejs里面是可以运行的,在浏览器中是没法运行的

用webpack



webpack比Babel难100倍



 

parcel

webpack太难了 ,于是又有人发明了parcel





执行npm install -g parcel-bundler

删除lib文件件

把src下面的js文件都移出来。

删除src目录

当前根目录的列表都列出来。

index.html内还是引用的是main.js这个文件。

parcel index.html


查看页面

运行成功了。


页面加载的js文件


main.js实际上就这两句话






js保存后自动的打包文件


结束

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!