Node.js webpack babel

问题：
高级语法，webpack不支持，需要babel来转换

class Person {static info = 'aaa'
}

1.安装转换器

npm i -d babel-loader @babel/core @babel/runtime

2.安装babel语法

npm i -d @babel/preset-env @babel/plugin-transform-runtime  @babel/plugin-proposal-class-properties

3.创建 babel 配置文件 babel.config.js

module.exports = { presets: [ '@babel/preset-env' ], plugins: [ '@babel/plugin-transform-runtime', '@babel/plugin-proposal-
class-properties’ ]
}

4.在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则

// exclude 为排除项，表示 babel-loader 不需要处理 node_modules 中的 js 文件,只转换自己写的代码
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

Node.js webpack babel相关推荐

Node.js webpack 打包的入口与出口
webpack 的 4.x 版本中默认约定: 打包的入口文件为 src -> index.js 打包的输出文件为 dist -> main.js 可以自定义: const path = r ...
Node.js webpack中导入vue的三种方法
在webpack 中使用 Vue: 安装 vue 模块 npm i vue -S 注意: 在 webpack 中, 使用 import Vue from 'vue' 导入的 Vue 构造函数,功能不完 ...
Node.js webpack中url-loader处理图片路径
默认情况下, webpack 无法处理 css 文件中的 url 地址,不管是图片还是字体库, 只要是 URL 地址,都处理不了,所以我们要使用 url-loader进行处理图片的url地址安装 ...
Node.js webpack vue组件
导入vue时会报错 import App from './components/App.vue' npm i -d vue-loader vue-template-compiler 在 webpack ...
Node.js webpack 加载器
问题:webpack 默认只能打包处理以 .js 后缀名结尾的模块,以下导入会报错 import './css/1.css' 打包处理css文件 1 npm i -d style-loader css ...
node.js webpack html-webpack-plugin
设置主页面 1.npm install -d html-webpack-plugin 2 webpack.config.js 文件头部区域 const HtmlWebpackPlugin = requ ...
Node.js webpack
npm i -d webpack webpack-cli 创建webpack.config.js module.exports = { mode: 'development' // dev模式不会对代 ...
Node.js webpack webpack-dev-server
1 npm i -d webpack-dev-server 2 修改 package.json -> scripts 中的 dev 命令 "scripts": { " ...
Node.js webpack Vue单文件
单文件组件的组成结构 template 组件的模板区域 script 业务逻辑区域 style 样式区域 <template>  ...

Node.js webpack babel

Node.js webpack babel相关推荐

最新文章

热门文章