npm 包 amtal 使用教程-JavaScript中文网-JavaScript教程资源分享门户

npm 包 amtal 使用教程

简介

amtal 是一个快速构建前端应用的 npm 包，它支持自动化处理 js、css 代码并能够很方便地管理前端静态资源等。

安装

使用 npm 安装 amtal：

--- ------- ----- ----------

使用

在项目的根目录下创建文件 amtal.config.js，并在其中配置所需参数：

-------------- - -
    ------------ ------
    ------------- -------
    --- -
        ------ -----------
        ------- ---------------
        ---------- ---
        -------- ---
    --
    ---- -
        ------ ------------
        ------- -----------------
        -------- ---
    --
    ------------- ---------
    ------ ------
--

inputFolder 表示源代码目录，默认为 src
outputFolder 表示输出目录，默认为 dist
js.entry 表示 js 入口文件，默认为 index.js
js.output 表示 js 输出文件路径，默认为 js/bundle.js
js.externals 表示 js 打包时的外部依赖包，默认为空对象
js.plugins 表示 js 编译时需要使用的插件，默认为空数组
css.entry 表示 css 入口文件，默认为 index.css
css.output 表示 css 输出文件路径，默认为 css/bundle.css
css.plugins 表示 css 编译时需要使用的插件，默认为空数组
staticFolder 表示静态资源目录，默认为 static
watch 表示是否开启文件监听，默认关闭

在 package.json 中的 scripts 中添加对应命令：

-
  ---------- -
    ------ --------
    -------- ------ -------------
  -
-

开发时使用 npm run dev，可启动本地服务器并自动监听文件变化；生产构建时使用 npm run build，可打包压缩静态资源等。

示例

在源码目录下，可以新建如下的 index.js 和 index.css 文件：

-- --------
------------------ --------

-- ---------
---- -
    ----------------- -----
-

执行 npm run dev，会自动打开浏览器，此时会看到控制台输出 hello amtal，同时页面背景色变为灰色。

执行 npm run build，会在 dist 目录下生成压缩后的 js、css 文件和静态资源目录。

结论

amtal 可以极大地提高前端应用的开发效率，并且可以自行配置使打包结果符合自己的需求。建议开发团队尝试使用此工具。

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/600562a481e8991b448dfde7