Have ideas to improve npm?Join in the discussion! »

    babel-plugin-transform-nej-module

    2.1.5 • Public • Published

    babel-plugin-transform-nej-module

    使用webpack打包nej。通过本插件,可以将nej的依赖管理系统转换为标准CMD格式,使得webpack能够对它进行打包。

    示例

    原NEJ模块文件

    // NEJ模块
    NEJ.define( [
        '../component.js',
        'text!./component.html',
        'text!./component.css'
    ],function(
        Component,
        html,
        css,
        pro,
        o, f, r
    ) {
        return uxModal;
    });

    转换后文件:

    // CommonJS模块
    (function nejModule() {
        var Component = require('../component');
        var html = require('./component.html');
        var css = require('./component.css');
     
        var css = "";
     
        var pro = exports;
     
        var o = {};
        var f = function () {};
        var r = [];
     
        module.exports = uxModal;
        return;
    }).call(window);

    使用方法

    1. 安装:npm install --save-dev babel-plugin-transform-nej-module babel-plugin-transform-remove-strict-mode;
    2. 在babel-loader中使用本插件,配合babel-plugin-transform-remove-strict-mode使用
    {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
            loader: 'babel-loader',
            options: {
                presets: [],
                plugins: ["transform-remove-strict-mode",'babel-plugin-transform-nej-module']
            }
        }
    },
    1. webpack.config.js中增加路径配置,根据NEJ所在位置自行调整
    {
        resolve: {
            alias: {
                'base': resolve('lib/nej/src/base'),
                'lib': resolve('lib/nej/src'),
                'ui': resolve('lib/nej/src/ui'),
                'util': resolve('lib/nej/src/util')
            }
        }
    }
    

    插件运行剖析

    流程图:

    1. 从文件的根开始:为什么要从根开始?在babel插件的不同的visitor中,难免会需要共享变量。这些共享变量的初始化,应该在每个文件第一次进入时进行。因此选择从根开始处理文件,以便在文件开始运行前做一些初始化处理。(Babel插件处理文件的顺序是并行的还是串行的,这一点尚有待验证。如果是串行的,在pre阶段进行初始化更好。)

    2. 取第一层节点:JS文件被Babylon parse成一棵AST树,取该树的第一层节点开始后续处理。为什么取第一层?在以NEJ为基础的前端工程中,所有的业务代码都包含在NEJ.define/define语句中,形成模块。 如果NEJ模块被包含在其他代码块中,那它不一定能被执行到,则该模块是无效的。 即使一定能执行到,在NEJ打包时,也不会将模块外部的代码打包。 如果从任意一条语句开始,可能会遇到其他文件中的define函数被识别为nej模块情况。 因此,我们只考虑一个文件就是一个nej模块的情况

    3. 判断NEJ模块:nej.define() 或者 define()函数被识别为NEJ模块

    4. 获取依赖列表和回调函数:处理了无依赖列表、依赖列表为空、回调函数为变量的情况。

    5. 进一步寻找回调函数(当回调函数为变量的时候):访问模块内代码的所有赋值语句,找到对回调函数变量赋值的语句。

    6. 将回调函数命名为nejModule:这一步很重要。用来定位回调函数的return和输出结果集空间的变动,并进行跟踪修改。

    7. 处理return:回调函数对应的return xxx为module.exports = xxx; return;

    8. 处理依赖

    • 初始化注入参数;
    • 标准化依赖路径;
    • 初始化css文件为空字符串,以兼容NEJ对css的处理,尽管这些处理在不使用define函数的时候是无效的。
    1. 处理输出结果集空间(设为pro):将所有使用到pro的代码替换为exports,(不直接module.exports = pro,因为需要处理循环依赖)

    2. 保证模块内this指向window:使用自执行函数将全部语句包装起来。

    未处理情况

    1. 尚存在两种罕见的异常未做处理: text!方式引入的css文件为空字符串,实际应该是css文件的内容; 输出结果集空间被直接修改为其它对象;
    2. NEJ对于不同平台的适配处理: {platform}/element.js被转化为./platform/element.js,实际应当同时引入./platform/element.patch.js

    如果你发现了任何其它异常情况,请一定要提出issue或直接联系我们,我们将会在最快时间内解决

    Install

    npm i babel-plugin-transform-nej-module

    DownloadsWeekly Downloads

    9

    Version

    2.1.5

    License

    ISC

    Unpacked Size

    182 kB

    Total Files

    49

    Last publish

    Collaborators

    • avatar