static-site-generator-webpack-plugin, web service提供的最小 unopinionated static 站点生成器

分享于 

8分钟阅读

GitHub

  繁體 雙語
Minimal, unopinionated static site generator powered by webpack
  • 源代码名称:static-site-generator-webpack-plugin
  • 源代码网址:http://www.github.com/markdalgleish/static-site-generator-webpack-plugin
  • static-site-generator-webpack-plugin源代码文档
  • static-site-generator-webpack-plugin源代码下载
  • Git URL:
    git://www.github.com/markdalgleish/static-site-generator-webpack-plugin.git
    Git Clone代码到本地:
    git clone http://www.github.com/markdalgleish/static-site-generator-webpack-plugin
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/markdalgleish/static-site-generator-webpack-plugin
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    

    Build StatusCoverage StatusDependency Statusnpm

    static 站点生成器 web pack插件

    web service提供的最小 unopinionated static 站点生成器。

    将服务器呈现的世界引入到 static 构建过程中。 你可以提供要呈现的路径,也可以通过执行自己的自定义 web pack渲染函数来在输出目录中呈现一个匹配的index.html 文件集,并在输出目录中显示匹配的文件。

    这个插件与诸如响应React路由器works非常好,因为它允许在构建时呈现路由,而不是在生产环境中需要服务器。

    安装

    $ npm install --save-dev static-site-generator-webpack-plugin

    用法

    确保已经安装 web pack,比如 npm install -g webpack

    webpack.config.js

    constStaticSiteGeneratorPlugin=require('static-site-generator-webpack-plugin');module.exports= {
     entry:'./index.js',
     output: {
     filename:'index.js',
     path:'dist',
     /* IMPORTANT! * You must compile to UMD or CommonJS * so it can be required in a Node context: */ libraryTarget:'umd' },
     plugins: [
     newStaticSiteGeneratorPlugin({
     paths: [
     '/hello/',
     '/world/' ],
     locals: {
     // Properties here are merged into `locals`// passed to the exported render function greet:'Hello' }
     })
     ]
    };

    index.js

    同步渲染:

    module.exports=functionrender(locals) {
     return'<html>'+locals.greet+' from '+locals.path+'</html>';
    };

    通过回调进行异步呈现:

    module.exports=functionrender(locals, callback) {
     callback(null, '<html>'+locals.greet+' from '+locals.path+'</html>');
    };

    通过承诺实现异步渲染:

    module.exports=functionrender(locals) {
     returnPromise.resolve('<html>'+locals.greet+' from '+locals.path+'</html>');
    };

    多渲染

    如果需要在每次渲染时生成多个文件,或者需要更改路径,则可以返回对象,而不是字符串,其中每个键都是路径,值是文件内容:

    module.exports=functionrender() {
     return {
     '/':'<html>Home</html>',
     '/hello':'<html>Hello</html>',
     '/world':'<html>World</html>' };
    };

    注意,这将在插件配置中的paths array 中的每个条目中执行。

    默认局部变量

    // The path currently being rendered:locals.path;// An object containing all assets:locals.assets;// Advanced: Webpack's stats object:locals.webpackStats;

    你的配置中提供的任何其他局部变量也可用。

    爬网模式

    你可以使用 crawl 选项自动抓取站点,而不是手动提供路径列表。 这将遵循所有相对链接和 iframe,为每个对象执行渲染函数:

    module.exports= {
     ... plugins: [
     newStaticSiteGeneratorPlugin({
     crawl:true })
     ]
    };

    注意,这可以与 paths 选项一起使用,以允许多个爬虫入口点:

    module.exports= {
     ... plugins: [
     newStaticSiteGeneratorPlugin({
     crawl:true,
     paths: [
     '/',
     '/uncrawlable-page/' ]
     })
     ]
    };

    自定义文件名

    通过提供以 .html 结尾的路径,你可以生成默认的文件名,而不是默认的index.html。 请注意,如果你使用的是一个路由器,这可能会破坏与你的路由器的兼容性。

    module.exports= {
     ... plugins: [
     newStaticSiteGeneratorPlugin({
     paths: [
     '/index.html',
     '/news.html',
     '/about.html' ]
     })
     ]
    };

    全局

    根据需要,你可以在执行呈现函数时提供一个将在全局范围内存在的对象。 如果你使用的某些库或者工具使用浏览器环境,这一点特别有用。

    例如在使用 web pack的require.ensure 时,假定 window 存在:

    module.exports= {
     ...,
     plugins: [
     newStaticSiteGeneratorPlugin({
     globals: {
     window: {}
     }
     })
     ]
    }

    资产支持

    template.ejs

    <%css.forEach(function(file){ %><link href="<%- file %>" rel="stylesheet"><% }); %><%js.forEach(function(file){ %><script src="<%- file %>"async></script><% }); %>

    index.js

    if (typeofglobal.document!=='undefined') {
     constrootEl=global.document.getElementById('outlay');
     React.render(
     <App />,
     rootEl,
     );
    }exportdefault (data) => {
     constassets=Object.keys(data.webpackStats.compilation.assets);
     constcss=assets.filter(value=>value.match(/.css$/));
     constjs=assets.filter(value=>value.match(/.js$/));
     returntemplate({ css, js, ...data});
    }

    指定项

    这里插件默认为找到的第一个块。 虽然大多数情况下都应该这样做,但如果需要,可以指定条目名称:

    module.exports= {
     ...,
     plugins: [
     newStaticSiteGeneratorPlugin({
     entry:'main' })
     ]
    }

    压缩支持

    生成的文件可以用 compression-webpack-plugin 压缩,但是首先要确保这个插件出现在插件 array的compression-webpack-plugin之前:

    constStaticSiteGeneratorPlugin=require('static-site-generator-webpack-plugin');constCompressionPlugin=require('compression-webpack-plugin');module.exports= {
     ... plugins: [
     newStaticSiteGeneratorPlugin(...),
     newCompressionPlugin(...)
     ]
    };

    相关项目

    许可证

    MIT许可证


    WEB  STA  STAT  POW  Generator  Minim  
    相关文章