苏州网站建设模版,网站建设费用构成,河南省住房城乡建设厅官网,做音乐网站代码接续上篇ES6转ES5#xff0c;本篇将使用webpack和babel将多个不同目录下指定的多个ES6语法的js文件编译为ES5#xff0c;并将编译后的文件配置注入对应的html文件。一、新建项目#xff0c;目录如下二、执行命令初始化项目cnpm init -y执行成功后会生成文件#xff1a;pack…接续上篇ES6转ES5本篇将使用webpack和babel将多个不同目录下指定的多个ES6语法的js文件编译为ES5并将编译后的文件配置注入对应的html文件。一、新建项目目录如下二、执行命令初始化项目cnpm init -y执行成功后会生成文件package.json三、执行命令安装webpackcnpm install webpack --save-dev(有个坑)在webpack3中webpack本身和它的CLI以前都是在同一个包中但在第4版中两者已分开管理所以要单独安装其脚手架。执行命令安装webpack-clicnpm install webpack-cli --save-dev四、执行命令安装以下3个用于处理js的包cnpm install --save-dev babel-loader babel/core babel/preset-envbabel-loader对使用了ES2015语法的.js文件进行处理。babel-core提供一系列api。当webpack使用babel-loader处理文件时babel-loader就调用了babel-core的api。babel-preset-env告诉babel使用哪种转码规则进行文件处理。babel有几种规则都可以实现对ES6语法的转码如babel-preset-es2015、babel-preset-latest、babel-preset-env不过官方现已建议采用babel-preset-env。五、执行命令安装全局垫片插件cnpm install babel-polyfill --save-dev六、执行命令安装局部垫片插件cnpm install babel/runtime --save-devcnpm install babel/plugin-transform-runtime --save-dev垫片Babel默认只转换新的JavaScript句法(syntax)而不转换新的API比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。举例来说ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行必须使用babel-polyfill为当前环境提供一个垫片。七、根目录下新建文件webpack.config.js这个js配置文件的注意事项我都写上了注释后面我会将其全部内容贴上来。八、根目录下建一个.babelrc文件内容为{presets: [[babel/preset-env, {targets: {browsers: [ 1%, last 2 versions]}}]],plugins: [babel/transform-runtime]}意思是打包后的代码要支持1%以上的浏览器并支持浏览器的上2个版本此时执行命令webpack就可以了九、想要配置为html文件自动注入所以生成的包还需要安装以下插件执行命令安装html-webpack-plugin插件cnpm install html-webpack-plugin --save-dev安装完成后执行webpack即可注意如果webpack打包时报错Cannot find module webpack/lib/node/NodeTemplatePlugin解决办法执行命令cnpm link webpack --save-dev然后在执行webpack就可以了附上最后生成文件后的目录结构图附上webpack.config.js全部内容//为了使用插件需要将require()其添加到plugins阵列中。使用new运算符调用插件来创建插件的实例。const HtmlWebpackPlugin require(html-webpack-plugin);const webpack require(webpack); // 用于访问内置插件const path require(path);module.exports {entry: { //入口配置index: ./src/index.js,ctrl: ./ctrls/ctrl.js},// 这里[]里的name就是app和search也就是entry里的key值// 这里[hash:5]会随机生成一个版本号作为你的打包js版本// 建议最后一次打包才加上.[hash:5] 否则每次打包都同一个文件都会生成新的版本号不同的文件output: { //出口配置// filename: [name].[hash:5].js,filename: [name].js,path: __dirname /dist // 生成新文件的地址},module: {rules: [{test: /(\.jsx|\.js)$/, // 处理以.jsx或.js结尾的文件use: {loader: babel-loader, // 用babel-loader处理options: {presets: [[babel/preset-env, {targets: {browsers: [ 1%, last 2 versions]}}]]}}}]},//html-webpack-plugin生成器通过自动注入所有生成的包为应用程序生成HTML文件plugins: [new HtmlWebpackPlugin({ // 地址为output对应的path地址disttemplate: ./src/index.html, //处理模板filename: ../index.html //生成模板// 无chunks参数默认全部注入}), new HtmlWebpackPlugin({template: ./src/a.html, //处理模板filename: ../views/view1.html, //生成模板chunks: [index] // 只引入index.js})]}共勉望鞭策关于找一找教程网本站文章仅代表作者观点不代表本站立场所有文章非营利性免费分享。本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章希望广大程序员努力学习让我们用科技改变世界。[ES6转ES5(webpackbabel、指定多个js文件、自动注入)]http://www.zyiz.net/tech/detail-97333.html
