为Ionic3+ (Angular4+)的项目配置nameof语法糖-进阶

1.项目根目录下建立个config文件夹。

2.config文件夹下建立个webpack.config.js配置脚本,内容如下:

var path = require("path");
var webpack = require("webpack");
var merge = require("webpack-merge");
var webpackConfig = require("@ionic/app-scripts/config/webpack.config");

const devConfig = {
  module: {
    loaders: [
      {
        test: /\.ts$/i,
        exclude: /node_modules/,
        loader: "ts-nameof-loader"
      }
    ]
  }
};

const prodConfig = {
  module: {
    loaders: [
      {
        test: /\.ts$/i,
        exclude: /node_modules/,
        loader: "ts-nameof-loader"
      }
    ]
  }
};

const customConfig = {
  dev: devConfig,
  prod: prodConfig
};


// Sometimes you may need to support multiple targets, webpack - merge
// will accept an object where each key represents the target configuration.
// The output becomes an array of configurations where matching keys are merged
// and non- matching keys are added.
let webpackMergedConfig = merge.multiple(customConfig, webpackConfig);

module.exports = {
  dev: webpackMergedConfig[0],
  prod: webpackMergedConfig[1]
};

3.为Ionic项目安装webpack-merge、ts-nameof、ts-nameof-loader包:

npm install webpack-merge ts-nameof ts-nameof-loader --save-dev

4.在package.json中设置自定义的webpack配置文件:

{
  //...
  "config": {
    "ionic_webpack": "config/webpack.config.js"
  },
  //...
}

注意:

let webpackMergedConfig = merge.multiple(customConfig, webpackConfig);

这里customConfig必须在webpackConfig的前面。

目前的缺陷:

使用nameof之后,调试时ts的source-map会变成js,可读性变差。

如果在webpack.config.js里配置上enforce: “pre”。

可以让source-map正常,但是编译出的js却带有nameof,会导致无法运行或者报错。

Print Friendly, PDF & Email

留下评论

7 + 1 =

*

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

%d 博主赞过: