Giter Club home page Giter Club logo

decoratortest's Introduction

如何为装饰器搭建一套能跑的环境

这里我们配合webpack来搭建一套开发环境

npm init -y 生成package文件,并安装需要的插件

  • npm i -D webpack webpack-cli babel-core babel-preset-env babel-loader@7 @babel/core
  • npm i babel-plugin-transform-decorators-legacy babel-plugin-transform-class-properties -D

创建webpack.config.js文件

编写webpack配置文件,使其支持装饰器模式

const path = require("path");

const config = {
    mode: "development",
    entry: path.resolve(__dirname, "src/index.js"),
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "main.js"
    },
    module: {
        rules: [{
            // 匹配后缀为.js的文件,使其经过babel的转义输出为ES5
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: ['env'],
                    // ��使得装饰器模式生效
                    plugins: ["transform-decorators-legacy", "transform-class-properties"]
                }
            }
        }]
    },
    // 方便debugger
    devtool: "inline-source-map"
}

module.exports = config;

package.json中编写运行脚本

 "scripts": {
    "start": "webpack -w"
  }

执行npm start即可

可能出现的问题:

这里我直接将babel-loader的版本定死在7版本,如果你没有固定在这个版本,而是选择了更高的版本的话可能会运行失败!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.