前端工程化

最新推荐文章于 2023-04-25 08:53:59 发布

小李小李~啦啦啦

最新推荐文章于 2023-04-25 08:53:59 发布

阅读量258

点赞数

文章标签： npm javascript json

本文链接：https://blog.csdn.net/weixin_43164078/article/details/121449847

版权

模块化相关规范

1.模块化：将单独的功能封装到一个模块中，模块之间相互隔离，可以通过特定的接口公开内部成员，也可以依赖背的模块
好处：方便代码的重用，从而提升开发效率，方便后期的维护
2.浏览器端的模块化规范：AMD CMD
服务器端的模块化规范：CommonJS
3.ES6模块化：
1.定义
（1）每个js文件都是一个独立的模块
（2）导入模块化成员使用import关键字
（3）暴露模块成员使用export关键字
2.Node.js通过babel体验ES6模块化
（1）npm install --save–dev @babel/core @babel/cli @babel/preset-env @babel/node

	（2）npm install --save @babel/polyfill
	（3）在项目根目录创建文件babel.config.js
	（4）babel.config.js文件

文件配置内容

const presets = [
    [
      "@babel/preset-env",
      {
        targets: {
          edge: "17",
          firefox: "60",
          chrome: "67",
          safari: "11.1",
        },
        useBuiltIns: "usage",
        corejs: "3.6.4",
      },
    ],
  ];
  
  module.exports = { presets };

	（5）通过npx babel-node index.js执行代码

3.ES6模块化的基本语法
1.默认到处/默认导入
- 默认导出：export default 默认导出的成员
代码实例

m1.js

let a=10
let b=20
let c=30
let d=40

function show(){
    console.log('11111111');
}

export default{
a,b,c,show
}

  - 默认导入：import 接收名称 from '模块标识符'
  代码实例

index.js

import m1 from './m1'
console.log(m1);

在每个模块中只允许使用唯一的一次export default，否则就会报错
2.按需导出/按需导入
按需导出:export let s1=10
按需导入:import {s1} from ‘模块标识符’
按需导入的名称必须与按需导出的名称一致
可以使用多次按需导出
m1.js

export let s1='12'
export let s2='34'
export let s3='56'
export function say(){
    console.log('asdfg');
}

import {s1,s2,s3,say} from './m1'
console.log(s1);
console.log(s2);
console.log(s3);
 console.log(say);

4.直接导入并执行模块代码：只想单纯的执行某个模块中的代码，并不需要得到模块中向外暴露的成员

webpack用法

1.webpack:流行的前端项目构建工具（打包工具），可以解决当前web开发中面临的困境
2.创建列表隔行变色的项目
（1）新建项目空白目录，运行 npm init -y命令，初始化包管理配置文件package.json
(2)新建src源代码目录
(3)新建src->index.html首页
(4)初始化首页的基本结构
(5)运行 npm install jquery -s命令安装jQuery
(6)通过模块化的形式，实现列表隔行变色的效果
在项目中安装和配置webpack
1.运行npm install webpack webpack-cli -D命令，安装webpack相关的包
2.在根目录中创建webpack.config.js的webpack相关的包
3.在webpack的配置文件中，初始化如下基本的配置

module.exports={
module:'development'
}

4.在package.json配置文件中的scripts节点下，新增dev脚本如下：

"scripts":{
"dev":"webpack"
}

5.在终端运行npm run dev命令，启动webpack进行项目的打包

webpack的基本使用

1.配置打包的入口和出口

打包的入口文件为src->index.js
打包的输出文件为dist->main.js

const path=require('path')
module.exports = {
	mode:"development", // 可以设置为development(开发模式), production(发布模式)
	entry:path.join(__dirname,'./src/index.js'),
	output:{
		path:path.join(__dirname,'./dist'),//输出文件的存放路径
		filename:'bundle.js' //输出文件的名称
	}
}

2.配置自动打包功能【每次修改后都需要手动打包】：
（1）运行命令 npm install webpack-dev-server -D 命令安装支持项目自动打包的工具
（2）修改package.json->scripts中的dev命令

"scripts":{
"dev":"webpack-dev-server"
}

（3）运行npm run dev 命令，重新进行打包
（4）在浏览器中访问http://localhost:8080地址，查看自动打包效果

一定要在安装对应的版本不然会报错

npm install webpack@4.29.0 -D
npm install webpack-cli@3.2.1 -D
npm install webpack-dev-server@3.1.14 -D

配置html-webpack-plugin预览页面
（1）运行npm install html-webpack-plugin@4.4.1 -D 命令安装生成预览的插件
（2）修改webpack.config.js文件头部区域。添加如下配置信息

const HtmlWebpackPlugin=require('html-webpack-plugin')
创建插件的实例对象
const htmlPlugin =new HtmlWebpackPlugin({
template:'./src/index.html',//指定要用的模板文件
filename:'index.html' //指定生成的文件名称，改文件存在内存当中，在目录中不显示
})

（3）修改webpack.config.js文件中向外暴露配置对象，新增以下的配置节点

moudle.exports=[{plugins:[htmlPlugin]}]

配置打包的相关参数
1、运行项目后自动打开浏览器
在package.json

