Настройка paperjs с помощью веб-пакета

Я пытаюсь настроить webpack и babel для проекта, который я делаю с paperjs. Я пытался объединить это (чтобы настроить webpack) и это (чтобы включить paperjs в комплект). Но я, должно быть, что-то делаю не так.

В консоли браузера появляется сообщение об ошибке:

Ошибка: не удается найти модуль "boids.paper.js" в webpackMissingModule

И в терминале:

ОШИБКА в./src/app.js Модуль не найден: Ошибка: не удается разрешить 'boids.paper.js' в '/Users/JS/babel_webpack_starter/src' @ ./src/app.js 3:18-43 @ multi (webpack)-dev-сервер / клиент? http://localhost:8081/ babel-polyfill ./src/app.js

вот мой webpack.config:

const path = require('path');

module.exports = {
  entry: {
    app: [
      'babel-polyfill',
      './src/app.js',
    ],
  },
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'app.bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
           presets: ['env', 'stage-0']
        }
      },
      {
        test: /\.paper.js$/,
        loader: "paper-loader"
      }
    ]
  }
}

вот мой package.json:

{
  "name": "babel_webpack_starter",
  "version": "1.0.0",
  "description": "Starter pack for compiling ES6+ apps to ES5",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server --output-public-path=/build/"
  },
  "author": "Brad Traversy",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-0": "^6.24.1",
    "paper": "^0.11.5",
    "paper-loader": "^0.1.2",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.4"
  }
}

вот мой app.js:

import { Boid } from 'boids.paper.js';

// Wait for canvas to be created
  window.onload = function () {

  let scope = executePaperScript('myCanvas');
}

В boids.paper.js у меня просто есть функция, которая экспортируется как

export const Boid = function(){}

и мой HTML выглядит так:

<script src="build/app.bundle.js"></script>
  <canvas id="myCanvas" width="300" height="300"></canvas>

Я чувствую себя довольно нервно из-за видимой свертки. Так что помощь очень ценится.

0 ответов

Другие вопросы по тегам