npm 包 amtal 使用教程

简介

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

安装

使用 npm 安装 amtal：

npm install amtal --save-dev

使用

在项目的根目录下创建文件 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 中添加对应命令：

{
  "scripts": {
    "dev": "amtal",
    "build": "amtal --production"
  }
}

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

示例

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

// index.js
console.log('hello amtal');

// index.css
body {
    background-color: #eee;
}

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

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

结论

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

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562a481e8991b448dfde7