--open 打包完成后自动打开浏览器页面
--host 配置IP地址
--post 配置端口
"scripts":{
	"dev":'webpack -dev-server --open --host 127.0.0.1 --port 8888'
}

webpack 中的加载器

1.通过loader 打包非js模块：在实际开发中，webpack只默认打包js模块，需要调用loader加载器才能可以正常打包费js的模块【loader加载器可以协助webpack打包处理特定的文件模块】
（1）less-loader可以打包处理.less文件
（2）sass-loader 可以打包处理.scss文件
（3）url-loader可以打包处理.css中与url路径相关的文件
2.webpack中加载器的基本使用
1.打包处理css文件

运行npm i style-loader css-loader -D命令安装处理css文件的loader
在webpack.config.js的modules数组中添加loader规则

modules:{
rules:[
{test:/\.csss$,use:['style-loader','css-loader']}
]
}
//其中test表示匹配的文件类型  use表述对应要调用的loader

2.打包处理less文件
（1）npm i less-loade@7.3.0r less -D命令【如果不用这个版本会报错】
（2）

module:{
	rules:[
	{test:/.less$/,use:['style-loader','css-loader','less-loader']}
]
}

3.打包处理scss文件
（1）npm i sass-loader@7.1.0 node-sass@4.14.1 -D命令
（2）新增规则
（3）引入
4.配置postCSS自动添加css的兼容前缀
（1）npm i postcss-loader@3.0.0 autoprefixer@8.0.0-D
（2）在项目中创建postcss的配置文件postcss.config.js并初始化以下的配置：

const autoprefixer=require('autoprefixer')
module.exports={
	plugins:[autoprefixer]
}

（3）修改规则在css的规则下面新增postcs-loader
4.打包样式表中的图片和字体的文件
（1）运行

npm i url-loader file-loader -D

（2）添加规则

test:'/\.jpg|png|git|bmp|ttf|eot|svg|woff|woff$/',
use:'url-loader'?limit=16940

其中?之后是loader的参数项
limit用来指定图片的大小【注意图片的大小一定要写好不然会报错】
5打包处理js中的高级语法
（1）安装babel转换器相关的包：npm i babel-loader @babel/core @babel/runtime -D
（2）安装babel语法插件相关的包 npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
（3）在项目根目录中创建babel配置文件babel.config.js并初始化基本配置

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

excude是排除项表示babel-loader不需要处理node_modules中的js文件
（4）在webpack.config.jd的数组中添加规则

{test://.js$/,use:'babel-loader',exclude:/node_modules/}

Vue单文件组件

1.传统组件的问题：全局定义的组件必须保证组件的名称不重复
字符串模板缺乏高亮显示
不支持CSS
2.单文件组件的组成.vue

template 组件的模板区域
script业务逻辑区域
style样式区域
基本结构

<template>
<div>
    <h1>这是APP的根组件</h1>
</div>
</template>

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

<style scoped>
h1{
    color: red;
}
</style>

2.webpack中配置vue组件的加载器
（1）运行命令

npm i vue-loader vue-template-compiler -D

（2）在webpack.config.js中配置文件，添加vue-loader的规则并在plugins中引入插件
3.在webpack项目中使用vue
（1）运行 npm i vue -s安装vue
（2）在index.src入口文件在，通过import Vue from 'vue’来导入vue构造函数
（3）创建vue的实例对象，并指定要控制的el区域
（4）通过render函数渲染APP根组件

import Vue from 'vue'
import app from'./components/app.vue'
const vm=new Vue({
    el:'#app1',
    render:h=>h(app)
})

4.webpack打包发布
在package.json文件中配置打包命令

"scripts":{
"build":"webpack -p"
}

package.json

{
  "name": "webCode3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888",
    "build":"webpack -p"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "D": "^1.0.0",
    "babel-core": "^6.26.3",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "jquery": "^3.6.0",
    "node-sass": "^4.14.1",
    "vue": "^2.6.14",
    "webpack-dev-server": "^3.1.14"
  },
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@babel/plugin-proposal-class-properties": "^7.16.0",
    "@babel/plugin-transform-runtime": "^7.16.4",
    "@babel/preset-env": "^7.16.4",
    "@babel/runtime": "^7.16.3",
    "@webpack-cli/serve": "^1.6.0",
    "autoprefixer": "^8.0.0",
    "babel-loader": "^7.1.5",
    "css-loader": "^0.28.11",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^4.4.1",
    "less": "^4.1.2",
    "less-loader": "^7.0.1",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^1.3.0",
    "url-loader": "^4.1.1",
    "vue-loader": "^15.9.8",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1"
  }
}

小李小李~啦啦啦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端工程化

模块化相关规范1.模块化：将单独的功能封装到一个模块中，模块之间相互隔离，可以通过特定的接口公开内部成员，也可以依赖背的模块好处：方便代码的重用，从而提升开发效率，方便后期的维护2.浏览器端的模块化规范：AMD CMD服务器端的模块化规范：CommonJS3.ES6模块化：1.定义（1）每个js文件都是一个独立的模块（2）导入模块化成员使用import关键字（3）暴露模块成员使用export关键字2.Node.js通过babel体验ES6模块化（1）npm install --save
复制链接

扫一扫