Webpack编译项目的总结

发表于 | 分类于 |

一晃眼,离上次写文章已经一个月了.这段时间我离开了我朋友的公司,重新加入了求职者大军,在求职过程中也发现了自己的不足的地方,也在面试官眼中看到了不一样的自己.言归正传,在加入新公司后就遇到了一个打包的问题.

npm 打包

大多数时候我们都在构建工具的帮助下完成了项目构建,打包的时候就是简单的一个命令

1
2
3
npm run build
// 或者
npm run build:xxx

npm 执行串行任务

在之前的开发中我配置过一个打包命令执行多个脚本,如:

1
2
3
"scripts": {
    "start": "npm run staticServer && npm run devServer"
}

然后我在 mac 上运行得好好的,一到了同事的电脑(windows)上就坏了,只执行前面那个任务,猜测是系统原因引起的,后来发现concurrently这个包可以跨平台执行多个任务,那就好办了,

1
2
3
4
5
6
npm i concurrently

// 修改package.json script字段
"scripts": {
    "start": "concurrently \"npm run staticServer\" \"npm run devServer\" "
}

这样就能同时执行多个任务了

设置编译时的环境变量并编译

在新公司加入到新项目中,同事说编译报错,又结合之前到开发机是 ubuntu,我第一反应就是系统差异所引发的 bug,打包命令如下:

1
2
3
4
5
"scripts": {
    "build:scene1": "VERSION=SCENE1 node scripts/build.js",
    "build:scene2": "VERSION=SCENE2 node scripts/build.js",
    "build:scene3": "VERSION=SCENE3 node scripts/build.js"
}

猜想是在编译时设置环境变量出错,试着在 mac 上跑了一次,成功.又查找相关文章,这里总结下 npm scripts 设置环境变量的方法.

linux&mac

1
2
3
4
5
"scripts": {
    "build:scene1": "VERSION=SCENE1 node scripts/build.js",
    "build:scene2": "VERSION=SCENE2 node scripts/build.js",
    "build:scene3": "VERSION=SCENE3 node scripts/build.js"
}

windows

1
2
3
4
5
6
7
set key=value

"scripts": {
    "build:scene1": "set VERSION=SCENE1 && node scripts/build.js",
    "build:scene2": "set VERSION=SCENE2 && node scripts/build.js",
    "build:scene3": "set VERSION=SCENE3 && node scripts/build.js"
}

跨平台

1
2
3
4
5
6
7
npm i cross-env -D

"scripts": {
    "build:scene1": "cross-env VERSION=SCENE1 node scripts/build.js",
    "build:scene2": "cross-env VERSION=SCENE2 node scripts/build.js",
    "build:scene3": "cross-env VERSION=SCENE3 node scripts/build.js"
}

修改 package.json 重新设置并运行,依然发生了错误,在 webpack 中发现错误原因: windows 平台在 node 运行时环境不能正确解释对象的中括号方法,遂将中括号属性方法改写为 eval() 执行对象属性,问题得以解决.参考代码如下:

1
2
3
4
5
6
7
8
9
// 原写法
const Version = env.raw.VERSION;
const p = obj[Version].p;
// 发生错误,obj[Version] 为undefined

// 新写法
const Version = env.raw.VERSION;
const p = eval("obj." + Version + ".p");
// 成功获取 obj[Version].p

[越努力，越幸运！]