之前费了一番力气安装好了angular开发环境，后面的几天都是在angular中文官网上看文档，照着英雄教程一步一步操作，熟悉了angular的一些基本特性，这部分没有遇到什么大问题，还比较顺利。这两天在看官方文档中的Webpack简介，想跟着文档做一遍，了解一下如何用Webpack打包angular项目，结果遇到了一些问题，因为是初学angular和Webpack的小白，这些问题一时难以解决，花费了不少时间，想在这里记录一下。 首先跟着文档将相关的...
本文将从头开始编写实际的代码来完成一个angular2的demo。题外话是其实angular2官网的快速开始项目已经很酷炫了，但其侧重快速二字，只够拿来练习玩耍，倒是github上确实已经有了一些不错的angular2-starter。 1. 安装必要的node环境与npm当然TS环境也是必须的，目前TS已经更新到了2.1.5+，笔者使用的就是2.1.5版本，且最好使用2.0以上版本的TS，否则会有一些尴尬的问题(包括类型定义以及编译错误)。 2.关于编辑器笔者使用的是VSCo...
概述Angular2官方推荐的应该是使用systemjs加载, 但是当我使用到它的tree shaking的时候，发现如果使用systemjs+rollup，只能打包成一个文件，然后lazy loading就没法搞了。因此我使用了webpack2，webpack2自带tree shaking，只要将tsconfig中的module设置成es2015就可以， 虽然效果没rollup好，但支持lazy loading。另外， angular2目前不支持typescript 2.1.X，所以如果想在"target": "es5"前提下使用async/await就不行了，但是可...
随着你的单页应用扩大，其下载时间也越来越长。这对提高用户体验不会有好处（提示：但用户体验正是我们开发单页应用的原因）。更多的代码意味着更大的文件，直到代码压缩已经不能满足你的需求，你唯一能为你的用户做的就是不要再让他一次性下载整个应用。这时，延迟加载就派上用场了。不同于一次性下载所有文件，而是让用户只下载他现在需要的文件。 所以。如何让你的应用程序实现延迟加载？它基本上是分成两件事情。把你的模块拆分...
当我使用angular-cli构建项目时,它会将所有项目文件捆绑到一个主要的主包中. 我在应用程序中使用了懒惰路由,一旦应用程序加载,我就可以导航. 有没有一种方法可以将主包分为多个基于懒惰加载的路由模块的文件？ 下面是角度-cli.json中的配置 {"project": {"version": "1.0.0-beta.15","name": "maddy-test-project"},"apps": [{"root": "src","outDir": "dist","assets": "styles/content","index": "default.htm","main": "main.ts...
虽然，现在越来越多的人选择使用react、vue以及ng2，但是依然存在相当一部分人在使用angular1.x开发。本文将介绍如何使用webpack+es6+angular1.x+$oclazyLoad实现动态加载。 1.webpack webpack.config.js var path = require(path);var webpack = require(webpack);var ExtractTextPlugin = require("extract-text-webpack-plugin");module.exports = {entry: {home: [babel-polyfill,./app/app.js //引入文件],common: [babe...
需求来源之前使用jspm来打包项目 但是有个最大的缺点，就是只能把项目打包成一个大的js,当项目开发到后期会很大，网上找了很久也没找到合理的jspm打包方式。 所以开始调研可以打包angular项目成多个文件的工具. 调研过程过程中看了些 vue,react配合webpack按路由功能打包的demo，感觉webpack对于打包成多个文件比较擅长。 结果第一步 核心模块依赖加载 #core.module.js //核心模块import angular-route; //官方路由依赖 import ocl...
刚搭建完一个webpack+angular2环境，由于angular及webpack官网上没有一个折中的搭建方案，所以只能摸索着搭建，中间遇到一些坑，遂总结记录下来，以供交流。 搭建完后的项目初步环境如下： app ----app.component.ts ----app.module.ts ----main.ts index.html package.json tsconfig.json webpack.config.jsapp.componnet.ts：组件文件。angular2应用是由组件构成，组件控制视图；import { Component } from @angular/core; @Comp...
webpack2和angular2搭建的项目 github地址:项目链接 npm install，安装依赖包npm run dev，启动本地工程，在localhost:1699进行预览package.json {"name": "angular-webpack","version": "1.0.0","description": "webpack2 & angular2","scripts": {"dev": "babel-node ./src/config/dev.js"},"author": "Travis Lee","license": "ISC","dependencies": {"@angular/common": "~4.0.0","@angular/compiler": "~4.0.0","@angular/cor...
之前研究过webpack但是一直没用过，这次公司要做一个h5网站，正好拿来练练手，话说angular1x对移动端不是很友好，但主要是angular1x比较熟悉，上手快，开发也快，就没去考虑其他前端mvc框架。 好了webpack出了中文版以后，对于我们这些英语不是很好的来说真的是太棒了，话说angularjs啥时候也出个中文文档就更好了，webpack官网：https://doc.webpack-china.org/右上角可以选择语言。 开始之前先看一下目录文件：第一步：首先要使用...
技术栈概述ES2015(ES6)大名ES2015，顾名思义是 ECMAScript 在2015年6月正式发布的一套标准。小名ES6，意为ECMAScript第六次变更。（JavaScript 是 ECMAScript 规范的一种实现）。如今已慢慢替代ES5，成为JS主流的开发规范，新增很多语法糖，大大提高开发效率。 webpack一款模块化的构建工具，对ES6的构建更加友好，不详细介绍了。 angular一款MV*框架，本次用的是angular的1.6.4版本，即angular1.x版本中的最高版，也可以看作是2的...
随着你的单页应用扩大，其下载时间也越来越长。这对提高用户体验不会有好处（提示：但用户体验正是我们开发单页应用的原因）。更多的代码意味着更大的文件，直到代码压缩已经不能满足你的需求，你唯一能为你的用户做的就是不要再让他一次性下载整个应用。这时，延迟加载就派上用场了。不同于一次性下载所有文件，而是让用户只下载他现在需要的文件。 所以。如何让你的应用程序实现延迟加载？它基本上是分成两件事情。把你的模块拆分...
希望得到一些澄清,为什么以下不能按预期工作,希望,这是我可能忽略的一些简单.没有Webpack,当前的实现可以按预期工作. 理想情况下,我希望保持当前的实现,我觉得注册组件/控制器/等应该在自己的文件中完成,只需指向相关模块.但如果这不是最佳做法,我也希望看到另一个建议. 文件root.module是我定义根模块的地方,然后在root.component文件中我将组件添加到该模块. 不导入模块的当前实现：//root.component.js 'use strict';var root =...
我知道我们需要wow.js的打字文件,但我无法在任何地方找到它.有没有其他解决方案将此外部js加载到webpack中？解决方法:执行以下步骤： > 安装exports-loader npm i exports-loader --save-dev > 添加到webpack.config.js这个加载器 {test: require.resolve(wow.js/dist/wow.js), loader: exports?this.WOW} > 在typings文件夹中创建typings.d.ts文件： declare module "wow.js/dist/wow.js" {var noTypeInfoYet: any;export = noTyp...
我正在使用Ionic与Webpack和Typescript实现一个应用程序.我通过npm安装’ngstorage’并尝试导入条目ts文件,但Webpack显示错误 – ‘无法解析模块’angular”. 我搜索了这个错误并意识到我需要在package.json文件和node_modules中包含angular.但是,ionic-sdk模块已经包含了角度.所以它反而在浏览器中显示一个不可接受的错误,我试图多次加载角度. Webpack是否有办法跳过模块解析器或指向角度模块到ionic-sdk模块的路径？或者有其他建...