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. test20190803 夏令营NOIP训练19

    60+100+0=160 贪婪大陆 面对蚂蚁们的疯狂进攻,小FF的Tower defence宣告失败--人类被蚂蚁们逼到了Greed Island上的一个海湾.现在,小FF的后方是一望无际的大海, 前 ...

  2. LG4213 【模板】杜教筛（Sum）和 BZOJ4916 神犇和蒟蒻

    P4213 [模板]杜教筛(Sum) 题目描述 给定一个正整数$N(N\le2^{31}-1)$ 求 $$ans_1=\sum_{i=1}^n\varphi(i)$$ $$ans_2=\sum_{i= ...

  3. 国产MM才叫漂亮[景甜]

  4. Centos6 克隆后简单的网络配置

    第一步:修改主机名 $ vi /etc/sysconfig/network     第二步: $ vi  /etc/udev/rules.d/70-persistent-net.rules   注: ...

  5. css cursor效果图

    效果图: <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset=& ...

  6. set_index

    Signature: df.set_index( ['keys', 'drop=True', 'append=False', 'inplace=False', 'verify_integrity=Fa ...

  7. Web开发技术---简单的登录验证

    制作一个APP或系统最基础的是登录界面,下面通过一个简单的登录注册界面的程序,来熟练掌握Web开发的技术. 一.知识点: 1.在网页界面获取用户的输入信息 2.标签的基本应用 3.用户输入结果的错误提 ...

  8. python - 使用psutils

    oshelper.py #encoding=utf-8 import psutil import datetime #查看cpu的信息 print u"CPU 个数 %s"%psu ...

  9. asp.net+ tinymce粘贴word

    公司做的项目需要用到粘贴Word功能.就是将word内容一键粘贴到网页编辑器(在线富文本编辑器)中.Chrome+IE默认支持粘贴剪切板中的图片,但是我要粘贴的文章存在word里面,图片多达数十张,我 ...

  10. PHP 源码安装常用配置参数和说明

    常用的配置参数1. --prefix=/usr/local/php指定 php 安装目录install architecture-independent files in PREFIX 默认/usr/ ...