如何基于 Typescript 开发快应用

快应用 Jul 30, 2020

TypeScript 是一种由微软开发的开源、跨平台的编程语言;它是 JavaScript 的超集,最终会被编译为 JavaScript 代码。用 TypeScript (以下简称 ts)做前端开发,时下可谓如火如荼。本篇文章即在于,探讨如何基于 TypeScript 来开发快应用

早在 2018 年,Babel 团队就宣布 Babel7 支持 TypeScript@babel/preset-typescript ,它正是 Babel 里用来将 ts 语法转换成 js 的重要工具。接下来说明下具体使用步骤:

安装依赖:

npm i -D @babel/preset-typescript
// OR
yarn add --dev @babel/preset-typescript

配置 babel

接着配置 babel.config.js(项目根路径下,无则新建):

module.exports = {
  webpack: {
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: [
            {
              loader: "babel-loader",
              options: {
                cwd: __dirname,
              },
            },
          ],
        },
      ],
    },
  },
};

配置快应用

在项目根目录下新建 quickapp.config.js,做如下配置,告知 Webpack 使用哪些插件:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["@babel/preset-typescript"],
    plugins: [
      "@babel/plugin-transform-modules-commonjs",
      "@babel/plugin-transform-typescript",
    ],
    babelrcRoots: [".", "node_modules"],
  };
};

这样就使得 script 标签内代码、以及引用外部 ts 文件,都可用 ts 语法;同时也可以使用 feature API。上面一系列操作是:首先快应用 .ux 文件已经由 Babel 去处理。这里指定 Babel 转换规则,使其支持 .ux 文件中的 script 标签内 ts 语法。然后在 quickapp.config.js 加上 webpack 的文件处理规则,指定引用的外部 .ts 文件由 babel-loader 去处理。

这里有一个重要点就是,如此配置就可以使得使用 feature 接口不报错。原因在于:Babel 是个语法编译工具,只负责当前文件内容的编译。并不会像 Webpack 那样会去遍历模块引用。先用 babel-loader 把代码给转译了,然后拦截里面对 feature 模块的请求。使得 Webpack 不会当它是模块引用,就不会去对该模块进行搜索。这样就不会因为没有这个模块而报错。而如果采取,基于 ts-loader 方式,它会去校验模块存在与否,就会跟快应用 feature API 冲突, 这就势必会报错。这也是更推荐使用 babel-loader 的缘由。

有在 Github 建立开源项目:Quickapp TypeScript Template,基于 babel-loader 方式,使得可以用 TypeScript 开发快应用;同时,为了做到开箱即用,有对模版做了加工优化处理;如果您有这方面诉求,可参考之。当然,也欢迎提出您宝贵的建议或意见。

您可能会感兴趣的文章

nicejade

予 90 年生人(公历 91);性别男,爱好女;姓氏在百家姓中排一十六位,字琼璞,号轩帅;产自陕南一隅;现栖身于深圳,作为一介程序员。略崇文喜武,大爱豪杰美人,也尚科技;现有维护多个基于不同工具搭建的技术博客,及「倾城之链」、「Arya Jarvis」等个人作品,故而衍生别号:晚晴幽草轩轩主、倾城之链城主、静轩之别苑阁主。

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.