Wondering what’s next for npm?Check out our public roadmap! »

    weex-loader-for-didiprism
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.3 • Public • Published

    Weex Loader For DiDiPrism

    A webpack loader for Weex project with DiDiPrism.

    npm npm

    这是一个Webpack Loader,它用在基于VueWeex项目中,通过该Loader生成在小桔棱镜中使用的属性,辅助小桔棱镜做标签元素的唯一ID校验。

    快速上手

    安装

    Loader 已上传到 npm 仓库,使用下面的命令安装:

    npm i --save weex-loader-for-didiprism

    使用

    安装之后,就可以在Webpack配置中使用它了,针对.vue做语法转换及解析。配置文件示例代码如下:

    const webpackConfig = {
      entry: {
        index: './example/main.js'
      },
      mode: 'production', // 'development',
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: options.dev ? '[name].js' : '[name].js?[chunkhash]',
        chunkFilename: '[id].js?[chunkhash]',
        publicPath: options.dev ? '/assets/' : publicPath
      },
      module: {
        rules: [{
          test: /\.vue$/,
          use: [
            'vue-loader',
            // 注意:需要将 weex-loader-for-prism 放到数组的靠后位置,因为Webpack是按照从后往前的顺序执行loader
            'weex-loader-for-didiprism'
          ]
        },
        {
          test: /\.js$/,
          use: ['babel-loader'],
          exclude: /node_modules/
        }]
      }
    }

    效果

    Loader要实现的效果,是给带有点击事件的标签,自动添加一些小桔棱镜的属性,方便Native侧做元素的唯一标识。

    比如,我们业务代码里写的是这样一个组件:

    <template>
      <div @click="onClick">This is a subtitle.</div>
    </template>
    <script>
    export default {
      data: () => ({
    
      }),
      methods: {
        onClick() {
          console.log('---click the subtitle---')
        }
      }
    }
    </script>
    <style lang="less" scoped>
    
    </style>

    Webpack在经过weex-loader-for-didiprismvue-loader的打包之后,会将上面的Vue组件转换成这样一段AST代码:

    var render = function() {
      var _vm = this
      var _h = _vm.$createElement
      var _c = _vm._self._c || _h
      return _c(
        "div",
        {
          staticClass: "content-title",
          attrs: { prismFunctionName: "onClick", prismClassName: "content-title" },
          on: { click: _vm.onClick }
        },
        [_vm._v("This is a title.")]
      )
    }

    有点击事件监听的标签,会多出两个属性:prismFunctionNameprismClassName,它们就是给小桔棱镜Native侧使用的属性。这样,开发者就不用手动添加这些属性,主需要关注业务逻辑即可。

    协议

    Apache-2.0 license

    Install

    npm i weex-loader-for-didiprism

    DownloadsWeekly Downloads

    2

    Version

    1.0.3

    License

    Apache-2.0

    Unpacked Size

    5.69 kB

    Total Files

    4

    Last publish

    Collaborators

    • avatar