By 被删

更新日期:

文章目录
  1. 1. 基本依赖
    1. 1.1. package.json
    2. 1.2. webpack
  2. 2. webpack配置
    1. 2.1. webpack.config.js
    2. 2.2. webpackServer.config.js
  3. 3. babel
    1. 3.1. .babelrc
    2. 3.2. babel-polyfill
    3. 3.3. 参考
  4. 4. 结束语

AngularJS(v1.5.8)已经成为项目们的基本框架，《玩转Angular1》系列用于记录项目中的一些好玩或者比较特别的思路。
本文记录用webpack以及babel配置环境的过程。

基本依赖

package.json

首先，当然要介绍下我们的一些基本依赖，一般都会选择从package.json开始。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
{
  "name": "angular-free",
  "version": "0.0.0",
  "dependencies": {
    "angular": "1.5.8",
    "angular-route": "1.5.8",
    "angular-ui-router": "^0.3.2",
    "tslib": "^1.2.0"
  },
  "scripts": {
    "webpack": "webpack --config webpack.config.js --watch --watch-polling -d",
    "webpack-dev-server": "webpack-dev-server --config webpackServer.config.js  --hot --port 9999"
  },
  "devDependencies": {
    "@types/angular": "^1.5.20",
    "@types/angular-ui-router": "^1.1.35",
    "babel-cli": "^6.18.0",
    "babel-core": "^6.18.0",
    "babel-loader": "^6.2.7",
    "babel-polyfill": "^6.16.0",
    "babel-preset-latest": "^6.16.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "less": "^2.7.1",
    "less-loader": "^2.2.3",
    "style-loader": "^0.13.1",
    "ts-loader": "^1.2.2",
    "tslint": "^4.0.2",
    "typescript": "^2.1.4",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.16.2"
  },
  "engines": {
    "node": ">=0.8.0"
  },
  "main": "main.js"
}

这里可以大概看到，除了基本的angularv1.5.8，我们还用到了其他的一些工具或者库，像：

  • webpack
  • babel
  • typescript
  • ui-router
  • …
    是的，我们项目改造了不少，后面章节的话，这些工具和库也会说到，本节我们主要涉及的是webpack。
    webpack依赖安装，除了npm install外，还需要全局安装npm install -g webpack。

至于scripts命令，这里有两个：

  1. npm run webpack：启动webpack，以及文件更改的监控。
  2. npm run webpack-dev-server: 启动本地服务，以及热加载。

webpack

webpack已经在前端领域占据了一个很重要的位置了呢，毕竟功能比较强大，也比较灵活自由。我们也把之前的一些基于grunt和gulp的功能切换到webpack上去了。
这里简单介绍一下几个比较基本的loader。

  • babel-loader
    首先当然少不了我们的babel啦，ES6甚至ES7的一些很方便的语法和特性，在babel的帮助下都能尽情使用了。

  • css/less/style-loader
    基本的样式文件编译打包和生成sourcemap，这里我们依然锲而不舍地使用less。

  • ts-loader
    关于在angular1中使用typescript，是一个小伙伴提出的，毕竟团队协作也是需要一些规范和代码提示，typescript后面我们也会讲到的。

  • file-loader
    这个不得不说是最近才察觉到的，功能强大的loader，对自动“搬运”文件以及生成相应的url上面可是很方便使用的呢。

其他的等本骚年心情愉悦的时候再说吧。

webpack配置

webpack.config.js

不说话，直接上码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
var webpack = require('webpack');
var CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');

var config = {
    entry: {
        app: ['./app/bootstrap.js'] // 入口文件
    },
    output: {
        path: path.resolve(__dirname, 'app/entry'), // 编译后文件
        publicPath: '/entry/',
        filename: 'bundle.js' // 生成文件名
    },
    module: {
        loaders: [{
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        }]
    },
    plugins: [
        // 使用CommonChunksLoader来提取公共模块
        new CommonsChunkPlugin({
            name: 'vendors',
            filename: 'vendors.js',
            minChunks: function (module) {
                var userRequest = module.userRequest;
                if (typeof userRequest !== 'string') {
                    return false;
                }
                return userRequest.indexOf('node_modules') >= 0
            }
        })
    ]
};

module.exports = config;

其中主要涉及的文件生成：

  • bundle.js: 为主要代码的编译打包
  • vendors.js: 注入依赖的编译打包

这里并没有涉及typescript的相关配置，后面我们会在typescript添加的时候一并加入讲解的。

webpackServer.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var WebpackDevServer = require("webpack-dev-server");
var webpack = require("webpack");

var port = 9999;
var config = require("./webpack.config.js");
config.entry.app.unshift("webpack-dev-server/client?http://localhost:" + port + "/", "webpack/hot/dev-server");
var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {
    hot: true,
    inline: true,
    contentBase: "./app",
    stats: {
        colors: true
    },
});
server.listen(port);

babel

.babelrc

babel-loader的配置通常使用.babelrc文件进行配置：

1
2
3
4
5
6
7
8
{
    "presets": [
        "latest", {
            "ignore": ["./app/node_modules"]
        }
    ],
    "plugins": []
}

至于presets参数，我们直接上最新的特性就好啦。当然小伙伴们也可以根据自己的喜好配置像”es-2015”、”stage-0”等阶段，当然需要安装相应的babel依赖啦。

官方提供以下的规则集，大家可以根据需要安装。

1
2
3
4
5
6
7
8
9
10
11
# ES2015转码规则
$ npm install --save-dev babel-preset-es2015

# react转码规则
$ npm install --save-dev babel-preset-react

# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

babel-polyfill

Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。
举例来说，ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行，必须使用babel-polyfill，为当前环境提供一个垫片。

然后在脚本头部，加入如下一行代码：

1
2
3
import 'babel-polyfill';
// 或者
require('babel-polyfill');

Babel默认不转码的API非常多，详细清单可以查看babel-plugin-transform-runtime模块的definitions.js文件。

参考

以上内容部分来自阮一峰的《Babel入门教程》。

结束语

这节主要讲了webpack和babel一些相关配置，以及部分说明，可能和angular关系一般般吧。下一节我们将在这个基础上，简单搭建个angular项目。

码生艰难，写文不易，给我家猪囤点猫粮了喵~

B站: 被删

查看Github有更多内容噢：https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢

如果你想要关注日常生活中的我，欢迎关注“牧羊的猪”公众号噢

作者：被删

出处：https://godbasin.github.io

本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

文章目录
  1. 1. 基本依赖
    1. 1.1. package.json
    2. 1.2. webpack
  2. 2. webpack配置
    1. 2.1. webpack.config.js
    2. 2.2. webpackServer.config.js
  3. 3. babel
    1. 3.1. .babelrc
    2. 3.2. babel-polyfill
    3. 3.3. 参考
  4. 4. 结束语