我在Docker上尝试了Angular2的DEVELOPERS GUIDE Webpack介绍
总结
使用Docker尝试Angular2的Webpack入门。
环境如下所示
-
- OS:Windows10
-
- VirtualBox: 5.0.22
- Vagrant: 1.8.4
文件夹结构
- Vagrantfile
- share
- angular2
- index.html
- main.ts
- polyfills.ts
- vendor.ts
- app
- app.component.ts
- app.component.html
- app.component.css
- app.component.spec.ts
- public
- css
- styles.css
- images
- angular.png
- gulp
- tasks
- task.js
- Docker
- angular2
- Dockerfile
- package.json
- webpack.config.js
- tsconfig.json
- typing.json
- config
- helpers.js
- karma.config.js
- karma.test-shim.js
- webpack.common.js
- webpack.dev.js
- webpack.prod.js
- webpack.test.js
- shell
- angular.sh
- env.conf
各个文件的设置
以下文件是Webpack入门的指南。
- webpack.config.js
- tsconfig.json
- typing.json
- package.json
- config
- helpers.js
- karma.config.js
- karma.test-shim.js
- webpack.common.js
- webpack.prod.js
- webpack.test.js
- share
- angular2
- index.html
- main.ts
- polyfills.ts
- vendor.ts
- app
- app.component.ts
- app.component.html
- app.component.css
- app.component.spec.ts
请随意创建以下文件。
这次使用了quickstart的styles.css和Angler的图片。
- public
- css
- styles.css
- images
- angular.png
由于以下文件与“尝试使用Docker进行Angular 2的快速入门”内容相同，因此省略。
- Vagrantfile
- shell
- env.conf
将8080端口进行端口转发设置。
#!/bin/bash
source "/vagrant/Docker/shell/env.conf"
imageName="hibo/angular2"
containerName="angular2"
host_src_dir="/vagrant/share"
container_src_dir="/home/vagrant/share"
docker_dir="${path_Dockerfile_dir}/angular2"
# -t: docker側の標準出力をホストの標準出力につなげる。
# -i: ホスト側のキーボードで打った文字をコンテナに送る
# -p:ポートフォワディング ホスト側：コンテナ側
# -e:環境変数
# -u:user
# -v: ディレクトリ共有
# -w: ワークディレクトリ
run(){
docker run --name $containerName --rm -it \
-p 8080:8080 \
-m "300M" --memory-swap "512M" \
-e "NODE_ENV=production" \
-v $host_src_dir:$container_src_dir \
$imageName
}
run_d(){
docker run --name $containerName -d -i \
-p 8080:8080 \
-m "300M" --memory-swap "512M" \
-e "NODE_ENV=development" \
-v $host_src_dir:$container_src_dir \
$imageName
}
checkBeforeContainer $containerName
default $#
while getopts brdi opt
do
main ${opt} $docker_dir $imageName $containerName
done
将webpack测试服务器的URL更改为通过Vagrant运行。
通过Vagrant，在devServer中添加配置host：“0.0.0.0”，以便通过浏览器查看屏幕。
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');
module.exports = webpackMerge(commonConfig, {
devtool: 'cheap-module-eval-source-map',
output: {
path: helpers.root('dist'),
publicPath: 'http://192.168.50.12:8080/',
filename: '[name].js',
chunkFilename: '[id].chunk.js'
},
plugins: [
new ExtractTextPlugin('[name].css')
],
devServer: {
historyApiFallback: true,
stats: 'minimal',
host: "0.0.0.0"
}
});
Dockerfile如下:
由于package.json中缺少angular2-template-loader，所以此处添加。
通过npm run postinstall来进行Typescript的设置。
FROM node:4.4.7
# Add our user and group first to make sure their IDs get assigned consistently
RUN groupadd -r vagrant && useradd -r -g vagrant vagrant
ENV DOCKER_FILE_DIR=/vagrant/Docker/angular2
ENV WORK_DIR=/home/vagrant/angular2-quickstart
# ======================================================================
#タスクランナーインストール
ENV GULP_DIR=/home/vagrant/gulp
RUN mkdir -p ${GULP_DIR}
WORKDIR ${GULP_DIR}
# package.jsonを書き出し
# nameをgulpにするとエラーとなる
RUN echo '{ "name": "my_gulp", "scripts": { "gulp":"gulp" }}' > package.json
# install
RUN npm install -g gulp
RUN npm install --save-dev gulp
RUN npm install --save-dev require-dir
RUN npm install --save-dev gulp-if
#gulpfileを書き出し
RUN echo "var requireDir = require('require-dir'); requireDir('/home/vagrant/share/gulp/tasks/', { recurse: true }); " > gulpfile.js
# ======================================================================
RUN mkdir -p ${WORK_DIR}
WORKDIR ${WORK_DIR}
# COPY命令では../のように親ディレクトリは指定できない。
# 構築時にコンテクストのディレクトリ以下をDockerデーモンに送るため
COPY package.json $WORK_DIR/package.json
RUN npm install
# loaderが足りない
RUN npm install --save-dev angular2-template-loader
# typescript設定
COPY tsconfig.json ${WORK_DIR}/tsconfig.json
COPY typings.json ${WORK_DIR}/typings.json
RUN npm run postinstall
# 各種設定ファイル用意
COPY webpack.config.js ${WORK_DIR}/webpack.config.js
COPY config ${WORK_DIR}/config
RUN mkdir src
RUN mkdir public
# ======================================================================
ENV SHARE_DIR=/home/vagrant/share
RUN mkdir -p ${SHARE_DIR}
# ======================================================================
WORKDIR ${GULP_DIR}
CMD ["npm", "run", "gulp" ]
编写用于gulp的配置文件。
var gulp = require('/home/vagrant/gulp/node_modules/gulp');
var spawn = require('child_process').spawn;
var angular2_dir = "/home/vagrant/angular2-quickstart";
gulp.task('default', ['copy','watch', 'angular2']);
gulp.task('copy',function(){
var base_dir = "/home/vagrant/share/angular2",
dist_dir = angular2_dir + "/src",
public_base_dir = base_dir + "/public",
public_dist_dir = angular2_dir + "/public";
gulp.src(
[ public_base_dir + '/images/*', public_base_dir + '/css/*' ],
{ "base": public_base_dir }
)
.pipe( gulp.dest( public_dist_dir ) );
return gulp.src(
[ base_dir + '/*', base_dir + '/app/*' ],
{ "base": base_dir }
)
.pipe( gulp.dest( dist_dir ) );
});
gulp.task('angular2',['copy'], function(){
spawn('npm',['start'], { cwd:angular2_dir,
stdio: ['pipe', process.stdout, process.stderr]});
});
gulp.task('watch',['copy'],function(){
gulp.watch(['/home/vagrant/share/angular2/**', '/home/vagrant/share/public'], ['copy']);
});
当所有文件都准备好后，进行ssh连接。
如果准备好了，请在虚拟环境中执行以下操作。
/vagrant/Docker/shell/angular.sh -b
/vagrant/Docker/shell/angular.sh
当Docker启动后，您可以在浏览器中访问192.168.50.12:8080，应该能看到angular2的quickstart页面。
请参考以下资料。
Webpack简介
尝试使用Docker来实现Angular 2的快速入门教程
