Question

我正在尝试使用bookmarklet-loader和style-loader以及css-loader创建一个bookmarklet。但我无法将CSS导入我的书签。

这就是我所拥有的

webpack.config.js：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
entry: {
    index: './src/index.js',
    bookmarklet: './src/bookmarklets/bookmarklet.js'
},
output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
},
target: 'web',
module: {
    rules: [
    {
        test: /\.css$/,
        use: [
            'style-loader',
            'css-loader'
        ]
    },
    {
        test: /\.js$/,
        use: [
           'bookmarklet-loader'
        ],
        include: path.join(__dirname, './src/bookmarklets')
    }
    ]
},
plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
        title: 'Development'
    })
]

的src /书签小/ bookmarklet.js：

import './css/style.css';

/* the rest of my bookmarklet code */

的src / index.js：

import bookmarklet from './bookmarklets/bookmarklet';

var add = document.createElement("a");
add.href = "javascript:" + bookmarklet;
add.innerHTML = "Click me";

document.body.appendChild(add);

只需将书签添加到空白页面上的链接，即可将链接添加到浏览器。

但是运行webpack会产生此错误：

SyntaxError: Unexpected token: string (./css/style.css) at [snipped] node_modules/uglify-js/tools/node.js

我尝试将以下内容添加到我的webpack.config.js：

{
    test: /\.js$/,
    use: [
       'bookmarklet-loader',
       'style-loader',
       'css-loader'
    ],
    include: path.join(__dirname, './src/bookmarklets')
}

现在编译很好，但是bookmarklet代码包含require语句，所以当我尝试在浏览器中运行它时，我得到了一个

Uncaught ReferenceError: require is not defined

我找到了this和this，但无法让它发挥作用。

修改：简单解释问题和解决方案。我正在尝试构建一个bookmarklet，但我正在使用的bookmarklet-loader用于将bookmarklet导入到其他代码段中。特别是这个bookmarklet-loader没有设置来处理bookmarklet所需的css和模板。我已经切换到使用一个简单的webpack配置生成一个已编译的javascript文件，然后使用this工具将其转换为bookmarklet。

这是我的package.json，如果它对任何人的帮助：

<snip>
"scripts": {
        "build": "webpack && bookmarklet dist/index.js dist/bookmarklet.js && cat dist/bookmarklet.js | xclip -selection clipboard",
}

现在npm run build构建书签并将其复制到我的剪贴板，以便我可以在浏览器中更新书签。

Answer 1

我也发现这个问题很有趣，所以这里的答案仍然可以让你使用webpack来捆绑你的bookmarklet代码。

我们的想法是使用<script>标记，并通过webpack将内容作为块提供：

function addScript(codeURL) {
    const scriptElement = document.createElement('script');
    scriptElement.setAttribute('src', codeURL);
    scriptElement.setAttribute('crossorigin', "anonymous");
    document.body.appendChild(scriptElement);
}

使用一些附加的“魔法”，你的index.js变为：

const add = document.createElement("a");
add.href = "javascript:(function(){s=document.createElement('script');s.type='text/javascript';s.src='bookmarklet.bundle.js';document.body.appendChild(s);})()";
add.innerHTML = "Click me";

这是上述函数的uglified版本，它引用了你的'bookmarklet.bundle.js'块。（这样你就不再需要bookmarklet-loader）

bookmarklet.js 源（只是一个示例）：

import './css/style.css';

let elements = require('./someOtherSource');

let list = document.createElement('ul');
for (let i = 0; i < elements.length; ++i) {
    let item = document.createElement('li');
    item.appendChild(document.createTextNode(elements[i]));
    list.appendChild(item);
}
document.body.appendChild(list);

其中 someOtherSource.js 可以简单如下：

module.exports = [ 'a', 'b', 'c'];

最后，您的 webpack.config.js 变为：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: {
        index: path.resolve(__dirname, 'src/index.js'),
        bookmarklet: path.resolve(__dirname, 'src/bookmarklets/bookmarklet.js'),
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    target: 'web',
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                ]
            },
            {
                test: /\.js$/,
                use: [
                    'babel-loader',
                ],
                exclude: /node_modules/,
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title: 'Bookmarklet',
            chunks: [ "index" ],
        })
    ]
};

同样，我在这里看到的优点是你可以使用你的webpack捆绑，css / less或其他任何加载器来构建你的书签。另请参阅first和second。

Answer 2

您在编辑中详细说明的解决方案确实是实现目标的完美有效方式。

您希望维持一个取决于注入样式的bookmarklet。

虽然您可以轻松地将标签（例如<link>和<script>）注入书签以将外部资源加载到当前页面中，但它似乎不适合您的需要，因为您不需要制作您的代码在服务器上可用，并且尝试链接文件系统上的本地资源可能不太可靠。

因此，您希望整个代码和样式包含在bookmarklet代码中。您可以分两步进行：

将您的JS代码与内联CSS注入+ CSS
对包进行编码和包装，以便其内容可用作书签。

<强> 1。使用内联CSS注入代码捆绑JS

对于webpack来说，这听起来很完美！实际上它意味着捆绑你的代码并在代码中内嵌你的样式，就像你一样使用style-loader。

您甚至可以通过确保CSS中可能引用的任何其他资源（图片，网络字体等）也使用limit: 0使用url-loader进行内联来进一步推动它。总是内联这些资源。

但是正如你所想的那样，你不应该使用中间假象（比如bookmarklet-loader的输出），因为它们可能会遗漏一些功能（导入样式，require）。

您正在寻找webpack输出包：一个独立的 JavaScript代码，它将内联样式注入当前页面并执行您的代码。

<强> 2。对书签进行编码和换行

要将代码转换为书签，您必须对内容进行编码以实现URI兼容性，并添加额外的“javascript:”前缀。

这是您使用bookmarklet包的步骤。但是在你的情况下，因为你所拥有的只是一个单个 JavaScript文件，你想要“硬编码”到书签中，所以包装器很简单：

'javascript:' + encodeURIComponent('(function(){' + code + '})()')

您可以继续使用bookmarklet包或使其成为一个非常简单的节点脚本（但您应该在上一步中移动缩小步骤，通常在webpack配置中）。

实际上，为这个“bookmarkletify”步骤制作一个webpack插件非常容易：

function AssetToBookmarkletPlugin() {}

AssetToBookmarkletPlugin.prototype.apply = function (compiler) {
  compiler.plugin('emit', function (compilation, callback) {
    var asset;

    // Rework each asset.
    for (var assetName in compilation.assets) {
      asset = compilation.assets[assetName];
      compilation.assets[assetName] = {
        source: function () {
          // Encode and wrap the original source to make it bookmark-ready.
          return 'javascript:' + encodeURIComponent('(function(){' + asset.source() + '})()');
        },
        size: asset.size
      }
    }

    callback();
  });
};

通过这些额外的步骤（资源内联，CSS和JS缩小，书签资产），您的webpack配置将是：

const webpack = require('webpack');
const path = require('path');

module.exports = {
  entry: {
    index: './src/index.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  target: 'web',
  module: {
    rules: [{
      test: /\.(png|jpg|gif)$/,
      use: [{
        loader: 'url-loader',
        options: {limit: 0} // 0 = always inline resource
      }]
    }, {
      test: /\.css$/,
      use: ['style-loader', {
        loader: 'css-loader',
        options: {minimize: true} // Minify CSS as well
      }]
    }]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new AssetToBookmarkletPlugin()
  ]
};

现在可以将dist/index.js文件的内容复制为书签。

Answer 3

我认为webpack bookmarklet加载器本身并不需要创建一个bookmarklet，正如github repo建议的那样 “bookmarklet-loader是一个webpack加载器，可以将任何javascript文件转换为可在整个应用程序中用作模块的书签。” 不清楚这是否是你的用例。

查看插件代码，

'use strict';

var uglify = require('uglify-js');

module.exports = function(source) {
  return 'module.exports = "javascript:' + encodeURIComponent(
    '(function(){'+ uglify.minify(source, { fromString: true }).code +'})();'
  ) + '"';
};

我怀疑问题可能是因为这里使用的唯一软件包是Uglifyjs，它只编译javascript，代码中没有css加载器。这个插件希望你的代码是纯JS而不是任何CSS和HTML。

从你的代码中我看到你已经配置了webpack来构建css和JS，并且所有这些代码都提供了javascript uri模式包装在一个URI编码的函数中。在webpack构建输出后，DIY应该非常简单。希望有所帮助！

使用webpack，bookmarklet-loader，style和css-loader创建bookmarklet

3 个答案: