[Photoshop CEP 7 开发] - vue.js 与 webpack 的配置

最近打算开发一个扩展（UI-DNA），打算用前端框架 vue.js ，同时使用 webpack 来实现 vue 的单文件化和一些文件复制操作。

在配置开发环境的时候遇到了一些问题，比如使用 webpack 来载入 vue 的时候，扩展的使用没有问题，但是远程调试时，调试界面会出现“Detached from the target（断开目标）”的错误，无法进行调试：

Detached from the target
Remote debugging has been terminated with reason: websocket_closed

"Detached from the target" 错误

这里就记录一下我在 CEP 中配置 vue.js + webpack 的方法。

package.json 依赖

要使用 webpack ，首先需要全局安装 webpack

npm install webpack -g

在项目中需要安装的有

• vue
• webpack 与它的各种载入器（ loader）
• babel（用来支持 ES6 语法，可选）

构建新项目的话，把下面依赖表中的项目加进 package.json （主要 vue 必须填到 dependencies 中）
然后在项目目录执行：

npm install 

依赖表:

  "devDependencies": {
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-plugin-transform-runtime": "^6.12.0",
    "babel-polyfill": "^6.13.0",
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-stage-0": "^6.5.0",
    "babel-runtime": "^6.11.6",
    "css-loader": "^0.24.0",
    "file-loader": "^0.9.0",
    "node-sass": "^3.8.0",
    "sass-loader": "^4.0.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "vue-html-loader": "^1.2.3",
    "vue-loader": "^8.5.2",
    "vue-style-loader": "^1.0.0",
    "webpack": "^1.13.2"
  },
  "dependencies": {
    "vue": "^1.0.26"
  }

其中 babel-preset-stage-0、babel-plugin-transform-runtime 是为了支持在代码中使用 async/await 语法。

webpack.config.js 配置

const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    entry: {
        main:['babel-polyfill','./index.js'],
    },
    output: {
        path: './bin/JS',
        filename: 'main.js'
    },
    target: 'web',

    module:{
        loaders:[
            {test: /\.vue$/, loader: 'vue'},
            {test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', query: {presets: ['es2015','stage-0']}},
            {test: /\.css$/, loader: 'style-loader!css-loader' },
            {test: /\.sass$/, loaders: ["style", "css", "sass"]},
            {test: /\.scss$/, loaders: ["style", "css", "scss"]},
            {test: /\.(png|jpg|jpeg)$/, loader: 'url?limit=8000&name=../bin/img/[name].[ext]'},

            ]},
    plugins: [   ],
    devtool: 'eval-source-map',
    vue: {
        loaders: {
            scss: 'style!css!sass',
            js: 'babel'
        }
    }
};

避免无法调试的错误

直接在 webpack 中载入 vue 会导致调试时出现“Detached from the target（断开目标）”错误（ Photoshop CC2015.3），虽然并不影响扩展正常的使用，但是没法调试给开发带来了极大的麻烦。要避免这个问题，可以直接在 html 文件中引入 vue.js 文件而不是在 webpack 中载入：
示例：

    




    weqweqweqwe

这样就能正常使用 vue 了。

远程调试控制台

---

其他