怎么在vue-cli项目中使用啊？

zwellgood commented 7 years ago

import IScroll from '../assets/js/iscroll-zoom' import Hammer from '../assets/js/hammer.min' import lrz from '../assets/js/lrz.all.bundle' import PhotoClip from '../assets/js/PhotoClip'

这样直接import 会报错。。。 ERROR in ./src/assets/js/PhotoClip.js Module not found: Error: Cannot resolve module 'iscroll-zoom' in /home/zz/Desktop/vue-wechat/src/assets/js @ ./src/assets/js/PhotoClip.js 13:2-52

ERROR in ./src/assets/js/PhotoClip.js Module not found: Error: Cannot resolve module 'hammer' in /home/zz/Desktop/vue-wechat/src/assets/js @ ./src/assets/js/PhotoClip.js 13:2-52

ERROR in ./src/assets/js/PhotoClip.js Module not found: Error: Cannot resolve module 'lrz' in /home/zz/Desktop/vue-wechat/src/assets/js @ ./src/assets/js/PhotoClip.js 13:2-52

baijunjie commented 7 years ago

AMD或者CommonJS规范的模块在不依赖其他模块的情况下，可以使用ES6的import导入，例如：jQuery。原因是 Vue-cli 中好像可以兼容这两种规范的写法。但是如果有依赖其他模块，就不能直接使用import了。

if (typeof define === 'function' && define.amd) {
    define(['iscroll-zoom', 'hammer', 'lrz'], factory);
} else if (typeof exports === 'object') {
    module.exports = factory(require('iscroll-zoom'), require('hammer'), require('lrz'));
} else {
    root.PhotoClip = factory(root.IScroll, root.Hammer, root.lrz);
}

PhotoClip 使用的是UMD写法，问题在于 Vue-cli 无法识别 define(['iscroll-zoom', 'hammer', 'lrz'], factory) 中声明的依赖模块，因为它没有 require.config 来预先定义模块名以及关联的文件路径。因此需要针对 Vue-cli 环境修改代码。假设你的文件目录在 js/PhotoClip/ 下，你可以将这一段修改为以下形式：

if (typeof define === 'function' && define.amd) {
    define([
        '../../js/PhotoClip/iscroll-zoom',
        '../../js/PhotoClip/hammer.min',
        '../../js/PhotoClip/lrz.all.bundle'
    ], factory);
} else if (typeof exports === 'object') {
    module.exports = factory(
        require('../../js/PhotoClip/iscroll-zoom'),
        require('../../js/PhotoClip/hammer.min'),
        require('../../js/PhotoClip/lrz.all.bundle')
    );
} else {
    root.PhotoClip = factory(root.IScroll, root.Hammer, root.lrz);
}

亲测，可行。

baijunjie commented 7 years ago

目前已经可以直接在 vue-cli 中引入使用，无需修改代码。唯一要注意的是 .babelrc 文件的配置，需要开启支持 ES5 模块。

{
  "presets": [
    "env",
    "stage-2"
  ],
  "plugins": ["transform-runtime"],
  "comments": false,
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": [ "istanbul" ]
    }
  }
}

baijunjie / PhotoClip.js

怎么在vue-cli项目中使用啊？ #28