ES6模块导入、导出
1、命名导出:
var config = { version:'1.0.0' }; //一定要导出模块 export {config};
或直接导出
export var config = { version:'2.0.0' };
也可以导出函数
//导出命名函数 export function test() { console.log("test"); }
也可以像这样连续导出
//第一种方式: var person={ name:"张三", age:18 }; //导出命名函数 var test = function() { console.log("test"); }; //同时导出person对象和test函数 export {person,test};
也支持常规函数写法:
//第一种方式: var person={ name:"张三", age:18 }; //导出命名函数,这里可以常规命名 function test() { console.log("test111"); }; //或者 export {person,test};
导出的时候可以使用as对变量进行重命名
//第一种方式: var person={ name:"张三", age:18 }; //导出命名函数 function test() { console.log("test111"); }; //这里的test使用as进行了重命名 export {person,test as MyTest};
注意重命名后导出的变量也要对应:
import {MyTest} from './add-content.js'; import {person} from './add-content.js'; console.log(person); MyTest();
2、命名导入
加载带有命名导出的模块时,import后面要跟一对大括号来将导入的变量名包裹起来,并且这些变量名需要与导出的变量名完全一致。导入变量的效果相当于在当前作用域下声明了这些变量(name和add),并且不可对其进行更改,也就是所有导入的变量都是只读的。
import {test} from './add-content.js'; import {person} from './add-content.js'; import {config} from './add-content.js'; import func from './add-Content'; console.log(config); console.log(person); test(); func();
//也可以使用{}一次包裹两个变量 import {MyTest,person} from './add-content.js'; console.log(person); MyTest();
与命名导出类似,我们可以通过as关键字可以对导入的变量重命名。如:
//这里将MyTest再次重命名为importtest import {MyTest as importtest,person} from './add-content.js'; console.log(person); importtest();
使用import*as<myModule>可以把所有导入的变量作为属性值添加到<myModule>对象中,从而减少了对当前作用域的影响。
//在导入多个变量时,我们还可以采用整体导入的方式 import * as alltest from './add-content.js'; console.log(alltest.person); alltest.MyTest();
3、默认导出
与命名导出不同,模块的默认导出只能有一个
export default function() { console.log("默认的导出"); }
4、默认导入
import func from './add-Content.js';
func();
二、打包执行
依次执行以下命令:
//NPM初始化,会在目录中生成一个package.json文件,它相当于npm项目的说明书,里面记录了项目名称、版本、仓库地址等信息 npm init //同时安装webpack以及webpack-cli。webpack是核心模块,webpack-cli则是命令行工具 npm install webpack webpack-cli --save-dev //打包命令,指定入口文件和出口文件 //从入口文件处开始查找依赖并打包 npx webpack --entry=./index.js --output-filename=bundle.js --mode=development
使用npm scripts从上面的例子不难发现,我们每进行一次打包都要输入一段冗长的命令,这样做不仅耗时而且容易出错。为了使命令行指令更加简洁,我们可以在package.json中添加一个脚本命令。编辑工程中的package.json文件:
添加了build部分:
{ "name": "test", "version": "1.0.0", "description": "说明", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build":"webpack --entry=./index.js --output-filename=bundle.js --mode=development" }, "author": "feeling", "license": "ISC", "dependencies": { "webpack": "^5.27.1", "webpack-cli": "^4.5.0" } }
scripts是npm提供的脚本命令功能,在这里我们可以直接使用由模块所添加的指令(比如用“webpack”取代之前的“npx webpack”)。
现在,我们可以直接使用简单的命令来代替上面冗长的命令了:
npm run build
Webpack默认的源代码入口就是src/index.js,通过情况下,工程源代码放在/src中,输出资源放在/dist中,在工程中创建一个src目录,并将index.js和add-content.js移动到该目录下。对于资源输出目录来说,Webpack已经默认是/dist,我们不需要做任何改动。
现在可以省略掉entry的配置了。编辑package.json:
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build":"webpack --output-filename=bundle.js --mode=development" },
执行
npm run build
我们会得到同样的输出结果。
三、使用配置文件
查看npm和npx的帮助命令
npx webpack -h
npm webpack -h
从之前我们在package.json中添加的脚本命令来看,当项目需要越来越多的配置时,就要往命令中添加更多的参数,那么到后期维护起来就会相当困难。为了解决这个问题,可以把这些参数改为对象的形式专门放在一个配置文件里,在Webpack每次打包的时候读取该配置文件即可。Webpack的默认配置文件为webpack.config.js(也可以使用其他文件名,需要使用命令行参数指定)
webpack.config.js的文件内容如下:
module.exports = { entry: './src/index.js', output: { filename: 'bundle.js' }, mode: 'development' // 设置mode }
现在我们可以去掉package.json中配置的打包参数了:
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build":"webpack" },
执行
npm run build
可以得到正确的结果
入坑提示:
webpack和webpack-dev-server会产生兼容问题,对应安装的版本如下:
"webpack": "^3.6.0", "webpack-dev-server": "^2.9.1"
安装命令如下:
npm install webpack@3.6.0 --save-dev
npm install webpack-dev-server@2.9.1 --save-dev
webpack.config.js配置如下:
去掉mode配置
module.exports = { entry: './src/index.js', output: { filename: 'bundle.js' } }