亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

es6模塊被當前瀏覽器不支持該怎么解決!

写这个手记是因为自己在学习es6语法时,遇到es6模块 转译为 es5时 被当前浏览器不支持的问题,遂上网逛了好久,终于七拼八凑的写了这篇小解决方案手记。因解决的方案比较简单,所以我就直接给出 配置文件内容即可 :
1、所用到的工具化框架 : webpack + babel + node
2,测试项目目录
图片描述
3、package.json (命令:npm init)

注:此 .json 文件应当在项目根目录
{
  "name": "webpack-es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --progress --colors --watch"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.22.2",
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.22.0",
    "css-loader": "^0.26.1",
    "style-loader": "^0.13.1",
    "webpack": "^2.2.1"
  },
  "dependencies": {
    "jquery": "^3.1.1"
  }
}

按照上面的依赖下载即可。
4、webpack.config.js

注:此 文件应当在项目根目录
var webpack = require('webpack');

module.exports = {
    entry: './src/js/main.js',
    output: {
        path: __dirname,
        filename: 'lib/bundle.js'
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test : /\.js$/,
              exclude: /node_modules/,
              loader: 'babel-loader',
              query: {
                presets: ['es2015']
                }
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        })
    ]
}

大家在按照此内容配置,运行若出错,请至 webpack 官网 查看最新 配置规则。若遇到看不懂或不理解的 配置项时,可直接 复制 粘贴 问 百度 或 Google,解释的会更为详细,会学到相关知识更多。

點擊查看更多內容
3人點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消