一.直接使用命令编译
node命令:
$ sudo npm install babel -g #全局安装 $ babel demo.js -o demo-compile.js #编译并产出
二.结合gulp编译
1.需要先安装gulp,gulp-babel
$ npm install --save-dev gulp-babel
2.然后新建gulpfile.js
var gulp = require("gulp"); var babel = require("gulp-babel"); gulp.task("default", function () { return gulp.src("src/app.js") .pipe(babel()) .pipe(gulp.dest("dist")); });
// Use gulp-sourcemaps like this:
var gulp = require("gulp"); var sourcemaps = require("gulp-sourcemaps"); var babel = require("gulp-babel"); var concat = require("gulp-concat"); gulp.task("default", function () { return gulp.src("src/**/*.js") .pipe(sourcemaps.init()) .pipe(babel()) .pipe(concat("all.js")) .pipe(sourcemaps.write(".")) .pipe(gulp.dest("dist")); });
以下模块选装
npm install babel-preset-es2015 --save-dev
3.在根目录新建.babelrc文件,命令如下:
echo '{ "presets": ["es2015"] }' > .babelrc
三,结合webpack使用
1.安装loader模块
$ npm install --save-dev babel-loader babel-core
2.在根目录新建webpack.config.js文件
var webpack = require('webpack'); var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js'); module.exports = { //插件项 plugins: [commonsPlugin], //页面入口文件配置 entry: { index : './src/js/page/index.js' }, //入口文件输出配置 output: { path: 'dist/js/page', filename: '[name].js' }, module: { //加载器配置 loaders: [ //.css 文件使用 style-loader 和 css-loader 来处理 { test: /\.css$/, loader: 'style-loader!css-loader' }, //.js 文件使用 jsx-loader 来编译处理 { test: /\.js$/, loader: 'jsx-loader?harmony!babel-loader' }, //.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理 { test: /\.scss$/, loader: 'style!css!sass?sourceMap'}, //图片文件使用 url-loader 来处理,小于8kb的直接转为base64 { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} ] }, //其它解决方案配置 resolve: { //查找module的话从这里开始查找 root: 'E:/github/flux-example/src', //绝对路径 //自动扩展文件后缀名,意味着我们require模块可以省略不写后缀名 extensions: ['', '.js', '.json', '.scss'], //模块别名定义,方便后续直接引用别名,无须多写长长的地址 alias: { AppStore : 'js/stores/AppStores.js',//后续直接 require('AppStore') 即可 ActionType : 'js/actions/ActionType.js', AppAction : 'js/actions/AppAction.js' } } }
如上,"-loader"其实是可以省略不写的,多个loader之间用“!”连接起来。
注意所有的加载器都需要通过 npm 来加载,并建议查阅它们对应的 readme 来看看如何使用。
拿最后一个 url-loader 来说,它会将样式中引用到的图片转为模块来处理,使用该加载器需要先进行安装:
npm install url-loader -save-dev
配置信息的参数“?limit=8192”表示将所有小于8kb的图片都转为base64形式(其实应该说超过8kb的才使用 url-loader 来映射到文件,否则转为data url形式)。
webpack 的执行也很简单,直接执行
$ webpack --display-error-details
即可,后面的参数“--display-error-details”是推荐加上的,方便出错时能查阅更详尽的信息(比如 webpack 寻找模块的过程),从而更好定位到问题。
其他主要的参数有:
$ webpack --config XXX.js //使用另一份配置文件(比如webpack.config2.js)来打包 $ webpack --watch //监听变动并自动打包 $ webpack -p //压缩混淆脚本,这个非常非常重要! $ webpack -d //生成map映射文件,告知哪些模块被最终打包到哪里了
其中的 -p 是很重要的参数,曾经一个未压缩的 700kb 的文件,压缩后直接降到 180kb(主要是样式这块一句就独占一行脚本,导致未压缩脚本变得很大)。
相关推荐
主要介绍了详解如何使用babel进行es6文件的编译,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
es6的语法有些浏览器是不兼容的,babel可以把es6的语法全部编译成es5的,兼容所有浏览器
前端开源库-fis-parser-es6-babelfis-parser-es6-babel,是fis的一个解析器插件,用于用babel将es6 代码转换成es5友好代码。
一个为快速开发打造的javascript工作环境,采用babel编译代码,让你可以用ES6甚至ES7写代码 fork项目,基于这个模板编写你的javascript应用或者Node模块 ##目录介绍 lib/ src/ test/ 先从src说起,你的项目代码都写在src...
babel-plugin-transform-custom-element-classes, 编译 ES6 HTMLElement类扩展到 ES5 babel-plugin-transform-custom-element-classes编译扩展了ES5环境的HTMLElement的自定义元素类。问题自定义元素是针对原生ES6类...
$ cookiecutter gh:Raynes/cookiecutter-babel $ cd aegaeon # replace with your actual project name $ npm install $ gulp # builds ES6 source code in src/ 那里还有一个小任务,可以在后台观看src/并自动编译...
Gulp 4教程练习文件 :Concat CSS文件生成CSS文件的SourceMap自动添加CSS供应商前缀缩小CSS文件Concat JavaScript文件生成JavaScript文件的SourceMap缩小JavaScript文件缩小图片编译SCSS文件使用Babel编译ES6制作...
这几乎是原始骨架应用程序的副本,但在大多数地方都使用了打字稿和tsc,而不是babel和ES6 js。 在打字稿编译步骤中存在一个已知问题,即它不了解system目标,这仅在TS的主发行版中而不是在公共发行版中,因此在构建...
KoaHub CLI – KoaHub.js的开发工具,自动Babel编译ES6 / 7(生成器函数,类,异步和等待)以及文件修改后自动重启。 特性 自动重启 自动Babel编译 自动创建控制器 自动创造koahub项目 支持双向命令行 支持模块启动 ...
它使用webpack,Babel和webpack-dev-server进行编译和服务。 它使用Babel polyfill与Async / Await完全兼容。版本1.1.0用法安装安装依赖项$ npm install服务要在浏览器中投放-运行webpack-dev-server $ npm start...
[React_JS][ES6][前端教學]_ES6#01._EcmaScript_2015_ES6與之後的版本相容性介紹,為什麼
CSS 自动前缀带有 BrowserSync 的内置预览服务器自动编译 LESS 包括源映射使用 Browserify 编译 ES6,包括源映射使用 Babel-Eslint 自动对你的脚本进行 lint 令人敬畏的图像优化可选的 Include Skeleton 一些改进的...
最近使用vue-cli创建项目的时候,遇到es6无法转换成es5的情况,项目在ios9下无法正常运行,在webpack.base.conf.js里面修改babel的配置项,添加src目录也没用,于是百度,谷歌找方法,最后自己想了想是不是没有配置....
巴别地图简单的Esri JS API示例,其中包含使用babel编译的自定义地图类。 这允许将地图功能封装在es6类中。
经典排序算法的 ECMAScript 6 实现。 下载并运行项目 $ git clone ...Gulp 用于通过 Babel 编译 ES6 代码以及运行测试。 要运行特定测试: $ gulp < % sortName % > 连续运行所有测试: $ gulp test
使用Babel和Browserify设置ES6项目 项目目录结构 / |-- dist/ |-----modules.js |-- modules/ |-----import.js |-----index.js |--Gruntfile.js |--package.json modules 包含用ES6编写的所有模块 dist 包含捆绑...
本项目使用babel将es6代码编译为es5代码和tape库来测试模块 npm run dev # watch files and compiles them npm run compile # compile the module npm run debug # compile with sourcemaps npm run test # run ...
主要介绍了ES6中的class是如何实现的?(附Babel编译的ES5代码详解),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
用gobble和babel编译ES6文件。 自动创建源地图。 安装 首先,您需要安装有关详细信息,请参阅。 然后, npm i -D gobble-babel babel-preset-es2015 用法 gobblefile.js var gobble = require ( 'gobble' ) ; ...