前端模块化学习

江之岛的猫
588 阅读6分钟

1. 模块化相关规范

1.1 模块化概述

什么是模块化？

就是把单独的功能放在一个模块中，就是一个文件中，互相隔离，但是可以通过特定的接口公开内部成员，每个模块也可以依赖其他模块

1.2 浏览器端模块化规范

  • AMD和CMD规范

1.3 服务器端模块化规范

  • Commonjs
  • 模块分为单文件模块以及包模块
  • 模块成员导出使用：module.exports和exports
  • 模块成员导入使用：require('模块标识符')

1.4 大一统的ES6模块化规范

  • 它定义：
  • 每个js文件都是一个独立的模块
  • 导入模块使用import
  • 暴露导出模块使用export

Node.js中通过babel使用ES6模块化

  • 配置环境
  • 用npm安装
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node

npm install --save @babel/polyfill
  • 在根目录创建babel.config.js文件并配置
        const presets = [
            ["@babel/env", {
                targets: {
                    edge: "17",
                    firefox: "60",
                    chrome: "67",
                    safari: "11.1"
                }
            }]
        ]
        module.exports = { presets }//暴露这个js(模块)
  • 就可用npx babel-node ./index.js执行babel了

1.5 ES6模块化的基本语法

1.5.1 默认暴露和默认导入

  • 默认暴露导出使用export default

-每个js只能使用一次export default默认暴露

        let a = 10;
        let b = 10;
        let c = 10;
        function show() {
            console.log(1);
        }
        export default{
            a,c,show
        }
  • 默认导入使用import 名称 from '模块标识符'(路径)
  • import m1 from './m1.js'

1.5.2 按需暴露和按需导入

  • 按需暴露使用export let s1 =10这样
        export let s1 = 'aaa'
        export let s2 = 'bbb'
  • 按需导入使用import {s1 , s2 as ss2} from './m1.js'用花括号将要导入的东西括起来
  • 花括号中还可以使用as关键字即当作什么导入进来
        import m1,{s1,s2 as ss2,say} from './m1.js'

1.5.3 直接导入并执行模块代码

  • 有的时候模块没有成员只有一串代码，我们要执行它就直接import '地址'即可,它会在终端直接执行

2. webpack

2.1 webpack的基本使用

2.1.1 案例项目

  • 空白目录运行npm init -y命令，初始化包管理配置文件package.json
  • 新建src，源代码目录以及index.html首页
  • 运行npm install jquery -S安装jquery
  • 使用模块化的形式实现效果

2.1.2 webpack的安装和配置

  • 运行npm install webpack webpack-cli -D命令，安装webpack
  • 根目录创建webpack.config.js的配置文件
  • 配置文件中要初始化一些配置
        module.exports ={
            mode:'development'//或者production
        }
  • 在package.json中scripts属性对象中添加一条"dev":"webpack"
  • 在终端运行npm run dev命令，启动webpack进行项目打包

2.1.3 配置打包的入口与出口

  • 默认的入口是src的index.js
  • 默认的出口是dist的main.js
  • 要修改的话，需要在webpack.config.js中加配置
  • 先需要导入node.js专门操作路径的模块
        const path = require('path')
  • 再用模块暴露出对象，里面有entry和output属性
  • entry直接冒号后跟入口文件的绝对路径
  • output冒号后跟一个对象，里面有path绝对路径和filename输出文件名称的字符串
        module.exports ={
            mode:'development',//或者production
            entry:path.join(__dirname,'./src/index.js'),
            output:{
                path:path.join(__dirname,'./dist'),
                filename:'bundle.js'
            }
        }

2.1.4 webpack配置自动打包

  • 运行npm install webpack-dev-server -D 安装自动打包的工具
  • 修改package.json的scripts中dev命令，原来是webpack，修改为webpack-dev-server
        "dev": "webpack-dev-server"
  • 把index.html的script src改成根目录下的bundle.js
  • 这个bundle.js是被webpack放在内存中，并不在磁盘中，所以src应是/bundle.js
        <script src="/bundle.js"></script>
  • 现在打包后，就可以通过访问http://localhost:8080查看自动打包，但这时候只能看到根目录的东西，需要点击src才能看页面

2.1.5 html-webpack-plugin实时预览页面

  • 运行npm install html-webpack-plugin -D命令安装预览页面的插件
  • 修改webpack.config.js文件
  • 导入html-webpack-plugin包，得到一个构造函数
  • 构造这个对象并传入一个对象
  • 这个对象包含template:要用的模板文件和filename生产的文件名称，这个文件也是放在内存中的，不在目录中显示
        const htmlwebpackPlugin= require('html-webpack-plugin')
        const HtmlPlugin = new htmlwebpackPlugin({
            template:'./src/index.html',
            filename:'index.html'
        })
  • 将new出来的对象放在要暴露出来的代码块的plugins数组中
        plugins:[HtmlPlugin]
  • 这时候npm run dev就能实时预览页面了
  • 要自动打开页面预览的话需要在package.json 中的dev的webpack-dev-server后面加--open --host 127.0.0.1 --port 8888

