Awlet NPM | npm.io

awlet 脚手架

读 ɔlet 即 awl + let。

基于 Webpack 前端构建工具，支持前端项目的开发调试、合并压缩、上传 CDN，包含 HRM、按需编译、CSS extract、DLL、自定义资源路径（环境隔离）等功能。使同学们不需要关心构建流程细节而专注于业务开发。

使用方式

首先

mnpm install -g @mfe/awlet

awlet init

脚手架会首先执行 npm init 命令，初始化 package.json 文件，这里一路回车直到看到 Exec npm init command success.

接着开始技术栈的选择：

CSS 部分支持 Sass、Less、None 三个选项，根据自己的需要选择
JS 部分支持 React、Vue、None 三个选择，根据自己的需要选择

最后，执行 npm install 安装依赖。这里也把脚手架自动安装到项目的 node_modules 中，防止因为版本升级带来各种问题。

安装成功就可以愉快的开发了，例如：

awlet server

注意 .gitignore 文件需要忽略内容：

/node_modules
/awletdist
/.cache-loader

命令

init

初始化项目，生成目录结构、package.json 文件、awlet.config.js 配置文件（具体配置信息见下文），安装默认依赖。

awlet init

默认会在项目录下创建 ./app/pages/awletdemo/export.js 文件，你的应用要与 awletdemo 平级创建文件夹且要有一个 export.js 文件（入口文件），例如：./app/pages/xxx/export.js

export.js 文件的第一行可以写一行注释（配置注释）

//*awlet*//{"title": "xxx"}//*awlet*//

注释内容为一个 JSON 结构（在两个 //*awlet*// 中间，注意 JSON 语法的正确，否则无法正常解析）可以自定义 title、template、menu、statisitcs、extra 等配置。

可以使用命令 awlet add --page xxx 快速创建 xxx 模块。

然后可以在 export.js 文件中引入业务逻辑代码的入口文件。

server

启动一个服务。

awlet server

build

awlet build

DLL 功能：

awlet build --dll

压缩混淆：

awlet build --location cdn

build 后不上传 CDN：

awlet build --willNotUpload

注意可以在配置文件中提供 willNotUploadPublicPathPrefix: '/xxx/xxx' 配置来自定义资源路径。

upload

awlet upload

add

awlet add --page abc

增加业务模块，默认会创建 app/pages/abc/export.js，具体创建的路径与自动获取入口文件的规则有关。

配置

在项目根目录创建 awlet.config.js 文件，文件内容如下：

var path = require('path');
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');

