npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

babel-plugin-transform-nej-module

v2.1.5

Published

transform nej module to require

Downloads

39

Readme

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或直接联系我们,我们将会在最快时间内解决