2.2 webpack中的加载器

webpack默认只能打包js文件，其他类型的文件需要调用loader加载器才能打包

2.2.1 打包处理css文件

  • 先运行npm install style-loader css-loader -D命令，安装处理css的loader
  • 在webpack.config.js中添加module对象，里面有rules数组，数组里面有对象，包括test属性和use属性
  • test正则表达式，匹配以.css结尾的文件
  • use数组，里面是用什么loader来处理，调用的时候是从后往前调用
module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']}
        ]
    }

2.2.2 打包处理less文件

  • npm install less-loader less -D
  • 增加加载器匹配规则
{test:/\.less$/,use:['style-loader','css-loader','less-loader']}

2.2.3 打包处理scss文件

  • npm install sass-loader node-sass -D
  • 增加加载器匹配规则
{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}
  • 文件名是scss，而加载器是sass

2.2.4 配置postCSS自动添加css兼容前缀

  • npm i postcss-loader autoprefixer -D
  • 在项目根目录新建配置文件postcss.config.js并初始化，导入autoprefixer，暴露plugin数组，把这个放进数组中
        const autoprefixer = require('autoprefixer')
        module.exports = {
            plugins:[autoprefixer]
        }
  • 在webpack.config.js中.css那个规则添加postcss-loader
{test:/\.css$/,use:['style-loader','css-loader','postcss-loader']},

2.2.5 打包样式表中的图片和字体文件

  • npm i url-loader file-loader -D
  • webpack.config.js里添加loader规则
  • url-loader后面加参数limit，表示小于这个数值的图片会被转成base64图片
{ test: /\.JPG|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: ['url-loader?limit=44651'] },

2.2.6 打包js里的高级语法

  • npm i babel-loader @babel/core @babel/runtime -D
  • npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-class-properties -D
  • 根目录创建babel.config.js初始化配置
const presets = [
    ["@babel/env", {
        targets: {
            edge: "17",
            firefox: "60",
            chrome: "67",
            safari: "11.1"
        }
    }]
]
module.exports = { presets }
  • 在webpack.config.js中添加loader匹配规则
{ test: /\.js$/, use: ['babel-loader'], exclude: /node_modules/ },

3.Vue单文件组件

3.1 Vue单文件组件基本用法

  • 基本组成机构
  • template + script + style
  • script默认暴露
  • style加scoped以免与其他style起冲突
<template>

</template>

<script>
export default {
    data() {
        return {
            
        }
    },
    methods: {
        
    },
}
</script>

<style scoped>

</style>

3.2 webpack打包Vue单文件组件的加载器

  • npm i vue-loader vue-template-compiler -D
  • 在webpack.config.js中添加vue-loader配置项
  • 先导入插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')
  • 添加loader匹配规则
{ test: /\.vue$/, loader:'vue-loader' },
  • 添加插件
plugins: [HtmlPlugin,new VueLoaderPlugin()],

3.3 在webpack项目中使用vue

  • npm i vue -S
  • 在index.js中导入Vue
import Vue from 'vue'
  • 在index.js中导入App根组件
import App from './components/App.vue'
  • 创建Vue实例对象，指定vm要控制的页面区域，并通过render函数把指定的组件渲染出去
const vm = new Vue({
    el: '#app',
    render: h => h(App)
})

3.4 webpack打包发布

  • 进行整体打包
  • 在package.json中scripts中添加"build":"webpack -p"
  • npm run build

4.Vue脚手架

4.1 Vue脚手架的基本用法

4.1.1 安装步骤

  • 安装Vue脚手架npm install -g @vue/cli
  • 查看版本vue -V

4.1.2 创建vue项目

  • 交互式命令行创建vue create xxx
  • npm run serve
  • 图形化界面创建vue ui

4.2 Vue脚手架生成项目结构

4.3 Vue脚手架自定义配置

  • 通过package.json配置改端口号和自动打开页面预览
        "vue":{
            "devServer":{
              "port":8888,
              "open":true
            }
  }
  • 通过单独的配置文件配置
  • 在根目录创建vue.config.js
  • 里面配置
      module.exports = {
          devServer: {
              open: true,
              port: 8888
          }
      }

5.Element-UI的基本使用

5.1 基于命令行手动安装

  • npm i element-ui -S
  • 在main.js中导入组件和相关样式并使用Vue.use使用element-ui组件
      import ElementUI from 'element-ui'
      import 'element-ui/lib/theme-chalk/index.css'
      Vue.use(ElementUI)

5.2 基于图形化的界面安装

  • vue ui打开图形化界面，选择项目并在插件栏添加即可
avatar
文章
阅读
粉丝