Nodejs:简单的脚手架

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Nodejs:简单的脚手架相关的知识,希望对你有一定的参考价值。

html-webpack-plugin:  用来生成html文件的插件 

glob:  用来筛选文件,文件目录 

path:  管理文件路径 


 

次脚手架里主要用到的是这3个插件,后续会根据所用插件逐渐完善脚手架:

  entry部分:定义一个glob对象,在pages目录下面搜寻页面路径(index/index;login/index),路径按照此规范写,方便后面组织管理,一个小模块为一个页面,具体glob对象的使用方法前面有介绍。

  plugins部分:引入了jquery,同时提取了公共样式。每个模板返回的ejs都在HtmlWebpackPlugin里生成了html文件并输出,这里用到了箭头函数,es6的,注意js文件需要用bable处理一下。

  loaders:都是一些常用通用的,我个人的理解为对不同后缀的文件进行不同的处理,大同小异。

  alias:自己定义require的路径,当一些组件引用频繁的时候,可以放在这里面便于处理。

 

文件目录如下:

--src
    |--pages
    |       |--index
    |       |       |--index
    |       |           |--page.ejs
    |       |           |--html.js
    |       |           |--page.js    
    |       |           |--page.less
    |       |--lgoin
    |                |--..同上
    |-public....

  

脚手架代码如下:

var webpack = require(‘webpack‘);
var glob = require(‘glob‘);
var path = require(‘path‘);

var precss = require(‘precss‘);
var autoprefixer = require(‘autoprefixer‘);

var ExtractTextPlugin = require(‘extract-text-webpack-plugin‘);
var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);

var publicDir = path.resolve(__dirname, ‘./src‘)
var pagesDir = path.resolve(__dirname, ‘./src/pages‘)
var staticDir = path.resolve(__dirname, ‘./src/static‘)
var buildDir = path.resolve(__dirname, ‘./build‘)


/*
 * entry
 */
var pageEntry = {};
var globInstance = new glob.Glob(‘!(_)*/!(_)*‘, {
    cwd: pagesDir,     
    sync: true,                     
}); 
var pageArr = globInstance.found;
pageArr.forEach((page) => {
    pageEntry[page] = path.resolve(pagesDir, page + ‘/page‘);
});

/*
 * plugins
 */
var configPlugins = [
    new webpack.ProvidePlugin({
        $: ‘jquery‘,
        jQuery: ‘jquery‘,
        ‘window.jQuery‘: ‘jquery‘,
        ‘window.$‘: ‘jquery‘,
    }),
    new webpack.optimize.CommonsChunkPlugin({
        name: ‘commons/commons‘,     
        minChunks: 2,
    }),
    new ExtractTextPlugin("[name]/styles.css")
];

/*
 * plugins - for ejs page
 * page --> login/index
 */
pageArr.forEach((page) => {    
    const htmlPlugin = new HtmlWebpackPlugin({
        filename: `${page}/page.html`,
        template: path.resolve(pagesDir, `./${page}/html.js`),
        chunks: [page, ‘commons/commons‘],        
        hash: true, 
        xhtml: true,
    });
    configPlugins.push(htmlPlugin);     
});


module.exports = {
    entry: pageEntry,
    output:{
        path: buildDir,
          filename: ‘[name]/entry.js‘
    },
    module:{
        loaders: [
        {
              test: /\.css$/,
              exclude: /node_modules|bootstrap/,
              loader: ExtractTextPlugin.extract(‘css?minimize&-autoprefixer!postcss‘),
        },
        {
              test: /\.less$/,
              include: publicDir,
              loader: ExtractTextPlugin.extract(‘css?minimize&-autoprefixer!postcss!less‘),
        },
        {
              test: /\.js$/,
              include: publicDir,
              loader: ‘babel-loader?presets[]=es2015-loose&cacheDirectory&plugins[]=transform-runtime‘,
        },
        {
              test: /\.html$/,
              include: publicDir,
              loader: ‘html‘,
        },
        {
              test: /\.ejs$/,
              include: publicDir,
              loader: ‘ejs‘,
        },
        {
              test: /\.(png|jpg|gif)$/,
              include: publicDir,
              loader: ‘url?limit=8192&name=./static/img/[hash].[ext]‘,
        },
        {
              test: /\.(woff|woff2|svg|eot|ttf)\??.*$/,
              include: publicDir,
              loader: ‘file?name=static/fonts/[name].[ext]‘,
        }]
    },
    plugins: configPlugins,
    
    resolve:{        
        alias: {
            layout:    path.resolve(publicDir, ‘public-resource/layout‘),
            public:    path.resolve(publicDir, ‘public-resource/public‘),
            wrapURL:path.resolve(publicDir, ‘public-resource/libs/constructInsideUrl.js‘),
        },
        extentions: [‘‘, ‘js‘],
    }
};

 

以上是关于Nodejs:简单的脚手架的主要内容,如果未能解决你的问题,请参考以下文章

nodejs( koa2 )配置 browserHistory

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

javascript 用于在节点#nodejs #javascript内设置react app的代码片段

NodeJS代码组织与部署

npm——安装教程安装vue脚手架

安装使用vue-cli脚手架