Code Monkey home page Code Monkey logo

eleventy-load-js's Introduction

eleventy-load-js

npm version npm downloads License Prettier

Bundle and minify JavaScript with webpack using eleventy-load.

Getting Started

Firstly, you'll need to install eleventy-load (if you haven't already) and eleventy-load-js. You'll probably want to use eleventy-load-js in combination with eleventy-load-html and eleventy-load-file, so we'll install those as well. The latter writes the output of eleventy-load-js to a file which will be saved in Eleventy's output directory, which is the behavior you often want for JavaScript.

npm install --save-dev eleventy-load eleventy-load-js eleventy-load-html eleventy-load-file

Then you can set up eleventy-load-js using a rule in your eleventy-load options.

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(require("eleventy-load"), {
    rules: [
      {
        test: /\.html$/,
        loaders: [
          {
            loader: require("eleventy-load-html"),
          },
        ],
      },
      {
        test: /\.js$/,
        loaders: [
          {
            loader: require("eleventy-load-js"),
            options: {
              mode: "production",
            },
          },
          {
            loader: require("eleventy-load-file"),
          },
        ],
      },
    ],
  });
};

Options

Name Type Default Description
webpack Object See below Options for webpack

webpack

Type: Object

Pass options to the webpack configuration. By default, eleventy-load-js is configured to use the project's input directory as the webpack context and uses an in-memory file system for webpack's output.

{
  context: path.resolve(this.config.inputDir),
  entry: [path.resolve(this.config.inputDir, this.resourcePath)],
  mode: "production",
}

eleventy-load-js's People

Contributors

acccent avatar gregives avatar

Stargazers

avatar avatar

Watchers

avatar avatar

eleventy-load-js's Issues

Having trouble loading a png from JS

Hi,

I'm trying to import a png to use as a texture with three.js, but I get an error. I've created a super slim setup to repro.

src/index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script defer src="script.js"></script>
  </head>
  <body></body>
</html>

src/script.js:

import starPNG from './star.png';
import { TextureLoader } from 'three';
const spriteMap = new TextureLoader().load(starPNG);

.eleventy.js:

const load = require('eleventy-load');
const loadHtml = require('eleventy-load-html');
const loadJs = require('eleventy-load-js');
const loadFile = require('eleventy-load-file');

module.exports = function (eleventyConfig) {

  eleventyConfig.addPlugin(load, {
    rules: [
      {
        test: /\.(html|md)$/,
        loaders: [ { loader: loadHtml, }, ],
      },
      {
        test: /\.js$/,
        loaders: [
          { loader: loadJs, },
          {
            loader: loadFile,
            options: { name: '[name].js', publicPath: '/', },
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        loaders: [
          {
            loader: loadFile,
            options: { name: '[name].[ext]', publicPath: '/assets/img', },
          },
        ],
      },
    ],
  });

  return { dir: { input: 'src', }, };
};

(plus any random star.png in src)

When trying to build, I get the following:

[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] > Having trouble writing template: _site/index.html

`TemplateWriterWriteError` was thrown
[11ty] > ModuleParseError: Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
Here's the full (but anonymized) debug output, but it doesn't say much: 
> set DEBUG=* & eleventy

  Eleventy:cmd command: eleventy { _: [], quiet: null, version: false, watch: false, dryrun: false, help: false, serve: false, passthroughall: false, incremental: false } +0ms
  Eleventy:EventBus Setting up global EventBus. +0ms
  Eleventy:UserConfig Resetting EleventyConfig to initial values. +0ms
  Eleventy:UserConfig Adding universal filter 'slug' +11ms
  Eleventy:UserConfig Adding universal filter 'slugify' +0ms
  Eleventy:UserConfig Adding universal filter 'url' +0ms
  Eleventy:UserConfig Adding universal filter 'log' +1ms
  Eleventy:UserConfig Adding universal filter 'serverlessUrl' +0ms
  Eleventy:UserConfig Adding universal filter 'getCollectionItem' +0ms
  Eleventy:UserConfig Adding universal filter 'getPreviousCollectionItem' +1ms
  Eleventy:UserConfig Adding universal filter 'getNextCollectionItem' +0ms
  Eleventy:TemplateConfig rootConfig { templateFormats: [ 'liquid',   'ejs', 'md',       'hbs', 'mustache', 'haml', 'pug',      'njk', 'html',     '11ty.js' ], pathPrefix: '/', markdownTemplateEngine: 'liquid', htmlTemplateEngine: 'liquid', dataTemplateEngine: false, htmlOutputSuffix: '-o', jsDataFileSuffix: '.11tydata', keys: { package: 'pkg', layout: 'layout', permalink: 'permalink', permalinkRoot: 'permalinkBypassOutputDir', engineOverride: 'templateEngineOverride', computed: 'eleventyComputed' }, dir: { input: '.', includes: '_includes', data: '_data', output: '_site' }, handlebarsHelpers: {}, nunjucksFilters: {} } +0ms
  Eleventy Setting process.env.ELEVENTY_ROOT: '<...>' +0ms
  Dev:Eleventy:TemplateConfig Merging via getConfig (first time) +0ms
  Eleventy:TemplateConfig Merging config with <...>/.eleventy.js +3ms
  Eleventy:UserConfig Adding anonymous plugin +879ms
  Eleventy:UserConfig Adding universal shortcode 'load' +1ms
  Eleventy:TemplateConfig localConfig: { dir: { input: 'src' }, templateFormats: undefined, transforms: { 'eleventy-load': [Function (anonymous)] }, linters: {}, globalData: {}, layoutAliases: {}, passthroughCopies: {}, liquidOptions: {}, liquidTags: {}, liquidFilters: { slug: [Function (anonymous)], slugify: [Function (anonymous)], url: [Function (anonymous)], log: [Function (anonymous)], serverlessUrl: [Function (anonymous)], getCollectionItem: [Function (anonymous)], getPreviousCollectionItem: [Function (anonymous)], getNextCollectionItem: [Function (anonymous)] }, liquidShortcodes: { load: [Function (anonymous)] }, liquidPairedShortcodes: {}, nunjucksEnvironmentOptions: {}, nunjucksFilters: { slug: [Function (anonymous)], slugify: [Function (anonymous)], url: [Function (anonymous)], log: [Function (anonymous)], serverlessUrl: [Function (anonymous)], getCollectionItem: [Function (anonymous)], getPreviousCollectionItem: [Function (anonymous)], getNextCollectionItem: [Function (anonymous)] }, nunjucksAsyncFilters: {}, nunjucksTags: {}, nunjucksGlobals: {}, nunjucksAsyncShortcodes: {}, nunjucksShortcodes: { load: [Function (anonymous)] }, nunjucksAsyncPairedShortcodes: {}, nunjucksPairedShortcodes: {}, handlebarsHelpers: { slug: [Function (anonymous)], slugify: [Function (anonymous)], url: [Function (anonymous)], log: [Function (anonymous)], serverlessUrl: [Function (anonymous)], getCollectionItem: [Function (anonymous)], getPreviousCollectionItem: [Function (anonymous)], getNextCollectionItem: [Function (anonymous)] }, handlebarsShortcodes: { load: [Function (anonymous)] }, handlebarsPairedShortcodes: {}, javascriptFunctions: { slug: [Function (anonymous)], slugify: [Function (anonymous)], url: [Function (anonymous)], log: [Function (anonymous)], serverlessUrl: [Function (anonymous)], getCollectionItem: [Function (anonymous)], getPreviousCollectionItem: [Function (anonymous)], getNextCollectionItem: [Function (anonymous)], load: [Function (anonymous)] }, pugOptions: {}, ejsOptions: {}, markdownHighlighter: null, libraryOverrides: {}, dynamicPermalinks: true, useGitIgnore: true, ignores: Set(1) { 'node_modules/**' }, dataDeepMerge: true, watchJavaScriptDependencies: true, additionalWatchTargets: [], browserSyncConfig: {}, chokidarConfig: {}, watchThrottleWaitTime: 0, frontMatterParsingOptions: undefined, dataExtensions: Map(0) {}, extensionMap: Set(0) {}, quietMode: false, events: AsyncEventEmitter { _events: [Object: null prototype] { beforeWatch: [Function (anonymous)] }, _eventsCount: 1, _maxListeners: undefined, [Symbol(kCapture)]: false }, plugins: [ { plugin: [Function (anonymous)], options: [Object], pluginNamespace: '' } ], useTemplateCache: true, precompiledCollections: {}, dataFilterSelectors: Set(0) {} } +879ms
  Eleventy:TemplateConfig overrides: {} +4ms
  Eleventy:TemplateConfig Current configuration: { templateFormats: [ 'liquid',   'ejs', 'md',       'hbs', 'mustache', 'haml', 'pug',      'njk', 'html',     '11ty.js' ], pathPrefix: '/', markdownTemplateEngine: 'liquid', htmlTemplateEngine: 'liquid', dataTemplateEngine: false, htmlOutputSuffix: '-o', jsDataFileSuffix: '.11tydata', keys: { package: 'pkg', layout: 'layout', permalink: 'permalink', permalinkRoot: 'permalinkBypassOutputDir', engineOverride: 'templateEngineOverride', computed: 'eleventyComputed' }, dir: { input: 'src', includes: '_includes', data: '_data', output: '_site' }, handlebarsHelpers: { slug: [Function (anonymous)], slugify: [Function (anonymous)], url: [Function (anonymous)], log: [Function (anonymous)], serverlessUrl: [Function (anonymous)], getCollectionItem: [Function (anonymous)], getPreviousCollectionItem: [Function (anonymous)], getNextCollectionItem: [Function (anonymous)] }, nunjucksFilters: { slug: [Function (anonymous)], slugify: [Function (anonymous)], url: [Function (anonymous)], log: [Function (anonymous)], serverlessUrl: [Function (anonymous)], getCollectionItem: [Function (anonymous)], getPreviousCollectionItem: [Function (anonymous)], getNextCollectionItem: [Function (anonymous)] }, transforms: { 'eleventy-load': [Function (anonymous)] }, linters: {}, globalData: {}, layoutAliases: {}, passthroughCopies: {}, liquidOptions: {}, liquidTags: {}, liquidFilters: { slug: [Function (anonymous)], slugify: [Function (anonymous)], url: [Function (anonymous)], log: [Function (anonymous)], serverlessUrl: [Function (anonymous)], getCollectionItem: [Function (anonymous)], getPreviousCollectionItem: [Function (anonymous)], getNextCollectionItem: [Function (anonymous)] }, liquidShortcodes: { load: [Function (anonymous)] }, liquidPairedShortcodes: {}, nunjucksEnvironmentOptions: {}, nunjucksAsyncFilters: {}, nunjucksTags: {}, nunjucksGlobals: {}, nunjucksAsyncShortcodes: {}, nunjucksShortcodes: { load: [Function (anonymous)] }, nunjucksAsyncPairedShortcodes: {}, nunjucksPairedShortcodes: {}, handlebarsShortcodes: { load: [Function (anonymous)] }, handlebarsPairedShortcodes: {}, javascriptFunctions: { slug: [Function (anonymous)], slugify: [Function (anonymous)], url: [Function (anonymous)], log: [Function (anonymous)], serverlessUrl: [Function (anonymous)], getCollectionItem: [Function (anonymous)], getPreviousCollectionItem: [Function (anonymous)], getNextCollectionItem: [Function (anonymous)], load: [Function (anonymous)] }, pugOptions: {}, ejsOptions: {}, markdownHighlighter: null, libraryOverrides: {}, dynamicPermalinks: true, useGitIgnore: true, ignores: Set(1) { 'node_modules/**' }, dataDeepMerge: true, watchJavaScriptDependencies: true, additionalWatchTargets: [], browserSyncConfig: {}, chokidarConfig: {}, watchThrottleWaitTime: 0, frontMatterParsingOptions: undefined, dataExtensions: Map(0) {}, extensionMap: Set(0) {}, quietMode: false, events: AsyncEventEmitter { _events: [Object: null prototype] { beforeWatch: [Function (anonymous)] }, _eventsCount: 1, _maxListeners: undefined, [Symbol(kCapture)]: false }, plugins: [ { plugin: [Function (anonymous)], options: [Object], pluginNamespace: '' } ], useTemplateCache: true, precompiledCollections: {}, dataFilterSelectors: Set(0) {} } +2ms    
  Eleventy Eleventy warm up time (in ms) 1265.1933999955654 +890ms
  Eleventy:TemplatePassthroughManager Resetting counts to 0 +0ms
  Eleventy:EleventyFiles .gitignore ignoring: ./_site +0ms
  Eleventy:EleventyFiles .gitignore ignoring: ./_tmp +0ms
  Eleventy:EleventyFiles .gitignore ignoring: ./.DS_Store +0ms
  Eleventy:EleventyFiles .gitignore ignoring: ./.history/** +1ms
  Eleventy:EleventyFiles .gitignore ignoring: ./node_modules/** +0ms
  Eleventy:EleventyFiles .gitignore ignoring: ./.vscode +0ms
  Eleventy:EleventyFiles .gitignore ignoring: ./_site +0ms
  Eleventy:EleventyFiles .gitignore ignoring: ./*git +0ms
  Eleventy:EleventyFiles .gitignore ignoring: ./package-lock.json +1ms
  Eleventy:EleventyFiles .gitignore ignoring: ./.env +0ms
  Eleventy:EleventyFiles .eleventyignore,src/.eleventyignore ignoring: ./node_modules/** +1ms
  Eleventy:EleventyFiles .eleventyignore,src/.eleventyignore ignoring: ./README.md +0ms
  Eleventy Directories:
  Eleventy Input (Dir): src
  Eleventy Input (File): undefined
  Eleventy Data: src/_data
  Eleventy Includes: src/_includes
  Eleventy Layouts: undefined
  Eleventy Output: _site
  Eleventy Template Formats: liquid,ejs,md,hbs,mustache,haml,pug,njk,html,11ty.js
  Eleventy Verbose Output: false +11ms
  Eleventy:EleventyFiles Searching for: [ './src/**/*.liquid', './src/**/*.ejs', './src/**/*.md', './src/**/*.hbs', './src/**/*.mustache', './src/**/*.haml', './src/**/*.pug', './src/**/*.njk', './src/**/*.html', './src/**/*.11ty.js', './src/**/*.11ty.cjs' ] +11ms
  Eleventy:TemplateWriter Found: [ './src/index.html' ] +0ms
  Eleventy:TemplatePassthroughManager TemplatePassthrough copy started. +29ms
  Eleventy:TemplatePassthroughManager `addPassthroughCopy` config API paths: {} +0ms
  Eleventy:TemplatePassthroughManager `addPassthroughCopy` config API normalized paths: [] +0ms
  Dev:Eleventy:Template new Template('./src/index.html') +0ms
  Dev:Eleventy:Template './src/index.html' getMapped() +1ms
  Dev:Eleventy:Template './src/index.html' getData() +1ms
  Dev:Eleventy:TemplateData getLocalDataPaths('./src/index.html') +0ms
  Dev:Eleventy:TemplateData parsed.dir: './src' +0ms
  Eleventy:TemplateData Using '.11tydata' to find data files. +0ms
  Dev:Eleventy:TemplateData allDirs: [ './src' ] +1ms
  Dev:Eleventy:TemplateData dirStr: './src'; inputDir: './src' +1ms
  Eleventy:TemplateData getLocalDataPaths('./src/index.html'): [ './src/index.11tydata.js', './src/index.11tydata.cjs', './src/index.11tydata.json', './src/index.json', './src/src.11tydata.js', './src/src.11tydata.cjs', './src/src.11tydata.json', './src/src.json' ] +1ms
  Eleventy:TemplateWriter ./src/index.html begun adding to map. +6ms
  Eleventy:TemplatePassthroughManager TemplatePassthrough copy finished. Current count: 0 +6ms
  Dev:Eleventy:Template './src/index.html' getData() getTemplateDirectoryData and getGlobalData +3ms
  Eleventy:Template Template date: using file’s 'birthtimeMs' for './src/index.html' of 2022-02-11T00:02:09.761Z (from 1644537729761.5479) +0ms
  Dev:Eleventy:Template './src/index.html' getData() mergedData +4ms
  Eleventy:TemplateMap Caching collections objects. +0ms
  Eleventy:TemplateMap Collection: collections.all size: 1 +2ms
  Eleventy:TemplateMap Collection: collections.all size: 1 +0ms
  Eleventy:Template Second round of computed data for './src/index.html' +4ms
  Eleventy:ComputedData Computed data order of execution: [] +0ms
  Dev:Eleventy:Template './src/index.html' render() +5ms
  Dev:Eleventy:Template Template.render renderContent for './src/index.html' +0ms
  Dev:Eleventy:TemplateContent './src/index.html' compile() using engine: 'html' +0ms
  Dev:Eleventy:TemplateContent './src/index.html' getCompiledTemplate function created +3ms
  Dev:Eleventy:TemplateContent './src/index.html' getCompiledTemplate called, rendered content created +1ms      
  Eleventy:Benchmark Benchmark      1ms   0%     1× (Aggregate) Template Read +0ms
  Eleventy:Benchmark Benchmark      3ms   0%     1× (Aggregate) Template Compile +1ms
  Eleventy:Benchmark Benchmark      3ms   0%     1× (Aggregate) > Template Compile > ./src/index.html +0ms
  Eleventy:Benchmark Benchmark      1ms   0%     1× (Aggregate) Render +0ms
  Eleventy:Benchmark Benchmark      1ms   0%     1× (Aggregate) > Render > ./src/index.html +0ms
[11ty] Wrote 0 files in 4.90 seconds (v1.0.0)
  Eleventy Finished writing templates. +5s
  Eleventy
  Eleventy       Getting frustrated? Have a suggestion/feature request/feedback?
  Eleventy       I want to hear it! Open an issue: https://github.com/11ty/eleventy/issues/new +0ms
 ELIFECYCLE  Command failed with exit code 1.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.