Typescript has been around for a long time, and we’ve been trying to incorporate it into corporate projects. The original projects used NPM, no YARN, no VUE – CLI, webPack is smaller than 4, webPack configuration is still embedded in the project, it’s a solid gold project.

try

(This is the try section, click here to jump to the correct operation)

Some versions of the project:

"vue": "^ 2.5.21"."webpack": "^ 3.6.0".Copy the code

Not wanting to change the package version to cause other problems, and not knowing that ts is only supported by webpack4.0, I took a detour.

Install the typescript

Start by installing typescript directly in your project and execute

npm install -g typescript

After tsconfig.json is configured

{ "baseUrl": "./src", "paths": { // "@modules/*": ["rest/modules/*"], // "@services/*": ["services/*"] }, "compilerOptions": { "module": "system", "noImplicitAny": false, "removeComments": true, "preserveConstEnums": true, "outFile": ".. /.. /built/local/tsc.js", "sourceMap": true }, "include": [ "src/**/*" ], "exclude": [ "node_modules", "**/*.spec.ts" ], }Copy the code

Webpack says it doesn’t recognize typescript because I’m using TS’s function strong type validation.

function hasInfluenza(person: Object) {
    person.face = 😷;
    return person;
}
Copy the code

If you don’t use ts features, webpack will recognize them as JS, but that won’t make sense.

Introducing ts – loader

Hence the introduction of TS-Loader in an attempt to be recognized by WebPack.

npm install ts-loader –save-dev

// webpack.prod.conf.js
module: {
    rules: [
        ...
        { test: /\.ts$/, use: 'ts-loader'}}]Copy the code

After that, there are no errors. I thought I was done, but I kept reporting an error.

System.register is not supported by webpack.

Some say it’s because tsconfig.json is added

“module” : “commonjs”

But even if they did, it still didn’t work.

Think about it and upgrade the Webpack version.

Upgrade the WebPack version

(The text is here.)

A direct installation would not work, it would report a bunch of dependency errors, so I restarted a Vue project directly.

npm instal vue-cli -g

vue create project2

(Of course, not so named, managers see dozen, here is just an example)

Choose what you need. This article is about configuration at vue-cli@3.

Then copy the original project, change main.js to main.ts, and copy the corresponding configuration, other JS files can be temporarily unchanged.

New vue. Config. Js

Introduce the corresponding configuration.

Introducing common CSS

module.exports = {
    css: {
        // Whether to use CSS ExtractTextPlugin
        extract: true.// Enable CSS source maps?
        sourceMap: false.// CSS default configuration item
        loaderOptions: {
            // pass options to sass-loader
            sass: {
                // Automatically inject global variable styles
                prependData: ` @import "src/assets/css/index.scss"; `}},// Enable CSS modules for all CSS/pre-processor files.}};Copy the code

The introduction of the index. HTML

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    configureWebpack: {
        plugins: [
            new HtmlWebpackPlugin({
                inject: true.filename: 'index.html'.template: 'index.html'})],}};Copy the code

For the rest check out the webpack and VUE-CLI documentation.

Remove the router restriction

After main.ts introduces router.js, the router will always report a warning like this.

30:3 Argument of type ‘{ router: any; store: any; render: (h: CreateElement) => VNode; }’ is not assignable to parameter of type ‘ComponentOptions<Vue, DefaultData, DefaultMethods, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>’. Object literal may only specify known properties, and ‘router’ does not exist in type ‘ComponentOptions<Vue, DefaultData, DefaultMethods, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>’.

You can turn off the restriction in tsconfig.json and change it later.

"compilerOptions": {
    "allowJs": true
},
Copy the code

See this issue for details.

Post tsconfig.json.

{
  "compilerOptions": {
    "target": "esnext"."module": "esnext"."strict": false// Not strict detection"jsx": "preserve"."allowJs": true// Include the router"importHelpers": true."noImplicitAny": falseObj = this.obj = null; this.obj = this.obj = null"moduleResolution": "node"."esModuleInterop": true."allowSyntheticDefaultImports": true."sourceMap": true."baseUrl": "."."types": [
      "webpack-env"."mocha"."chai"]."paths": {// @ point to the address"@ / *": [
        "src/*"]},"lib": [
      "esnext"."dom"."dom.iterable"."scripthost"]},"include": [// which paths need TS resolution"src/**/*.ts"]."exclude": [// which paths ts ignores"node_modules"]}Copy the code

conclusion

Then cut to the original project, delete something, and copy it back.

After doing this, I suddenly realized that the dependency error could be solved by deleting package-lock.json.

That said, in order to introduce typescript, I have upgraded the versions of Webpack and Vue to include vuE-CLI. After starting the project, it works normally, but because the version of ELm-UI has been upgraded, there are some CSS display problems, I will take time to fix it.

Happy New Year, everyone. Wear masks.