标签:index babel 前端 dev js webpack 模块 工程化
模块化概述
- 传统开发模式的主要问题
- 命名冲突
- 文件依赖
- 模块化就是把单独的一个功能封装到一个模块中, 模块之前相互隔离, 但是可以通过特定的接口公开内部成员, 也可以依赖别的模块
- 方便代码重用, 提高开发效率, 方便后期维护
浏览器模块化规范
- AMD
- require.js
- CMD
- sea.js
服务器端模块化规范
- CommonJS
- 模块分为单文件模块和包
- 模块成员导出
module.exports
和exports
- 模块成员导入
require()
- ES6 模块化
- 是浏览器与服务器通用的模块化开发规范
- 每个js都是一个独立的模块
- 导入模块成员
import
- 导出模块成员
export
Node中通过babel体验模块化
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 }
npx babel-node index.js // 执行代码
默认导出 默认导入
默认导出
export default
只能使用一次默认导入
import from
// m1.js
// 定义私有成员
let a = 10
let b = 20
// 外界访问不到变量d, 因为没有暴露出去
let d = 30
function show(){
console.log(11)
}
// 将本模块的私有成员暴露出去
export default {
a,
b,
show
}
// index.js
import m1 from './m1'
console.log(m1)
按需导出 按需导入
// m1.js
// 按需导出可以使用多次
export let s1 = 10
export let s2 = 20
export function say() {
console.log('aaa')
}
// index.js
import {s1, s2 as s3, say} from './m1'
直接导入并执行模块代码
// m2.js
for (var i = 0; i < 3; i++) {
console.log(i)
}
import './m2'
webpack 概述
webpack 是一个流行的前端构建工具 (打包工具) 提供了友好的模块化支持 , 以及代码压缩混淆, 处理js兼容性问题 , 性能优化等强大的功能
在项目安装和配置 webpack
npm install webpack webpack-cli -D
// 创建 webpack.config.js
module.exports = {
// 编译模式
mode: 'development' // development production
}
// package.json 创建命令
"dev": "webpack"
npm run dev
配置打包的入口与出口
webpack 的 4.x 中默认约定
- 打包的入口文件为 src -- index.js
- 打包的输出文件为 dist -- main.js
// 如果要修改 可以再 webpack.config.js
const path = require('path')
module.exports = {
entry: path.join(__dirname, './src/index.js'), // 打包入口文件路径
output: {
path: path.join(__dirname, './dist'), // 输出文件存放路径
filename: 'bundle.js' // 输出文件名称
}
}
配置webpack 自动打包
npm install webpack-dev-server -D
- 修改 package.json script 中的 dev 为
webpack-dev-server
- 将index.html 中的引用 修改为
/bundle.js
注意 : webpack-dev-server
打包生成的输出文件, 默认是放到根目录下的 , 而且是虚拟的 看不见的
配置 html-webpack-plugin 生成预览页面
npm install html-webpack-plugin -D
const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlPlugin = new HtmlWebpackPlugin({ // 创建插件实例对象
template: './src/index.html', // 执行要用到的模板文件
filename: 'index.html' // 指定生成的文件的名称, 改文件存在于内存中, 在目录中不显示
})
module.exports = {
plugins: [HtmlPlugin] // plugins 数组时 webpack 打包期间会用到的一些插件列表
}
自动打包相关参数
--open 打包完成后自动打开浏览器页面
--host 配置IP地址
--port 配置端口
webpack-dev-server --open --host 127.0.0.1 --port 8888
标签:index,babel,前端,dev,js,webpack,模块,工程化 来源: https://www.cnblogs.com/article-record/p/12913886.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。