ES module中的import和export语法等现在还不受浏览器和node支持(我的node版本是v10.14.2,运行的时候是会报错的),所以这里通过使用webpack配置babel来执行得到结果
npm init
初始化内容
在package.json中的script加入build,当执行npm run build时执行webpack
{
"name": "babel-config",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "",
"license": "ISC"
}
新建配置文件webpack.config.js,src文件夹用于存放源文件,dist文件夹用于存放打包后的文件,在src目录下新建main.js和module.js
写入对应的内容
// main.js
import { a } from './module.js'
console.log(`a:${a}`)
// module.js
let a = 1;
export { a };
配置webpack.config.js
const path = require("path");
module.exports = {
mode: "development",
entry: {
main: "./src/main.js",
module: "./src/module.js"
},
output: {
// 指定打包好的文件放置的目录
path: path.resolve(__dirname, "dist"),
// 使用哈希,这里就会生成一堆乱码
filename: "[name].js"
},
module: {
rules: [
// 配置js的loader
{
test: /\.js$/,
use: {
// 打包编译ES6语法
loader: "babel-loader",
options: {
presets: [
// 用于将高级语法转换为低级语法
"@babel/preset-env"
]
}
},
exclude: /node_modules/
},
]
}
}
安装所需要的依赖包
复制这里的package.json的依赖然后cnpm i
即可
如果没有淘宝镜像就用npm i
{
"name": "babel-config",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "",
"license": "ISC",
"dependencies": {
"@babel/core": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"babel-loader": "^8.0.6"
}
}
最后在命令行执行npm run build
执行打包后的main.js,如果能正常打印出a:1,则说明配置成功