zoukankan      html  css  js  c++  java
  • 前端项目模块化的实践3.1:编写可靠类库

    以下是关于前端项目模块化的实践,包含以下内容:

    1. 搭建 NPM 私有仓库管理源码及依赖
    2. 使用 Webpack 打包基础设施代码
    3. 使用 TypeScript 编写可靠类库

    在开始之前,有必要先查看使用 TypeScript 的缘由,见 benefit-of-using-typescript.md

    本文仍然不是 TypeScript 的参考或介绍,文档见于 TypeScript

    开始使用 TypeScript

    tsconfig.json 文件是必须的,为了能在 es5 环境下使用,配置大概如下

    {
      "compilerOptions": {
        "module": "commonjs",
        "allowSyntheticDefaultImports": true,
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "target": "es6"
      },
      "include": [
        "src/**/*",
        "test/**/*"
      ],
      "exclude": [
        "node_modules",
        "**/*.spec.ts"
      ]
    }
    

    如果在开发阶段希望直接运行 TypeScript 的 .ts 文件而不是先编译成 .js 再运行——前者是推荐方式,需要安装依赖

    yarn add typescript ts-node --dev
    

    然后使用类似命令

    node some-file.ts --require ts-node/register
    

    在 TypeScript 中使用 Webpack 打包

    TypeScript 项目推荐使用 .ts 及 ES6 的 import 语法组织所有代码,我们面临以下问题

    Q:遗留代码可能是原生 JavaScript 编写的,在迁移到 TypeScript 之前,如何共存
    A:需要添加对 ts-loader 的依赖,并在 webpack.config.js 中添加规则

            module : {
                rules: [
                    {
                        test   : /.ts$/,
                        exclude: /node_modules/,
                        loader : 'ts-loader',
                    },
                ],
            },
    
            resolve: {
                // Add '.ts' and '.tsx' as a resolvable extension.
                extensions: ['.ts', '.tsx', '.js'],
            },
    

    然后在业务中,我们使用以下方式就可以引用遗留代码

    import base64 = require('./tool/base64'); // base64.js
    

    Q:export default 会产生额外的 default 命名空间,如何消除
    A :设置 webpack 的配置 config.output.libraryExport = 'default' ,形如

    output : {
                library      : 'Enumerable',
                libraryTarget: 'umd',
                globalObject : 'this',
                libraryExport: 'default',
                path         : path.join(__dirname, 'dist'),
                filename     : 'enumerable.js',
            },
    

    通过该配置,我们可以编写类库 打包给原生应用调用

    完整的 webpack.config.js 示例见于 webpack.config.js

  • 相关阅读:
    HDU 1114 Piggy-Bank
    HDU 2955 Robberies
    NTOJ 290 动物统计(加强版)
    POJ 3624 Charm Bracelet
    HDU 2602 Bone Collector
    POJ 1523 SPF(无向图割顶)
    HDU 5311 Hidden String
    HDU 1421 搬寝室
    HDU 1058 Humble Numbers
    POJ 3259 Wormholes(spfa判负环)
  • 原文地址:https://www.cnblogs.com/Jusfr/p/9626588.html
Copyright © 2011-2022 走看看