typescript object 转 array 以及动态调用方法

Object.keys(requestParsmsOjb).map(function(paramsIndex){
        let value = requestParsmsOjb[paramsIndex];
        return value;
    })

不知道为何 typescript 里面木有 Object.values() 的方法,所以可以用这种方法,搞定

由于有动态调用某些方法的需求,所以还得继续搞,只怪自己对 js 的理解不深,不过万幸都能搜索到,所以呢就记录下来

参考https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

上面那篇文章是动态调用方法的,下面是我的方法

ojbect[functionName].apply(null, params);

上面的 params 是个参数数组

因为我还有方法名也是动态的需求,所以上面我用数组的方案搞定的,毕竟 js 中都可以用数组的方式来引用,这点还是很好的。所以就可以用数组的方式搞定动态方法名。

webpack4 + typescript 配置笔记

最新需要写一些 js 的东西,正好就想试用一下 typescript 试用以后感觉舒服,那么需求来了,我们需要编译出来的文件,在外部可以调用,所以就有了下面的笔记

参考文章https://www.cnblogs.com/mahidol/p/8874300.html

npm 安装依赖

npm install --save-dev typescript ts-loader webpack webpack-cli

在项目根目录创建两个文件夹 srcdist 以及一个测试用的入口文件 index.html

src 用来存放我们的源码 dist 用来保存生成后的源码

index.html 的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script type="text/javascript" src="./dist/app.js" ></script>
</html>

入口文件仅仅是用来测试的,所以仅仅引入了输出的js 我们在 chrome 控制台测试

根目录创建 typescript 配置文件 tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ]
}

创建 webpack 配置文件,采用https://www.webpackjs.com/guides/production/ 中的方案,只不过有些小修改

安装 webpack-merge

npm install --save-dev webpack-merge

webpack.common.js 公用的配置文件

const path = require('path');

module.exports = {

    entry: './src/index.ts',
    output: {
        filename: 'app.js',
        path: path.resolve(__dirname, 'dist')
    },

    module: {
        rules: [{
            test: /\.ts$/,
            use: "ts-loader"
        }]
    },
    resolve: {
        extensions: [
            '.ts'
        ]
    }
};

webpack.dev.js 开发中的配置文件

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
    module.exports = merge(common, {
        mode: 'development',
});

webpack.prod.js 输出的的配置文件

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
    mode: 'production',
    output: {
        filename: 'app.min.js',
        path: path.resolve(__dirname, 'dist')
    },
});

package.json 中增加两条命令

"start": "webpack --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"

这里跟文档不一样,毕竟文档的开发部分配置文件用的测试服务器,我们这个单纯的就是自己测试,所以依然还是用 webpack 命令编译一下。

至此,我们在普通场景下已经可以使用了。但是由于我们的需求是,这个文件不仅仅在 html 中调用,还需要在外部调用编译出来的代码,但是上面的代码是在外面无法调用的,所以我们继续搞。

webpack.common 配置文件中的 output 属性增加两个配置

library: "MediaParser",
libraryTarget: 'var',

简单点说就是导出为名称为 MediaParser 的变量,这样我们就可以在外部 scrpit 中调用了

具体的这两个参数可以看 webpack 中的文档https://www.webpackjs.com/configuration/output/#output-librarytarget https://www.webpackjs.com/guides/author-libraries/

收工

关于服务端渲染的一些思考

最近一直在看 vue 相关的东西,然后看到了为了优化于是有了服务端渲染(S.S.R.)的技术。

到了这我就想到了一些问题,如果把页面放到服务端渲染了,那么跟我们以前的模板技术有没有什么分别了。

只不过就是不用我们后端套用模板了,然后前端就都可以搞定了。

在刚刚写代码的时候我才想到,也许这就是前后端分离吧,只不过是在代码端进行的分离了。后端只提供接口,前端负责渲染页面。而且,我还想到,可能这也是微服务的一种体现,不知道对不对。就这样,继续写代码,后面会出一些好玩的东西

npm 以及 webpack 的一些笔记

先说点没用的,工作了3年了,相关东西也都接触一些,但是前端呢,还是按照以前的套路,做页面模版,写 js,写 css,但是现代相关的东西却没有深入的了解过。这不好啊,趁着现在有些空闲时间就想学习一下vue,但是 vue-cli 是使用 webpack 打包的,所以第一步就应该学习一下 webpack 趁机了解一下现代前端的开发思想。

本篇笔记总结自: http://www.jianshu.com/p/42e11515c10f,并针对笔记当日的最新版本对配置项进行响应的配置

安装 webpack

//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack

编译项目

webpack {entry file/入口文件} {destination for bundled file/存放bundle.js的地方}

不适用繁杂的命令,使用配置文件编译项目

module.exports = {
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }
}

使用 node 的 package.json 设置 script 来执行编译

// 在package.json 的 scripts 里面添加下面的命令
"build": "webpack"
// 前面的是指在利用 npm run 后面执行的命令,问号后面的是真正执行的命令

使用webpack构建本地服务器

// 在 webpck.config.js 加入下面的配置文件
devServer: {
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    // colors: true,//终端中输出结果为彩色 新版本貌似不需要这个了
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  } 

大概就这么多吧,Loader 和 Bable 没有总结,毕竟这两个扩展性比较强,需要用的时候,在查或者看文档就 ok 了,基本上 webpack 也就了解了一下了。

嘿呀,好久没有写东西了,很爽啊,正在逐步找回节奏,慢慢笔记会更好的。加油