module.exports = function() {
    return {
        /**
         * 自动生成，必选
         * init 命令时选择的技术栈
         * 如果需要更改可以在这里配置
         */
        technologyStack: {
            "cssPrecompiler":"Less",  // 'Less', 'Sass', 'None'
            "jsLib":"React"           // 'React', 'Vue', 'None'
        },
        /**
         * 可选
         * 页面 title
         * 所有页面共用，可在入口文件中单独配置
         */
        title: 'MFE',
        
        /**
         * 可选
         * 模板路径
         * 所有页面共用，可在入口文件中单独配置
         */
        template: './awlet.template.ejs',


        /**
         * 可选
         * 各种统计工具
         * 所有页面共用，可在入口文件中单独配置
         */
        statistics: {
            owl: {
                project: 'waimai_mfe_scoutbee'
            },
            perf: {
                token: '58aff131859ad666a0a37573'
            }
        },

        /**
         * 可选
         * meta 标签配置
         * 所有页面共用，可在入口文件中单独配置
         */
        metaTags: [
            '<meta charset="UTF-8" />',
        ],

        /**
         * 可选
         * 菜单配置
         * 所有页面共用，可在入口文件中单独配置
         */
        menu: {
            appkeys: 'scoutbee'
        },

        /**
         * 可选
         * 外链资源
         * 所有页面共用，可在入口文件中单独配置
         */
        extra: {
            js: ['//xxx.xxx.com/xxx.js'],
            css: ['//xs01.meituan.net/kui/1.0.41/css/@waimai/kangarooui.min.css']
        },

        /**
         * 可选
         * dll 配置
         */
        dll: [
            'lodash',
            'react',
            'react-dom'
        ],

        /**
         * 可选
         * 自定义入口前缀、入口文件名
         * 工具会根据前缀和文件名自动生成 entry 配置项
         */
        entryConfig: {
            srcPrefix: './app/pages/', // 默认值
            entryFilename: 'export.js', // 默认值
        },

        /**
         * 可选
         * 使用 Code Spliting 功能时配置
         * 可以在构建单页应用时根据路由拆分文件
         */
        chunkConfig: {
            test: /_chunk\.js/,       // 定义 chunk 文件名的匹配规则
            include: /app\/page\//,   // 在包含的目录下查找 chunk 文件
        },
        
        /**
         * 可选（废弃）
         * 多页面配置
         * 为了降低旧项目的改造成本提供该配置项
         * 旧项目也可以去掉，需要在相应的入口文件添加配置注释
         * 新项目不要使用该配置！！！
         */
        pageList: [
            {
              "title": "文件目录",
              "src": "./app/pages/demo/pageList/main.jsx"
            },
            {
              "title": "合同列表",
              "src": "./app/pages/clist/list.jsx"
            },
            {
              "title": "代理商合同",
              "src": "./app/pages/agent/detail/main.jsx"
            }
        ],

        /**
         * 可选
         * vendor 部分
         * 不在 dll 中且是比较通用的库
         * 会打包成 vendor.js/vendor.css
         */
        vendor: [
            'awlibs/promiseajax',
            'awlibs/awlvalidator',
            'module/common/common.scss',
        ],

        /**
         * 可选
         * cdn 配置
         */
        cdn: {
            "bucketName": "",
            "accessKeyId": "",
            "secretAccessKey": "",
            "publicPathPrefix": "",
        },

        // 不上传 CDN 的情况使用，指定静态资源的引用路径
        willNotUploadPublicPathPrefix: '/awletdist/cdn/',

        /**
         * 可选
         * 把需要编译的库 include 进来
         * 编译默认会把 node_modules 目录忽略
         */
        includeToLoaders: [
            'awlibs'
        ],
        
        /**
         * 必选
         * 与 webpack-dev-server 的配置一致
         */
        devServer: {
            port: 8802, // 必选
            
            // 可选
            proxy: {
                // 自定义页面路径前缀，为了和线上环境保持一致时可以使用
                '/**/pages/**': {
                    target: 'http://127.0.0.1:8801/pages/',
                    bypass: function (req, res) {
                        const path = req.path;
                        const tmp = path.replace(/.+\/pages\//, '/pages/');
                        return tmp;
                    }
                },
                '/download/mos/*': {
                    target: 'http://10.20.52.188:8490/',
                    secure: false
                },
                '**/api/**': {
                    target: 'http://contract.waimai.test.sankuai.com/',
                    secure: false,
                    changeOrigin: true
                },
                '/uicomponent/*': {
                    target: 'http://10.20.116.101:8490/',//test
                    secure: false
                }
            }
        },

        /**
         * 可选
         * 自定义别名
         */
        alias: {
            page: path.resolve(APP_PATH, "page"),
            component: path.resolve(APP_PATH, "component"),
            module: path.resolve(APP_PATH, "module"),
            tools: path.resolve(APP_PATH, "reactTools")
        },
        
        openBrowserUrl: 'http://127.0.0.1:8801/pages/awletdemo.html',

        /**
         * 可选
         * 自定义 webpack 配置
         * 参数为脚手架生成好的配置
         * 在这里可以对配置进行任意修改
         * 在工具没有提供相关功能时可以使用
         * 注意返回有效的配置对象
         */
        webpack(config) {
            return config;
        } 
    };
}

模板文件

注意：推荐不提供，工具会提供默认的模板

若在在项目根目录创建 awlet.template.ejs 文件，则项目中所有的页面都共用这一个模板文件

若项目需要多个模板文件，可以提供任意多个模板文件（注意要符合 ejs 语法规则），并且在相应的入口文件（export.js）提供配置注释，例如：

//{"title":"awletdemo", "template": "./xxx/123.ejs"}

template 配置项用来指定路径，相对于项目根目录

工具默认提供的模板文件内容如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
        
        <!-- Meta tag start -->
        <% if (customConfig.metaTags && customConfig.metaTags.length) { %>
            <% for(var i = 0; i < customConfig.metaTags.length; i++) { %>
                <% if (customConfig.metaTags[i]) { %>
                <%- customConfig.metaTags[i] %> 
                <% } %>
            <% } %>
        <% } %>
        <!-- Meta tag end -->
        
        <title>
            <%= customConfig.title || 'MFE' %>
        </title>
        
        <!-- Statistics start -->
        <!-- Perf start -->
        <% if (customConfig.statistics && customConfig.statistics.perf) { %>
        <%- include(customConfig.statistics.perf.templatePath, {customConfig: customConfig}) %>
        <% } %>
        <!-- Perf end -->
        
        <!-- Owl start -->
        <% if (customConfig.statistics && customConfig.statistics.owl) { %>
        <%- include(customConfig.statistics.owl.templatePath, {customConfig: customConfig}) %>
        <% } %>
        <!-- Owl end -->
        <!-- Statistics end -->
        
        <link rel="dns-prefetch" href="//s3combo.meituan.net/" />
        <link rel="dns-prefetch" href="//xs01.meituan.net/" />

        <!-- Extra css start -->
        <% if (customConfig.extra && customConfig.extra.css) { %>
            <% for(var i = 0; i < customConfig.extra.css.length; i++) { %>
                <% if (customConfig.extra.css[i]) { %>
                <link rel="stylesheet" href="<%= customConfig.extra.css[i] %>" />
                <% } %>
            <% } %>
        <% } %>
        <!-- Extra css end -->

        <!-- Menu start -->
        <% if (customConfig.menu) { %>
        <%- include(customConfig.menu.templatePath, {customConfig: customConfig}) %>
        <% } %>
        <!-- Menu end -->
    </head>
    <body>
        <div class="header"></div>
        <div class="page-sidebar"></div>
        <div class="page-content container-fluid" id="pageContent"></div>

        <% if (customConfig.dllUrl) { %>
            <script src="<%= customConfig.dllUrl %>"></script>
        <% } %>
        
        <!-- Extra js start -->
        <% if (customConfig.extra && customConfig.extra.js) { %>
            <% for(var i = 0; i < customConfig.extra.js.length; i++) { %>
                <% if (customConfig.extra.js[i]) { %>
                <script src="<%= customConfig.extra.js[i] %>"></script>
                <% } %>
            <% } %>
        <% } %>
        <!-- Extra js end -->
    </body>
</html>

开发

awlet 项目接入 babel 进行源码的编译，使得可以支持 Node 最低版本为 v6.10，在开发时可以使用最新的语法与特性，支持 import 语法。

npm start 启动 babel 并监控文件变化实时编译
使用 VSCode 提供 launch.json 文件可以进行源码 Debug
npm publish 进行发布，会先进行源码 build 的过程
需要把测试项目的依赖 node_modules 复制到 awlet 所在的目录

launch.json 的内容如下：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}/src/bin/awlet.js",
            "cwd":"${workspaceRoot}/../<项目文件名>",
            "outFiles": [ "${workspaceRoot}/dist/**/*.*" ],
            "args": [
                "version",
                // "server",
            ]
        }
    ]
}