自己写的webpack项目如何使用可选链式操作符

一:安装转义babel

npm install --save-dev @babel/plugin-proposal-optional-chaining

二:在项目根目录创建.babelrc文件

配置如下内容

{
    "plugins": ["@babel/plugin-proposal-optional-chaining"]
}

 

三:在js中使用

//链式写法
if(res?.data?.obj){ // 判断data中是否有obj属性 并且非null非undefined

}

if(res?.data?.array?.length){ // 判断data中是否有array且存在长度

}

//普通写法
if(res&&res.data&&res.data.obj){

}

if(res&&res.data&&res.data.array&&res.data.array.length){

}

 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
使用 webpack 打包 Vue 项目,你需要按照以下步骤进行操作: 1. 首先,确保你的项目目录中已经安装了 Node.js 和 npm(或者 yarn)。 2. 在项目目录下创建一个新的 `package.json` 文件,可以通过运行 `npm init` 命令来生成该文件。 3. 在 `package.json` 文件中添加以下依赖项: ```json { "dependencies": { "vue": "^2.6.11" }, "devDependencies": { "webpack": "^4.44.2", "webpack-cli": "^3.3.12", "vue-loader": "^15.9.6", "vue-template-compiler": "^2.6.11" } } ``` 这些依赖项包括 Vue.js、WebpackWebpack CLI、Vue Loader 和 Vue Template Compiler。 4. 运行 `npm install`(或者 `yarn install`)命令来安装这些依赖项。 5. 在项目目录下创建一个 `webpack.config.js` 文件,并添加以下配置: ```javascript const path = require('path'); module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ } ] }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' }, extensions: ['*', '.js', '.vue', '.json'] } }; ``` 这个配置文件定义了入口文件、输出目录、使用的 loader 和解析规则等。 6. 在项目目录下创建一个 `src` 文件夹,并在其中创建一个 `main.js` 文件作为入口文件。 ```javascript import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', render: h => h(App) }); ``` 在 `main.js` 中,我们导入 Vue 和根组件 App,并通过创建一个 Vue 实例将 App 渲染到 `#app` 元素中。 7. 创建一个 `App.vue` 文件,作为根组件的模板。 ```vue <template> <div id="app"> <h1>Hello, Vue!</h1> </div> </template> <script> export default { name: 'App' } </script> <style> h1 { color: blue; } </style> ``` 8. 现在,可以运行 `npx webpack`(或者通过在 `package.json` 中配置脚本来运行)来构建你的项目。构建完成后,在 `dist` 文件夹中会生成一个名为 `bundle.js` 的文件。 9. 最后,将 `bundle.js` 引入你的 HTML 文件中,并在浏览器中打开该文件,你应该能够看到显示 "Hello, Vue!" 的页面。 以上就是使用 webpack 打包 Vue 项目的基本步骤。可以根据你的具体需求进行更多的配置,如代码分割、CSS 预处理等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

宋哈哈

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值