介绍一款非常有用的 npm 包 poet-node-scripts。这个包可以帮助我们更加高效地管理和运行我们的 node 项目。
安装
可以使用 npm 命令来进行安装：
npm install poet-node-scripts --save-dev
使用
poet-node-scripts 以配置文件的形式来管理你的项目，通过简单的几行配置，你就可以完成以下事情：
- ES6+ 转译为 ES5
- Dev server 启动
- 打包构建
项目结构
我们先创建一个简单的项目结构。
my-project ├── node_modules/ ├── src/ │ └── index.js ├── index.html ├── package.json └── poet.config.js
其中，
src存放源代码index.html是主 html 文件poet.config.js是 poet-node-scripts 的配置文件
配置文件
我们需要编写一个 poet.config.js 文件来告诉 poet-node-scripts 我们的项目的具体配置。
-- -------------------- ---- -------
----- ---- - ---------------
----- --------- - - -- --- -- -
----- ------------ - ----------------------- -------------
-------------- - -
----------
-------------
-------- -------- - ------- ----- -- -- -
-- ------- ------ --
------ ------
-
-配置了 devServer 和 htmlTemplate 之后，webpack 配置可以在 webpack 函数内部进行管理。该函数会接收一些参数：
config当前的 webpack 配置isDev如果是 dev 环境，为trueisProd如果是 production 环境，为true
Scripts
在 package.json 中添加以下 scripts：
{
"scripts": {
"start": "poet start",
"build": "poet build"
}
}至此，我们可以在命令行中运行以下命令：
npm run start # 启动 dev server npm run build # 打包构建
示例代码
我们先创建一个简单的项目，并添加一个按钮，点击后弹出一个提示框。
index.js：
const button = document.createElement('button')
button.innerText = 'Click me!'
button.onclick = () => {
alert('Hello')
}
document.body.appendChild(button)index.html：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- -------------------- ------- ------ ------- ------------------------------- ------- -------
按照上面的步骤进行配置，运行 npm run start，打开浏览器访问 http://localhost:3000，即可看到按钮。
运行 npm run build，可在 dist 目录下生成打包后的文件，此时打开 index.html 即可看到同样的按钮。
尝试更改 index.js 中的代码，保存后页面会立即自动刷新。
这就是 poet-node-scripts 带给我们的高效开发体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005613c81e8991b448df3d0