写得最清楚的是这个系列:

一个普通的写网页的人如何过渡到ES6 (一)

感觉比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

 把打包过程写成脚本。./src/do_bundle.js
 
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打包的更多相关文章

  1. 实例PK(Vue服务端渲染 VS Vue浏览器端渲染)

    Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...

  2. Vue服务端渲染和Vue浏览器端渲染的性能对比

    Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...

  3. 如何让Node.js运行在浏览器端

    Node.js又称服务端JavaScript.今天我为了解决一个问题,通过搜索引擎找到了如何将Node.js转成浏览器端可以运行的javascript.尽管这种方式有其局限性,但是还是可以用的. 1. ...

  4. IE 浏览器不支持 ES6 Array.from(new Set( )) SCRIPT438: 对象不支持“from”属性

    [转]解决老浏览器不支持ES6的方法 现象: Array.from(new Set( )) SCRIPT438: 对象不支持“from”属性或方法   解决方法: 安装babel 引入browser. ...

  5. 编写一个供浏览器端使用的NPM包

    此文已由作者吴维伟授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 在编写程序时,总会有一些代码是我们不愿意一遍又一遍重复地去写的,比如一些UI或交互相似组件,或是一些相似的流 ...

  6. Vue服务端渲染 VS Vue浏览器端渲染)

    Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...

  7. 解决老浏览器不支持ES6的方法

    转载地址:http://www.rockyxia.com/?p=669 为什么ES6会有兼容性问题? 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使 ...

  8. js接收对象类型数组的服务端、浏览器端实现

    1.服务端 JSONArray jsonArr = JSONUtil.generateObjList(objList); public static generateObjList(List<O ...

  9. 为什么commonjs不适合于浏览器端

    有了服务器端模块以后,很自然地,大家就想要客户端模块.而且最好两者能够兼容,一个模块不用修改,在服务器和浏览器都可以运行. 但是,由于一个重大的局限,使得CommonJS规范不适用于浏览器环境.还是上 ...

随机推荐

  1. vagrant 基本配置

    首先安装好virtualbox,可以对照官网教程 https://www.if-not-true-then-false.com/2010/install-virtualbox-with-yum-on- ...

  2. 在VisualStudio中应该使用什么字体

    转自:http://blog.csdn.net/bclz_vs/article/details/6607695 字体通常分为几个主要类型 San-Serif:无衬线字体 Serif:有衬线的字体 Mo ...

  3. C# WinForm 技巧八:界面开发之&ldquo;WeifenLuo.WinFormsUI.Docking+OutLookBar&rdquo; 使用

    概述      最近几天一直在关注WinFrom方面的文章主要还是园子里伍华聪的博客,在看看我们自己写的项目差不忍赌啊,有想着提炼一下项目的公共部分,公共部分有分为 界面,类库两方面,今天主要是把界面 ...

  4. ABP入门系列(6)——展现层实现增删改查

    这一章节将通过完善Controller.View.ViewModel,来实现展现层的增删改查.最终实现效果如下图: 一.定义Controller ABP对ASP.NET MVC Controllers ...

  5. 【转载】20分钟MySQL基础入门

    原文:20分钟MySQL基础入门 这里持续更新修正 开始使用 MySQL 为关系型数据库(Relational Database Management System),一个关系型数据库由一个或数个表格 ...

  6. CentOS(Linux) - SVN使用笔记(一) - 安装SVN过程及开启和关闭svn服务指令

    1.安装: yum install httpd httpd-devel subversion mod_dav_svn mod_auth_mysql yum remove subversion 删除旧版 ...

  7. http://www.cutt.com/

    简网APP工场-服务介绍 服务介绍

  8. vb.net它SqlHelper制备及应用

    上次文章中说到.对于一个项目来说.SqlHelper是一个非常重要的类. 在正在构造的机房收费系统中.有大量的操作数据库的操作. 现在.把反复的代码所有拿出来,就形成了SqlHelper类.这个Sql ...

  9. Linux 学习记录 一(安装、基本文件操作).

         Linux distributions主要分为两大系统,一种是RPM方式安装软件的系统,包括Red Hat,Fedora,SuSE等都是这类:一种则是使用Debian的dpkg方式安装软件的 ...

  10. 用bisect维护一个排序的序列

    import bisect list1 = [] bisect.insort(list1, 5) bisect.insort(list1, 1) bisect.insort(list1, 3) bis ...