1. 程式人生 > >webpack-使用babel-loader轉化ES6程式碼

webpack-使用babel-loader轉化ES6程式碼

整個檔案目錄:
這裡寫圖片描述
在webpack.config.js中需要配置以下程式碼:

module: {
    loaders: [
        {
            test: /\.js$/,
            loader: 'babel-loader',
            option: {
                'presets': [latest],
            }
        }
   ]
}

然後必須安裝babel-loader

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

因為配置了presets
所以需要在命令列安裝

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

全部程式碼如下:

var htmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
module.exports = {
    //檔案入口
    entry: './src/app.js',
    //檔案出口
    output: {
        path: __dirname + '/dist/',       //打包後的路徑
        filename: 'js/[name].bundle.js'
}, module: { loaders: [ { test: /\.js$/, loader: 'babel-loader', //打包除這個檔案之外的檔案 exclude: path.resolve(__dirname,"./node_modules"), //打包包括的檔案 include: path.resolve(__dirname, "./src"), options: { 'presets'
: ['latest'] } } ] }, plugins: [ //自動生成index.html檔案 new htmlWebpackPlugin({ filename: 'index.html', template: "index.html" }) ] }

相關推薦

webpack-使用babel-loader轉化ES6程式碼

整個檔案目錄: 在webpack.config.js中需要配置以下程式碼: module: { loaders: [ { test: /\.js$

webpack4與babel配合使es6程式碼可運行於低版本瀏覽器

使用es6+新語法編寫程式碼,可是不能運行於低版本瀏覽器,需要將語法轉換成es5的。那就藉助babel7轉換,再加上webpack打包,實現程式碼的轉換。 轉換包括兩部分:語法和API let、const這些是新語法。 new promise()等這些是新API。 簡單程式碼 類庫 utils.js cons

webstorm編輯器使用babel自動轉化es6

node對es6相容程度不斷提高,書寫也不會受到限制 注意:低版本的node對es6支援不是很好,測試的話會出現很多問題,建議升級node版本,windows的使用者估計要到網站下載安裝才能升級 附網址:https://nodejs.org/en/download/ 目前我用的

webpack之重新認知babel-loader

前言:在《 webpack之loader 》中webpack.config.js對babel-loader進行了簡單配置。這篇文章回到我們之前的webpack專案中,看看如何配置babel。正文:回顧之前babel-loader配置專案目錄: package.json 配置。

使用webpack+babel來"編譯"你的JS程式碼(下)

上節課我們學習了 1.安裝了babel的es2015轉換器 編寫了一個簡單的es2015語法的js程式碼 let name = “zhangsan”; 2.執行了 babel index.js –out-file xxx.js 把程式碼進行轉化 3.安

webpack+babel構建ES6語法執行環境

由於ES6語法在各個瀏覽器上支援的情況各不相同,所以在使用ES6語法時需要使用babel經過一次編譯,將ES6語法編譯為ES5語法,下面就開始搭建一個基於webpack+babel的ES6語法執行環境: 1.需要安裝的包 webpack(安裝webpa

使用webpack打包ES6程式碼

安裝nodejs 根目錄下執行 npm init 根據提示輸入專案相關資訊,然後執行: npm install 安裝webpack 在專案根目錄下執行 npm install webpack --save-dev 安裝ba

使用babeles6程式碼轉成es5(二)

上節寫到環境的準備,先用es6語法寫個js檔案內容大概如下:只做個簡單測試就不寫複雜了 var a = (msg) => () => msg; 第一步 從上面圖可以看出,在編譯器中輸入的程式碼有許多錯誤提醒,這是因為編譯器預設是採用ES5

使用Babel獨立版編譯ES6程式碼時報錯誤:Unexpected token

使用babel-standalone來線上編譯ES6程式碼,但是遇到如下錯誤:Unexpected token <原因是ES6中使用了ReactJS,需要在編譯預設定選項(presets)中新增r

ES6+轉ES5(webpack+babel、指定多個js檔案、自動注入)

  接續上篇ES6+轉ES5,本篇將使用webpack和babel將多個不同目錄下指定的多個ES6+語法的js檔案編譯為ES5,並將編譯後的檔案配置注入對應的html檔案。   所需環境node、npm、設定淘寶映象請參考上篇進行安裝,地址:https://www.cnblogs.com/puyongsong

webpackBabelbabel-loader的關係

本文將要介紹 webpack,Babel,babel-loader 的關係。理清楚他們各自做了什麼事情。 通常我們新建一個專案,會先配置webpack,然後配置babel;babel是一個編譯工具,實際上,babel也是可以單獨使用的。 下面我們從Babel出發,簡單配置一個react專案,來清晰認識一下

node 報錯:Uncaught Error: Cannot find module "!!../../../node_modules/extract-webpack-plugin/loader.js

方法 nod ima enc mage modules ann not uncaught 問題出在缺少less和less-loader 因為以上模塊使用了less解析。 解決方法在dependencies添加 "less": "^2.7.1", "less-lo

webpack常用loader和plugin及打包速度優化

div es2017 .cn 圖片 打包 web class load ima 優化 或 webpack常用loader和plugin及打包速度優化

webpack+babel項目在IE下報Promise未定義錯誤引出的思考

sync 例子 fine ans 原型 mark ron issue includes 低版本瀏覽器引起的問題 最近開發一個基於webpack+babel+react的項目,一般本地是在chrome瀏覽上面開發,chrome瀏覽器開發因為支持大部分新的js特性,所以一般不怎

babel轉碼ES6

目錄結構 圖片 寫入 rip console from 語法 inf define 首先可以用es-checker檢測一下本機對ES6的支持程度 npm install -g es-checker && es-checker 可見,不支持ES

webpack隨筆2--編譯ES6/ES7

sets -- es2015 sta nbsp reset 版本 新版本 ade 一、Babel 1、安裝babel Bable-loader: babeljs.io babel最新版:npm install [email protected]

webpack 打包 node 服務端程式碼 __dirname 失效問題

具體情況配置參考 官網 https://webpack.js.org/configuration/node/#node-__dirname   webpack.config.server.js const serverConfig = { output: {

Webpack+babel+Vue.js+element前端知識筆記

在公司做了幾個月Java後端開發,但近年來前端技術發展喜人,想學Vue.js+Element-UI+ES6+Webpack這些技術。 這篇當教程看還不合格,很多地方不詳細,知識點在官方教程裡,這篇只能當我自己的筆記。 目標 學習參照網上開源專案做一個後臺管理系統的頁面。 學習人

[坑003]babel-loaderbabel-core安裝問題

0x00錯誤描述 Error: Cannot find module '@babel/core’ 0x01產生原因 babel-loader和babel-core版本不對應所產生的, babel-loader 8.x對應babel-core 7.x babel

webpack使用來打包前端程式碼

使用webpack打包js檔案(隔行變色案例) 1.webpack安裝的兩種方式 執行npm i webpack -g全域性安裝webpack,這樣就能在全域性使用webpack的命令 在專案根目錄中執行npm i webpack --save-dev安裝到專案依賴中 2.初步使用webp