webpack使用 babel-loader 转换 ES6代码示例

本文介绍了webpack使用 babel-loader 转换 ES6代码示例，分享给大家，具体如下：

查询各个 loader的使用，可以在官网上查询。https://www.npmjs.com

（一）安装 babel-loader，babel-core。

使用命令

npm install --save-dev babel-loader babel-core

因为ES6语法每年都在更新，因此，我们需要一定的规则去转换。

npm install --save-dev babel-preset-latest

（二）首先按照如下层级建立相应文件

　　

将测试用的ES6代码放在 app.js,使用CMD语法，将layer嵌入对象layer中。app.js代码如下。

import layer from './components/layer/layer.js';

const App = function () {
  console.log(layer);
}

new App();

layer.js代码如下

function layer(){
  return{
    name:'layer',
    tpl:'testTpl'
  };
}

export default layer;

(三）webpack.config.js代码如下

var htmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
console.log(__dirname);
module.exports = {
  /*context: __dirname,*/
  entry: './src/app.js',

  output: {
    path: './dist',
    filename: 'js/[name]-bound.js'//生成后的文件名 为 a-2ea5b2e9b258a8bbba73.js，main-2ea5b2e9b258a8bbba73.js
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        /*exclude: path.resolve(__dirname, 'node_modules'), //编译时，不需要编译哪些文件*/
        /*include: path.resolve(__dirname, 'src'),//在config中查看 编译时，需要包含哪些文件*/
        query: {
          presets: ['latest'] //按照最新的ES6语法规则去转换
        }
      }
    ]
  },
  plugins: [
    new htmlWebpackPlugin({
      filename: 'index.html', //通过模板生成的文件名
      template: 'index.html',//模板路径
      inject: 'body' //是否自动在模板文件添加 自动生成的js文件链接

    })
  ]
};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解webpack 配合babel 将es6转成es5 超简单实例

    今天接触了webpack,第一次使用webpack进行转码,竟然稀里糊涂就成功了,哈哈. 下面附上流程 创建个文件夹,初始化一下,首先全局安装webpack npm install webpack --save-dev 然后安装babel npm install --save-dev babel-core babel-preset-es2015 npm install --save-dev babel-loader 在当前文件夹内执行安装,然后创建两个文件夹一个src作为源文件夹,一个bin,保

  • ES6通过babel转码使用webpack使用import关键字

    使用了babel转码,使用import和export的时候,在浏览器运行代码的时候,提示 Uncaught ReferenceError: require is not defined babel只是个翻译,假设a.js 里 import 了 b.js 对a.js进行转码,只是翻译了a.js,并不会把b.js的内容给读取合并进来 如果想在最终的某一个js里,包含 a.js,b.js 的代码,那就需要用到打包工具 也就是webpack等工具了 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

  • webpack使用 babel-loader 转换 ES6代码示例

    webpack使用 babel-loader 转换 ES6代码示例

    本文介绍了webpack使用 babel-loader 转换 ES6代码示例,分享给大家,具体如下: 查询各个 loader的使用,可以在官网上查询.https://www.npmjs.com (一)安装 babel-loader,babel-core. 使用命令 npm install --save-dev babel-loader babel-core 因为ES6语法每年都在更新,因此,我们需要一定的规则去转换. npm install --save-dev babel-preset-lat

  • webpack4与babel配合使es6代码可运行于低版本浏览器的方法

    使用es6+新语法编写代码,可是不能运行于低版本浏览器,需要将语法转换成es5的.那就借助babel转换,再加上webpack打包,实现代码的转换. 转换包括两部分:语法和API let.const这些是新语法. new promise()等这些是新API. 简单代码 类库 utils.js const name = 'weiqinl' let year = new Date().getFullYear() export { name, year } index.js import _ from

  • 深入解析phpCB批量转换的代码示例

    我们在使用PHP语言的时候会遇到转换图片文件的需求.如果实现批量转换的话,就能节约大量的时间.下面我们就为大家具体讲解有关phpCB批量转换的方法. 最近需要整理一个整站的php代码规范视图,前几天发现phpCB整理视图非常好,但有个缺点是不能批量处理,使用过程中发现phpCB是一个CMD程序,马上就想到php的system函数调用cmd,想到就做,下面是phpCB批量转换的php程序: 复制代码 代码如下: < ?  header("Content-type: text/html; ch

  • 详解如何用babel转换es6的class语法

    babel是一个转码器,目前开发react.vue项目都要使用到它.它可以把es6+的语法转换为es5,也可以转换JSX等语法. 我们在项目中都是通过配置插件和预设(多个插件的集合)来转换特定代码,例如env.stage-0等. 实际上babel可以通过自定义插件的方式实现任何代码的转换,接下来我们通过一个"把es6的 class 转换为es5"的例子来了解一下babel. 内容如下: webpack环境配置 大家应该都配置过babel-core这个loader,它的作用是提供babe

  • 详解用Webpack与Babel配置ES6开发环境

    安装 Webpack 安装: # 本地安装 $ npm install --save-dev webpack webpack-cli # 全局安装 $ npm install -g webpack webpack-cli 在项目根目录下新建一个配置文件-- webpack.config.js 文件: const path = require('path'); module.exports = { mode: 'none', entry: './src/index.js', output: { f

  • 使用webpack4编译并压缩ES6代码的方法示例

    前段时间第一次接触了layabox游戏引擎做了一个项目,由于ES6相当好用,所以在项目中使用了很多的ES6语法,但是在发布的时候发现该引擎无法压缩ES6的代码,而不进行压缩的话则代码体积比较大 然后其实该引擎会将自己写的代码打包在一个js文件中,所以也就只有一个js文件是没有压缩的,所以我就想到了自己使用webpack单独对这个文件进行压缩,并将ES6语法编译成ES5,做低版本浏览器的兼容. 第一步安装webpack 1) 全局安装webpack4 npm install webpack -g

  • ES6中的class是如何实现的(附Babel编译的ES5代码详解)

    序言 这篇文章主要讲解面试中的一个问题 - ES6中的class语法的实现? ECMAScript 6 实现了class,class是一个语法糖,使得js的编码更清晰.更人性化.风格更接近面向对象的感觉:也使 IDE .编译期类型检查器.代码风格检查器等工具更方便地检测代码语法,做静态分析.同样的,这给没有类就缺点什么的软件开发工程师一个更低的门槛去接触js. ES6 class 的 ES5 代码实现 JavaScript语言的传统方法是通过构造函数定义并生成新对象,这种写法和传统的面向对象语言

  • Struts2单选按钮详解及枚举类型的转换代码示例

    Struts2单选按钮详解及枚举类型的转换代码示例

    本文研究的主要是Struts2框架单选按钮详解及枚举类型的转换的相关示例,具体如下. 使用struts2标签,毫无疑问要先引入标签库: <%@ taglib prefix="s" uri="/struts-tags"%> 假设radio单选框中List的值为一个Map集合: <s:radio list="#{'MAN':'男','WOMEN':'女'}" name="gender" listKey="

  • webpack+express实现文件精确缓存的示例代码

    由于最近开发的个人博客(Vue + node)在使用过程中,发现网络加载有点慢,所以打算对它进行一次优化.本次优化的目标如下: index.html 设置成 no-cache,这样每次请求的时候都会比对一下 index.html 文件有没变化,如果没变化就使用缓存,有变化就使用新的 index.html 文件. 其他所有文件一律使用长缓存,例如设置成缓存一年 maxAge: 1000 * 60 * 60 * 24 * 365. 前端代码使用 webpack 打包,根据文件内容生成对应的文件名,每

随机推荐