Angular + webpack + bootstrap的开发环境配置③
由于环境已经准备好，我希望能够开始制作样本。
我认为这也可以作为Angular + webpack + bootstrap开发环境搭建①和②内容的总结。
源代码已在Github上公开，您也可以参考那里的内容。
实际上，与其阅读说明，不如直接查看源代码更容易理解。
https://github.com/yohei-takara/JavaScriptEnvironment.git
目录结构
以前已经写过了，考虑到在服务器端使用Java或Ruby，因此决定在webpack生成的源代码和原始代码中进行分开管理，分别放在不同的目录下。
因为我想不到一个好的原始代码管理目录名称，所以就称之为webpack吧……
唉～感觉有些微妙，但总之先不纠结了(´﹃｀)
我打算将实际的目录结构设计成这样的感觉。
|--- public // 外部に公開するディレクトリ
| |-- assets // webpack で 生成したjs,cssが吐かれるディレクトリ
| |-- index.html // サンプルHTML。
|
|--- webpack // webpack でのコンパイル対象となるファイルはここに配置
| |-- src // コンパイル前のソースを配置
| |-- package.json // npm 設定ファイル
| |-- webpack.config.js // webpack 設定ファイル
|
创建HTML
作为动作确认，只要能确认Angular和bootstrap能正常运行即可。
我希望Angular实现双向数据绑定，而bootstrap只需要实现简单的HTML弹出提示框。
webpack生成的css将存放在public/assets/stylesheets/.bundle.css中。而javascript将存放在public/assets/javascript/.bundle.js中。因此，将会加载这些样式。
<link rel="stylesheet" href="assets/stylesheets/application.bundle.css">
关于JavaScript，
<script type="text/javascript" src="assets/javascript/application.bundle.js"></script>
确认Bootstrap工具提示
关于bootstrap的工具提示，由于官方非常详细地列出了使用方法等细节，因此在此省略不表。
http://v4-alpha.getbootstrap.com/components/tooltips/
我們決定對於Font Awesome的圖標提供tooltip。
<div data-toggle="tooltip" data-placement="top" data-html="true" title="<div class='tooltip-inner'>Webpack Environment!!!!!</div>">
<i class="fa fa-thumbs-o-up fa-5x" aria-hidden="true"></i>
</div>
检查Angular双向数据绑定。
将输入的内容与屏幕上显示的内容相同的形式进行构建。
通过更改输入内容，可以改变显示的文字，以检查数据绑定。
<div ng-app="app" ng-cloak>
<div ng-controller="webpackEnvironmentCtrl" ng-init="init()">
<input type="text" ng-model="demo" ng-value="demo">
<div>{{ demo }} </div>
</div>
</div>
写剧本
为了使Angular和Bootstrap提示框在JavaScript中工作，你需要编写两个jQuery代码。
工具提示
如果在官方网页上搜索的话
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
这样写的话，在使用angular的ng-repeat等动态更改DOM时，tooltip将无法显示（对于动态生成的部分）。所以稍作修改，
$(function() {
//ツールチップ
$('body').tooltip({
selector: '[data-toggle="tooltip"]'
});
});
我会设想这种情况。
Angular （角度）
关于angular，
因为还要确认webpack，所以没有必要特意分开，
我们决定把module和contorller分别创建为两个文件。
由于未来我们计划将模块扩展为SAP，所以我预先将ngRoute进行了依赖注入。就本次而言，这并不是必需的。
module.exports.angApp = angular.module("app", ["ngRoute"]);
我将创建一个控制器，只需编写初始化处理的简单代码。
let angModule = require('./module');
require('./config');
angModule.angApp.controller("webpackEnvironmentCtrl", ['$scope', "$log", function($scope, $log) {
$scope.init = function() {
$log.debug('Webpack Environment!!!!!!!!!!!');
$scope.demo = 'Webpack Environment!!!!!!!!!!!';
};
}]);
在编写过程中，我考虑到只有在开发时才想要输出调试日志，因此我添加了配置选项。
let angModule = require('./module');
angModule.angApp.config(["$logProvider", function($logProvider) {
// $log.debug の表示設定
$logProvider.debugEnabled(true);
}]);
我们假设这样。
使用Webpack进行编译
我会创建一个可以编译的js文件。
// style library
require("bootstrap/dist/css/bootstrap.css");
require("bootstrap/dist/css/bootstrap-theme.min.css");
require("font-awesome/css/font-awesome.css");
// javascript library
let $ = require("jquery");
let angular = require("angular");
require("bootstrap/dist/js/bootstrap.js");
require("angular-cookies");
require("angular-route");
// jquery module
require("./javascript/jquery/actionTooltip");
// angular module
require("./javascript/angular/controller");
我們將使用Webpack編譯這個已創建的JavaScript檔案。
var DEBUG = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === undefined;
var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var devtool = DEBUG ? '#inline-source-map' : '#eval';
var plugins = [ new webpack.ProvidePlugin({ jQuery: "jquery", $: "jquery", jquery: "jquery" }), new ExtractTextPlugin('stylesheets/[name].bundle.css') ];
if (!DEBUG) {
plugins.push( new webpack.optimize.UglifyJsPlugin({compress: {warnings: false}}) );
}
module.exports = {
entry: {
'application': './src/webpackEnvironment.js',
},
output: {
path: '../public/assets',
filename: 'javascript/[name].bundle.js'
},
devtool: devtool,
plugins: plugins,
resolve: {
root: [ path.join(__dirname, "node_modules") ],
extensions: ['', '.js', '.css']
},
module: {
loaders: [
// **IMPORTANT** This is needed so that each bootstrap js file required by
// bootstrap-webpack has access to the jQuery object
{ test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' },
// loads css
{ test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?mimetype=image/svg+xml' },
{ test: /\.woff(\d+)?(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?mimetype=application/font-woff' },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?mimetype=application/font-woff' },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?mimetype=application/font-woff' }
]
}
};
为了能够修改生产和开发环境，我将创建一个npm脚本。
{
"name": "webpackTest",
"version": "1.0.0",
"description": "webpack test project",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"clean": "rm -r node_modules/ && npm cache clean",
"devBuild": "NODE_ENV=development webpack --display-error-details",
"build": "NODE_ENV=production webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"angular": "^1.5.9",
"angular-cookies": "^1.5.9",
"angular-route": "^1.5.9",
"bootstrap": "^3.3.7",
"font-awesome": "^4.7.0",
"jquery": "^2.2.4"
},
"devDependencies": {
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.13.3"
}
}
现在准备工作已经完成，我们开始运行webpack。
$ npm run build
又或者
$ npm run devBuild
本番用和开发用之间的区别是，本番用是进行 “无souce-map、压缩编译”，而开发用是进行 “有souce-map、未压缩编译”。
只要在 public/assets/ 下生成了 js 和 css 文件，就可以通过浏览器打开 index.html 并确认是否正常运行，完成了。
这次尝试中的问题
在Angular的config中，配置$logProvider的设定。
$logProvider.debugEnabled(true);
尽管我们通过webpack成功地将production和develop进行了区分，但是现在我们不得不手动修改源代码来调试日志，这真的很不好。
我希望能够通过webpack来实现在这里的切换。 ╭( ･ㅂ･)و ̑̑ ｸﾞｯ !
2016/12/09 补充记录
根据 http://qiita.com/mikakane/items/5ab96c4c7e187ab6c9f1 的文章进行模仿，通过修改webpack以更改debug日志的输出与否。
var LOG_ENV = false;
var plugins = [];
if (DEBUG) {
LOG_ENV = true;
}
plugins.push( new webpack.DefinePlugin( { DEBUG_LOG_ENV: LOG_ENV }) );
$logProvider.debugEnabled( DEBUG_LOG_ENV );
-
- 使用webpack插件DefinePlugin来设置DEBUG_LOG_ENV。
-
- DEBUG_LOG_ENV的值在生产环境下为true，在开发环境下为false。
- 在Angular的配置文件中，将DEBUG_LOG_ENV设置为$logProvider.debugEnabled()的值。
现在，在开发时可以配置webpack的转译，使其能够输出log并方便进行调试，而在生产环境中则不会输出log。
只要像这样，在各个环境中需要设置不同的值时，应该可以在不更改源码的情况下进行设置，这样看来应用场景应该很多。
Angular + webpack + bootstrap 的开发环境搭建①
Angular + webpack + bootstrap 的开发环境搭建②
Angular + webpack + bootstrap 的开发环境搭建③
