原文：https://blog.csdn.net/u012863664/article/details/72813941
第一步：写了一个导出模块 export.js
var name = "林玖"
var age = 18
var say = function(){
console.log(‘你好啊！‘)
}
// 批量导出
export {name,age,say}
第二步：写了一个导入模块 import.js,导入了export中的属性和方法
import {name,age,say} from ‘./export.js‘
console.log(name)
console.log(age)
say()
然后想在浏览器运行一下，但是不行哦
第三步：下载node.js和webpack
下载node.js可以通过官网: http://nodejs.cn/download/
然后打开node自带的命令行，输入如下命令全局安装webpack工具
npm install -g webpack
接着通过命令行工具定位到你的工程文件的根目录下, 再次安装webpack到你的工程中
npm install webpack
第四步：编写webpack.config.js
var webpack = require("webpack")
var path = require(‘path‘)
module.exports = {
entry: ‘./import.js‘,
output:{
path:path.resolve(__dirname,‘dist‘),
filename:‘bundle.js‘
},
module:{
loaders:[
{test:/\.js$/, loader:‘babel-loader‘}
]
}
}
第五步：编写html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Es6的导入导出</title>
</head>
<body>
导入进来了吗？
<script src="dist/bundle.js"></script>
</body>
</html>
第六步：配置.babelrc文件，在工程文件的根目录下创建一个.babelrc文件(注意前面有个点), 这个文件是用来描述我要根据什么样的规则、或者是将JS文件编译成什么版本的文件(比如说ES5). 该文件的内容如下:
{
"presets": [
"es2015"
],
"plugins":[]
}
第七步：创建package.json 文件，并安装相应的包
{
"name": "Moudle",
"version":"1.0.0",
"dependencies":{
},
"devDependencies": {
"babel":"^6.23.0",
"babel-cli":"6.24.1",
"babel-core":"6.26.3",
"babel-loader": "^7.0.0",
"babel-preset-es2015":"^6.24.1",
"webpack": "^2.7.0"
}
}
安装相应的包，就用通用的方法喽：
npm install （淘宝镜像的用：cnpm install）
第八步：使用webpack打包
使用命令行工具定位到项目的根目录下, 然后输入如下指令
webpack
等待一会儿就会发现工程文件的目录下多了一个dist文件夹, 里面放着的就是打包好了的bundle.js文件, 在HTML文件中通过下面的代码引入js文件
<script src="dist/bundle.js"></script>
最后打开F12：会发现打印出了导入的姓名年龄和方法。
原文地址：https://www.cnblogs.com/linjiu0505/p/10868143.html
时间： 2025-01-08 14:50:27