| 从零开始学VUE之Webpack(使用BabelLoader实现ES6语法打包转ES5语法) | 您所在的位置：网站首页 › webpack打包es6转es5吗 › 从零开始学VUE之Webpack(使用BabelLoader实现ES6语法打包转ES5语法) |
从零开始学VUE之Webpack(使用BabelLoader实现ES6语法打包转ES5语法)
|
ES6语法转ES5
在默认的情况下,ES6的语法在打包过后还是ES6的语法,但是这样会存在一个问题,那就是有的浏览器会不支持,所以需要将ES6转为ES5 npm install --save-dev babel-loader@7 babel-core babel-preset-es2015执行一下 D:\[email protected]\vue\day1\html\4.从0开始学VUE\simpleloader>npm install --save-dev babel-loader@7 babel-core babel-preset-es2015 npm WARN deprecated [email protected]: 🙌 Thanks for using Babel: we recommend using babel-preset-env now: please read https://babeljs.io/env to update! npm WARN deprecated [email protected]: core-js@ [email protected] postinstall D:\[email protected]\vue\day1\html\4.从0开始学VUE\simpleloader\node_modules\core-js > node -e "try{require('./postinstall')}catch(e){}" Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library! The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: > https://opencollective.com/core-js > https://www.patreon.com/zloirock Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -) npm WARN [email protected] requires a peer of webpack@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of webpack@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself. npm WARN [email protected] No description npm WARN [email protected] No repository field. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\watchpack-chokidar2\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) + [email protected] + [email protected] + [email protected] added 85 packages from 15 contributors and audited 491 packages in 53.006s 13 packages are looking for funding run `npm fund` for details found 10 vulnerabilities (2 low, 8 moderate) run `npm audit fix` to fix them, or `npm audit` for details D:\[email protected]\vue\day1\html\4.从0开始学VUE\simpleloader>安装成功 添加webpack.config.js的配置 // 需要从node依赖中引入 需要添加依赖环境 const path = require('path'); module.exports = { // 配置源码打包位置 entry: './src/main.js', // 配置目标位置 output: { // path 只能写绝对路径 不能写相对路径 但是不要直接写死,需要动态获取文件位置 path: path.resolve(__dirname,'dist'), filename: 'bundle.js' }, module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, // 增加转换配置 { test: /\.js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['es2015'] } } } ] } }执行打包 打包成功 查看bundle.js 我们之前的main.js中是存在const关键字的 
在打包后已经搜索不到了 
已经被转换成了ES5的语法 运行效果 
运行没有问题,还是可以照常执行的 作者：彼岸舞 时间：2021\06\07 内容关于：VUE 本文属于作者原创,未经允许,禁止转发 |
【本文地址】
公司简介
联系我们