在浏览器端用es6,babel+browserify打包
写得最清楚的是这个系列:
感觉比babel官网写得还清楚点。
看完这个才有点理解node原来不只是用来起express后端web server,更主要用途是作为开发时,用npm作为js语言的包管理器,然后打包,管理浏览器端<script>字段的js。有了npm+打包工具:写程序时
按包、模块,文件夹,单元测试这样写,然后打包成1个文件,供浏览器下载运行。
而不是在html手写一堆<script></script>,还要考虑先后顺序。一点点点击测试。
加上使用了es6,js也终于越来越工程化了,规避了以前大量的毒瘤和糟粕,提升了效率和正确性。
具体过程:
安装babelify browserify
npm i babelify browserify@10 -g
其他babel安装项一律--save-dev
只打包1个js脚本
就是直接包含
window.onload = function() {
}
的那个,只不过,现在可以在这个里面import了(es6)
打包到bundle.js
这样html里的script里
<script type="text/javascript" src="/static/bundle.js"></script>
就可以了。
打包方式:
方法1
在package.json的script里加一个命令:
"build_browser_dev": "browserify ./src/page.js -o ./static/bundle.js -t [ babelify --presets[env]]"
方法2
const fs = require("fs");
const browserify = require('browserify'); //--------读yaml配置文件------------
const yaml = require('js-yaml');
const argv = require('yargs').argv;
console.log('argv', argv);
const config = yaml.safeLoad(fs.readFileSync(argv.config, { encoding: 'utf8', flag: "r" }));
console.log('yaml config', config); //"browserify ./src/client.js -o ./static/bundle.js -t [ babelify --presets[env]]"
browserify('./src/client.js')
.transform('babelify',{presets: ["@babel/preset-env"]})
.bundle()
.pipe(fs.createWriteStream(`${config['PATH_OUTPUT']}/bundle.js`));
这样,可以接受配置文件,然后在package.json里,简短多了:
"scripts": {
"build_browser": "node ./src/do_bundle.js --config=./cfg.yml",
"test": "echo \"Error: no test specified\" && exit 1"
},
在浏览器端用es6,babel+browserify打包的更多相关文章
- 实例PK(Vue服务端渲染 VS Vue浏览器端渲染)
Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...
- Vue服务端渲染和Vue浏览器端渲染的性能对比
Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...
- 如何让Node.js运行在浏览器端
Node.js又称服务端JavaScript.今天我为了解决一个问题,通过搜索引擎找到了如何将Node.js转成浏览器端可以运行的javascript.尽管这种方式有其局限性,但是还是可以用的. 1. ...
- IE 浏览器不支持 ES6 Array.from(new Set( )) SCRIPT438: 对象不支持“from”属性
[转]解决老浏览器不支持ES6的方法 现象: Array.from(new Set( )) SCRIPT438: 对象不支持“from”属性或方法 解决方法: 安装babel 引入browser. ...
- 编写一个供浏览器端使用的NPM包
此文已由作者吴维伟授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 在编写程序时,总会有一些代码是我们不愿意一遍又一遍重复地去写的,比如一些UI或交互相似组件,或是一些相似的流 ...
- Vue服务端渲染 VS Vue浏览器端渲染)
Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...
- 解决老浏览器不支持ES6的方法
转载地址:http://www.rockyxia.com/?p=669 为什么ES6会有兼容性问题? 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使 ...
- js接收对象类型数组的服务端、浏览器端实现
1.服务端 JSONArray jsonArr = JSONUtil.generateObjList(objList); public static generateObjList(List<O ...
- 为什么commonjs不适合于浏览器端
有了服务器端模块以后,很自然地,大家就想要客户端模块.而且最好两者能够兼容,一个模块不用修改,在服务器和浏览器都可以运行. 但是,由于一个重大的局限,使得CommonJS规范不适用于浏览器环境.还是上 ...
随机推荐
- JS截取字符串中数字
今天项目中需要在一个字符串中截取一个数字,然后数字参与运算.搜了一下,有好多好用的方式截取字符串. 1,使用parseInt() var str ="4500元"; var num ...
- c语言cgi笔记
直接输出接收的数据 #include <stdio.h>#include <stdlib.h>main(){int i,n;printf ("Content-type ...
- java bean属性拷贝工具类比对(性能+功能)
业务系统中经常需要两个对象进行属性的拷贝,不能否认逐个的对象拷贝是最快速最安全的做法,但是当数据对象的属性字段数量超过程序员的容忍的程度比如通常超过5个属性的时候,代码因此变得臃肿不堪,使用一些方便的 ...
- VScode 好用插件集合(一)
VScode 好用插件集合(一) 什么是VScode Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语 ...
- android 文本框不获取焦点的两种方式
当进入一个页面以后,我们不希望EditText获取焦点自动弹出软键盘,占据大半个屏幕. 方法一 让LinearLayout率先获取焦点,代码如下: <LinearLayout android:f ...
- 2018年省赛蓝桥杯JavaB组
第一题:第几天 2000年的1月1日,是那一年的第1天. 那么,2000年的5月4日,是那一年的第几天? 注意:需要提交的是一个整数,不要填写任何多余内容. 解法: 2000年为闰年,2月29天 31 ...
- Python3 tkinter基础 Listbox delete 删除单个、所有元素
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- Vistual Studio Code配置
目录 查看版本,帮助: 修改vscode的扩展目录: 用户和工作区设置 用户设置的文件保存在如下目录: 所以有三种方式更改默认的设置: vscode同步配置: vscode启动launch.json配 ...
- UVA 10318 Security Panel(DFS剪枝 + 状压 + 思维)题解
题意:给一个r*c的矩阵开关(初始全打开的),每次按下一个开关都会改变3*3范围内的有*的地方的状态,问你最少几步能让开关全闭上,按升序输出按哪些按钮 思路:每个按钮至多按一下,按按钮的顺序和结果无关 ...
- Mysql的timestamp字段默认值设置问题
参考: https://www.cnblogs.com/mxwz/p/7520309.html https://www.jb51.net/article/50878.htm https://blog. ...