Webpack 搭建模块化的 Vue2 + JSX + Babel

青菜萝卜，各有所爱， 本文只是提供一种方法， 是否需要这样做，请自行考量([:smile])

1、基本概念

Webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。本文使用 Webpack5

Vue 是渐进式 JavaScript 框架, 本文使用 Vue2
Vue cli (命令行工具) 只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。默认使用模板语法, 如果使用 JSX 语法, 使用npm安装 就可以把模板解析器部分去掉

在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展

Babel 是一个 JavaScript 编译器。主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

2、步骤

1 初始化 新建MyVue文件夹, 打开终端工具, npm init -y初始化一个package.json文件

npm init -y

2 模块化
基本的模块化 可能会改动，请参照最新webpack英文版官网 https://webpack.js.org/

  1. 安装webpack
npm install webpack webpack-cli --save-dev
  1. 项目目录下创建 index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>起步</title>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>
  1. 项目目录下新建src文件夹,创建 index.js 文件,写入
console.log(111)

  1. 使用配置文件 webpack.config.js
    配置entry, output, loader, plugin等, 后面提供

  2. 加载CSS

npm install --save-dev style-loader css-loader

并把 loader 写入webpack.config.js
src目录下新建index.css文件

body {
  background-color: #bfa;
}

并且在index.js 中import

import './index.css'

6） 设置 HtmlWebpackPlugin

npm install --save-dev html-webpack-plugin
  1. 开发工具使用 webpack-dev-server
npm install --save-dev webpack-dev-server

配置文件:
package.json:

{
  "name": "myvue",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve --open",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "css-loader": "^6.5.1",
    "html-webpack-plugin": "^5.5.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.64.4",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.6.0"
  }
}

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.js'
  },
  devServer: {
    static: './dist',
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'title',
    }),
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  }
};

此时npm run build 可以生成一个背景色为#bfa 的网页

3 安装vue2

参照 https://cn.vuejs.org/v2/guide/installation.html#NPM (我安装的是2.6.14)

npm install vue

在index.js文件写入

import Vue from 'vue'

var vm = new Vue({
  el: '#app'
})
console.log(vm)
如果打印

如果打印如下, 即安装vue成功
在这里插入图片描述

4 安装babel
步骤：
1）安装babel-loader

npm install --save-dev babel-loader@8.1.0

2）安装 Babel

npm install --save-dev @babel/core@7.11.0 @babel/preset-env@7.11.0

3）创建Babel 的配置文件 .babelrc 并配置

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "> 0.25%, not dead"
      }
    ]
  ]
}

webpack配置中需要添加 babel-loader 配置

module.exports = {
  entry: ["babel-polyfill", "./src/index.js"],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/, // 排除文件
        loader: 'babel-loader'
      }
    ]
  }
}

说明：
创建配置文件 .babelrc， 放在项目根目录，此文件用于配置转码规则和插件，基本格式：

{
"presets":[], // 预设
"plugins":[]  // 插件
}

1.语法转译器
@babel/preset-env 转译包

npm install --save-dev @babel/preset-env

包含了所有现代js（es2015 es2016等）的所有新特性

2.API 和全局对象转译器
负责转译新增的 API 和全局对象，保证在浏览器的兼容性。
（比如 includes/Object.assign 等）

两种方式：
1. @babel/plugin-transform-runtime
2. @babel/polyfill

@babel/plugin-transform-runtime
全自动的，不会污染全局 API。
实例化方法比如 Array.includes(x)，babel-plugin-transform-runtime 无法转换，此时需要接入

@babel/polyfill

3.jsx,flow,TypeScript 等插件转译器
@babel/preset-react： React 项目
“presets”: [“@babel/preset-react”]

@babel/preset-typescript TS项目

规则：
include: 包含一些插件
exclude； 排除哪些插件

babel-loader 与 babel有版本配对要求
一般是 babel-loader8 + babel7 或 babel-loader7 + babel6 或 babel-loader6 + babel5

Vue+JSX

安装

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

配置文件添加

{
  "presets": ["@vue/babel-preset-jsx", ...]
}

index.js

// import './index.css'
import Vue from 'vue'
import { MyComponent } from './MyConpoment'
var vm = new Vue({
  el: '#app',
  components: {
    MyComponent
  },

  render() {
    return <MyComponent text='hello world'/>
  }
})
console.log(vm)

创建MyConpoment.js

export const MyComponent = {
  props: {
    text: String
  },
  render() {
    return <p>MyComponent: { this.text }</p>
  },
}

在这里插入图片描述
就支持JSX了

参考地址 Vue_JSX

只是简单地搭建了一下, 项目还有很多可以优化的，可以自行发挥~

# webpack # javascript # vue.js
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue