express+webpackを使って小さいプロジェクトを作ります.

4492 ワード

本プロジェクトは小さいウェブサイトを実現したいです.css方面:ress.cssを持っています.sass文法が使えます.js方面:エス6文法が使えます.テンプレートの面:継承可能なテンプレートがあり、共通部分は共通のテンプレートを抽出することができます.プロジェクトの熱起動:
実現の考え方:

expressを使ってプロジェクトを構築する.

テンプレートはjadeテンプレートを使用し、テンプレートは継承可能であり、共通のheader、footer部分を導入することができる.

導入webpack

s 6環境を構築する

nodemonを導入して熱起動を実現します.
本文はここから始まります.
express構築プロジェクト
express-generatorを使って、快速にexpressプロジェクトを作成できます.まず、express-generatorをインストールします.

npm install express-generator -g

expressを使ってプロジェクトを作成します.

express little-project

作成したプロジェクトテンプレートエンジンは、デフォルトではjadeテンプレートを使用します.
ejsテンプレートを使いたいなら、パラメータを加えてもいいです.

express -e little-project

次のディレクトリ構造を生成することが見られます.
起動命令:node ./bin/wwwはwelcome to expressのページを見ることができます.
テンプレートの継承
ページが共用の頭と尾を使いたいなら、jadeでいくつかのデザインをすることができます.私たちはviewの下でshareフォルダを作成して、共通のjadeテンプレートを保存します.indexフォルダにはトップページで使用するjadeテンプレートが格納されます.
layout.jade

doctype html
html
  head
    meta(charset="UTF-8")
    meta(http-equiv="X-UA-Compatible",content="IE=Edge")
    title=title
    meta(name='keywords',content='')
    meta(name='description',content='')
    //- link(rel='stylesheet', href='/common.css')
    link(rel='stylesheet', href='/#{staticTag}.css')
  body
    #little-project
      .little-project-wrap
        include header
        block content
        include footer
    //- script(src='/common.js')
    script(src='/#{staticTag}.js')

include footerにより、header部分がテンプレート共通を実現します.
トップページのテンプレートはlayout.jade:index.jadeを継承できます.

extends ../share/layout

block content
  h1= title
  p Welcome to #{title}

ルート部分はstaticTagの値を指定します.

router.get('/', function(req, res, next) {
  res.render('index/index', { title: 'E', staticTag: 'index'});
});

これにより、各ページで自動的にstaticTag変数を使うjsを実現することができます.
webpack
webpack.co.nfig.jsを確立する:touch webpack.config.js:

var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
//      package.json    
var entry_map = {
  'index': './public/index/index.js',
}
module.exports = {
  entry: entry_map,
  devtool: 'source-map',
  output: {
    path: path.resolve(process.cwd(),'dist/'),
    //[name]-[hash].js    hash 。
    filename: '[name].js',
  },
  plugins: [
    new ExtractTextPlugin("[name].css")
  ],
  module: {
    loaders: [
      {
        test: /\.js[x]?$/,
        exclude: /(node_modules)|(global\/lib\/)/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style-loader','css-loader')
      },
      {
        test: /\.scss$/,
        //!      ？    loader   ，?sourceMap    sourceMap， js  sourcemap  devtool: sourcemap   。
        loader: ExtractTextPlugin.extract('style-loader','css-loader?sourceMap&-convertValues!sass-loader?sourceMap')
      }
    ]
  }
}

まず、単独でページにcssを導入するには、extract-text-webpack-pluginプラグインを導入する必要があります.
loadersでは、extract-text-webpack-pluginというプラグインを使用します.先に実行するという意味です.逆のパイプに似ています.css-loadersは@import url()をrequirestyle-loadersに翻訳してstyleラベルを注入します.

npm install extract-text-webpack-plugin --save-dev
npm install css-loader --save-dev
npm install style-loader --save-dev
npm install sass-loader --save-dev
//  sass-loader   node-sass
npm install node-sass --save-dev
npm install babel-loader --save-dev

ES 6環境の設定touch .babelrc

   presets:[
         'es2015',
          'react',
          'stage-0',
          'stage-3'
      ],
      plugins:[]
}

npm install babel-cli --save-dev
npm install babel-core --save-dev
npm install babel-preset-es2015 --save-dev
npm install babel-preset-react --save-dev
npm install babel-preset-stage-0 --save-dev

静的ファイルディレクトリをap.jsに指定します.

app.use(express.static(path.join(__dirname, 'dist')));

このようにページがindex.jsを要求する時、distディレクトリに行ってindex.jsを探します.
熱起動

npm install nodemon -g

nodemon./bin/wwwで熱起動が可能です.
OKです.あとはこの駅の上でページを作ることができます.webpackはここで発光して発熱することもできます.
Reference
http://webpackdoc.com/configu...

VSL 2013はVSL 2008の共同コンパイルを使ってプロジェクトコンパイルを行う.

AndroidカスタムDialogダイアログのいくつかの方法(簡略版)