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保存后自动的打包文件

结束

ES6深入浅出-6 ES 6 模块-2.babel webpack parcel的更多相关文章

  1. ES6深入浅出-6 ES 6 模块-1.模块化速学

    把模块先默认认为是豆腐块 为什么前端需要模块? 没有模块的方式 预览这个html页面     一共200行js代码 前100行在做一件事 ,另外100行在做另一件事,这样就是两个模块 main.js来 ...

  2. ES6深入浅出_汇总贴

    H:\BaiDu\ES6深入浅出-wjw ES 6 新特性一览:https://frankfang.github.io/es-6-tutorials/ 我用了两个月的时间才理解 let https:/ ...

  3. react+babel+webpack初试

    在上一篇,我们简单学习了webpack学习,现在这里我们简单学习一下react+babel+webpack,进行编译react语法jsx以及结合es6写法. 这里我就简单的直接上demo: packa ...

  4. 在React+Babel+Webpack环境中使用ESLint

    ESLint是js中目前比较流行的插件化的静态代码检测工具.通过使用它可以保证高质量的代码,尽量减少和提早发现一些错误.使用eslint可以在工程中保证一致的代码风格,特别是当工程变得越来越大.越来越 ...

  5. route按需加载的3种方式：vue异步组件、es提案的import()、webpack的require.ensure()

    1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件.举例如下: { path: '/promisedemo' ...

  6. 学习 React(jsx语法) + es2015 + babel + webpack

    视频学习地址: http://www.jtthink.com/course/play/575 官方地址 https://facebook.github.io/react/ 神坑: 1.每次this.s ...

  7. nodejs模块学习： webpack

    nodejs模块学习: webpack nodejs 发展很快,从 npm 上面的包托管数量就可以看出来.不过从另一方面来看,也是反映了 nodejs 的基础不稳固,需要开发者创造大量的轮子来解决现实 ...

  8. JavaScript 学习笔记-- ES6学习（一）介绍以及Babel的使用

    本文摘自阮一峰老师的<ECMAScript 6入门>,原文地址:http://es6.ruanyifeng.com/#docs/intro ECMAScript 6 是一个泛指,含义是5. ...

  9. ES6详解八：模块（Module）！--各种导入导出方法

    [-] 基本用法 命名导出named exports 默认导出 命名导出结合默认导出 仅支持静态导入导出 各种导入和导出方式总结   modules是ES6引入的最重要一个特性. 所以以后再写模块,直 ...

随机推荐

  1. test20190830 NOIP 模拟赛

    100+70+0=170.这套题早就被上传到BZOJ上了,可惜我一到都没做过. BZOJ4765 普通计算姬 小G的计算姬可以解决这么个问题:给定一棵n个节点的带权树,节点编号为1到n,以root为根 ...

  2. CH6803 导弹防御塔

    6803 导弹防御塔 0x60「图论」例题 背景 Freda的城堡-- "Freda,城堡外发现了一些入侵者!" "喵...刚刚探究完了城堡建设的方案数,我要歇一会儿嘛l ...

  3. grep命令的or，and，not操作的例子

    在Linux的grep命令中如何使用OR,AND,NOT操作符呢? 其实,在grep命令中,有OR和NOT操作符的等价选项,但是并没有grep AND这种操作符.不过呢,可以使用patterns来模拟 ...

  4. Linux - 简单设置 vim (tab, 行号, 换行)

    # 进行这两步操作 cd /etc/ vim vimrc ## 将下面的设置直接添加到 vimrc 中 1. 设置 tab 四个空格:set tabstop=4 2. 显示行好set nu 3. 将下 ...

  5. Hbase节点及原理

    1.Hbase架构:Clinet.Zookeeper.Master.RegionServer.Region.Store.MemStore.HLog 1.读过程 2.写过程 https://www.cn ...

  6. [RxJS] Subject asObservable() method

    You can create your own state store, not using any state management libraray. You might have seen th ...

  7. javaweb学习笔记（三）

    一.javaweb高级(Filter和Listener)的简单介绍 1.过滤器Filter (https://www.cnblogs.com/vanl/p/5742501.html) ①定义 Filt ...

  8. learning armbian steps(1) ----- armbian 入门知识基础学习

    第一问: armbian是什么? Armbian是轻量级的Debian系统和为ARM开发板专门发行并重新编译的Ubuntu系统. 第二问:  什么场景下会用到armbian系统? 一个带有arm编译器 ...

  9. 常见的 eslint 基本报错信息

    Missing semicolon 缺少分号 Missing space before opening brace 左大括号前缺少空格 Trailing spaces not allowed 不允许尾 ...

  10. C用malloc 向系统申请一个大小为n*4个字节的内存块

    #include <stdio.h> #include <malloc.h> void out(int *p, int n){ int i; for(i=0;i<n;i+ ...