VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > temp > JavaScript教程 >
  • 第五十六篇:webpack的loader(四) -打包js中的高级语法

好家伙,

 

1.打包处理js文件中的高级语法

webpack只能打包处理一部分高级的JavaScript 语法。对于那些webpack无法处理的高级js 语法,需要借

助于 babel-loader 进行打包处理。

例如 webpack无法处理下面的JavaScript代码:

 

复制代码
 // 1.定义了名为 info 的装饰器
   function info(target) {
 // 2.为目标添加静态属性 info
   target.info = 'Person info'
}

// 3.为Person 类应用 info 装饰器
@info 
class Person {}

 //4.打印 Person 的静态属性 info
 console.log(Person.info)
复制代码

此处运用到了一个名为装饰器的高级语法,webpack无法对其进行打包,

(基于干不过就叫人的思想)这里我们借助于 babel-loader 进行打包处理。

(babel是一个插件  => babel是webpack的插件 => 所以babel是插件的插件)

 

2.babel-loader的安装和配置

2.1 安装 babel-loader 相关的包


运行如下的命令安装对应的依赖包:

npm i babel-loader@8.2.2 @babel/core@7.14.6@babel/plugin-proposal-decorators@7.14.5-D

 

在webpack.config.js的 module -> rules 数组中,添加 loader 规则如下:

 // 注意:必须使用 exclude 指定排除项;因为 node_modules 目录下的第三方包不需要被打包
 { test: /\.jss/, use: 'babel-loader', exclude: /node_modules/ }

 

2.2配置 babel-loader

在项目根目录下,创建名为babel.config.js的配置文件(与webpack有个webpack.config.js配置文件一样),定义Babel的配置项如下:

复制代码
module.exports={
// 声明 babel 可用的插件
// 将来 ,webpack 在调用 babel-loader的时候,会优先加载plugins插件来使用
plugins: [['@babel/plugin-proposal-decorators',{ legacy: true }]]

}
复制代码

 

插件的的可选配置项,

可以直接上官网文档去找Babel 中文文档 · 下一代 JavaScript 编译器 (docschina.org)

 

webpack的配置是较难的,一般平时就直接用第三方的默认配置了,

这里是浅显的了解一下webpack的原理

 

That's all

 

出处:https://www.cnblogs.com/FatTiger4399/p/16020017.html

相关教程