介绍一款非常有用的 npm 包 poet-node-scripts。这个包可以帮助我们更加高效地管理和运行我们的 node 项目。
安装
可以使用 npm 命令来进行安装：
--- ------- ----------------- ----------
使用
poet-node-scripts 以配置文件的形式来管理你的项目，通过简单的几行配置，你就可以完成以下事情：
- ES6+ 转译为 ES5
- Dev server 启动
- 打包构建
项目结构
我们先创建一个简单的项目结构。
---------- --- ------------- --- ---- - --- -------- --- ---------- --- ------------ --- --------------
其中，
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：
-
---------- -
-------- ----- -------
-------- ----- ------
-
-至此，我们可以在命令行中运行以下命令：
--- --- ----- - -- --- ------ --- --- ----- - ----
示例代码
我们先创建一个简单的项目，并添加一个按钮，点击后弹出一个提示框。
index.js：
----- ------ - -------------------------------- ---------------- - ------ ---- -------------- - -- -- - -------------- - ---------------------------------
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