Vue全家桶笔记08(黑马vue)--模块化规范化webpack的使用等

最新推荐文章于 2022-07-23 20:02:28 发布

心湖中的石子

最新推荐文章于 2022-07-23 20:02:28 发布

阅读量145

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_43745804/article/details/118197423

版权

Vue 专栏收录该内容

48 篇文章 15 订阅

订阅专栏

1、大一统的模块化规范–ES6模块化

ES6模块化规范中定义：

每个js文件都是一个独立的模块
导入模块成员使用import关键字
暴露模块成员使用export关键字

2、node.js中通过babel体验es6模块化

安装babel模块
npm install babel
项目根目录创建babel.config.js
在babel.config.js文件中添加如下代码

const presets=[
	[
		"@babel/env",{
				targets:{
						edge:'17',
						firefox:'60',
						chrome:'67',
						safari:'11.1'
					}
			}
	]
];
moudle.exports={presets}

3、默认导出与默认导入

默认导出
export default 默认导出的成员
默认导入
import 接受名称 from ‘模块标识符’

m1.js

let a=10;
let c=20;

let d=20;


function show () {
  console.log('---------------')
}

export  default {
  a,c,show
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
hello default
<script type="module">
  import m1 from './js/m1.js';

  console.log(m1)
</script>
</body>
</html>

4、按需导出与按需导入

按需导出 export let s1 =10
按需导入 import { s1 } from ‘模块标识符’

m1.js

export  let e=110;
export  let f=200;
export  function say () {
  console.log('hello wolrd')
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
hello default
<script type="module">
import { e,f as ff,say}from './js/m1.js';

  console.log(e)
  console.log(ff)
  console.log(say)
</script>
</body>
</html>

5、直接导入并执行模块化代码

有时候，只想单纯执行某个模块中的代码，并不需要得到模块中向外暴露的成员，此时，可以直接导入并执行模块代码

m1.js

for(let i=0; i<3; i++){
  console.log(i)
}

default.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
hello default
<script type="module">
  import   './js/m1.js';


</script>
</body>
</html>

6、webpack及配置

前端项目构建工具（打包工具），可以解决当前web开发中锁面临的困境。

npm install webpack webpack-cli -d 安装相应的包
根目录下创建webpack.config.js的webpack配置文件
在webpack的配置文件中，初始化如下基本配置

module.exports = {
	mode:'development'; //mode用开发模式来指定构建模式
}

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

 “script”：{
	“dev”：“webpack” //script节点下的脚本，可以通过npm run执行
}

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

默认约定

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

webpack.config.js

module.exports = {
  mode:'development', //mode用开发模式来指定构建模式
  entry: path.join(__dirname,'./src/index.js'),
  output: {
    path:path.join(__dirname,'./dist'),
    filename: 'bundle.js'
  }

}

7、webpack自动打包

npm install webpack-dev-server -d 安装自动打包工具

心湖中的石子

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
Vue全家桶笔记08(黑马vue)--模块化规范化webpack的使用等

1、大一统的模块化规范–ES6模块化ES6模块化规范中定义：每个js文件都是一个独立的模块导入模块成员使用import关键字暴露模块成员使用export关键字2、node.js中通过babel体验es6模块化安装babel模块npm install babel项目根目录创建babel.config.js在babel.config.js文件中添加如下代码const presets=[ [ "@babel/env",{ targets:{ edge:'17',
复制链接

扫一扫

专栏目录