在浏览器端用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规范不适用于浏览器环境.还是上 ...
随机推荐
- 微信小程序细节
微信小程序开发几个细节: 1.界面传值 ①全局参数传值 <!--结果--> <view wx:for="{{data}}" class="case pr ...
- Python语言知识总结
1. 环境 1.1 Anaconda 抛弃python原生安装方式吧,使用Anaconda才是最省心的. 1.2 Miniconda Anaconda 太大了,Miniconda才是王道!下载链接:h ...
- mint-ui之tabbar使用
<template> <div> <!-- tabcontainer --> <mt-tab-container class="page-tabba ...
- (4opencv)OpenCV PR 成功的收获和感悟
2018-09-12,第一次对OpenCV PR成功 https://github.com/opencv/opencv/pull/12206 <find innercircle of cont ...
- EXP7 网络欺诈技术防范(修改版)
实践内容 本实践的目标理解常用网络欺诈背后的原理,以提高防范意识,并提出具体防范方法. 1.简单应用SET工具建立冒名网站 2.ettercap DNS spoof 3.结合应用两种技术,用DNS s ...
- JAVA中拆箱和装箱
浅谈JAVA中拆箱与装箱 一. 什么是装箱?什么是拆箱? 在Java SE5之前,如果要生成一个数值为10的Integer对象,必须这样进行: Integer i = new Integer(10) ...
- 使用velocity 小技巧
因为公司的需求,我使用了velocity模板进行文件生成.在这里先记录一下使用velocity模板时的一些小技巧: 1.截取字符串 注意,(1)需要使用.length()获取字符串长度: ...
- 数据库03_SQL语句
由于在笔试中遇到写sql语句的题目,犯了低级错误,这里学习并总结一下,遇到相关的继续更新... 数据定义 1.创建数据库 create database testdb; 2.创建空表 需要指明表明.字 ...
- P3273 [SCOI2011]棘手的操作
吐槽 上午风浔凌julao问我的神题 操作又多又毒瘤又棘手... 然后bzoj题号正好是2333,2333333333 思路 貌似只有我是这么写的 线段树合并, 每个线段树存每个连通块的信息,维护点的 ...
- (转)Introductory guide to Generative Adversarial Networks (GANs) and their promise!
Introductory guide to Generative Adversarial Networks (GANs) and their promise! Introduction Neural ...